开发微信小程序 案例01-本地生活首页页面

1---home.wxml 区域 (页面整体的标签)

<!-- 轮播图区域 -->

<swiper indicator-dots circular autoplay>

<swiper-item wx:for="{{SwiperArr}}" wx:key="id">

<image src="{{item.image}}"></image>

</swiper-item>

</swiper>

<!-- 九宫格区域 -->

<view class="grid-Arr">

<view class="grid-item" wx:for="{{GridArr}}" wx:key="id">

<image src = "{{item.icon}}"></image>

<text>{{item.name}}</text>

</view>

</view>

<!-- 图片区域 -->

<view class="imgBox">

<image src="/images/link-01.png" mode="widthFix"></image>

<image src="/images/link-02.png" mode="widthFix"></image>

</view>
2---app.json区域 (全局配置文件)

{

"pages": [

"pages/home/home",

"pages/message/message",

"pages/contact/contact"

],

"window": {

"navigationBarTextStyle": "white",

"navigationBarTitleText": "本地生活",

"navigationBarBackgroundColor": "#2b4b6b"

},

"tabBar": {

"list": [{

"pagePath": "pages/home/home",

"text": "首页",

"iconPath": "/images/首页-置灰.png",

"selectedIconPath": "/images/1_导航-默认 .png"

},{

"pagePath": "pages/message/message",

"text": "消息",

"iconPath": "/images/消息-置灰.png",

"selectedIconPath": "/images/即时聊天.png"

},{

"pagePath": "pages/contact/contact",

"text": "联系人",

"iconPath": "/images/填选购人.png",

"selectedIconPath": "/images/1_用户管理.png"

}]

},

"style": "v2",

"componentFramework": "glass-easel",

"sitemapLocation": "sitemap.json",

"lazyCodeLoading": "requiredComponents"

}
3-home.js 区域 (存放home页面的数据)

Page({

/**

* 页面的初始数据

*/

data: {

//轮播图数组SwiperArr : [],

//九宫格 数组GridArr : [],

},

/**

* 生命周期函数--监听页面加载

*/

onLoad(options) {

this.getSwiperArr()

this.getGridArr()

},

//获取轮播图数据

getSwiperArr(){

wx.request({

// https://applet-base-api-t.itheima.net/slides

url: 'https://applet-base-api-t.itheima.net/slides',

method :'GET',

success: (res) => {

this.setData({

SwiperArr: res.data

})

}

})

},

// 获取九宫格数据

getGridArr(){

wx.request({

url: 'https://applet-base-api-t.itheima.net/categories',

method : "GET",

success : (res) => {

this.setData({

GridArr :res.data

})

}

})

},
4--home.wxss ( home页面的渲染)

/* 轮播图区域start*/

swiper{

height: 350rpx;

}

swiper image {

width: 100%;

height: 100%;

}

/* 轮播图区域end */

/*九宫格区域start*/

.grid-Arr{

display: flex;

flex-wrap: wrap; /*换行*/

}

.grid-item{

width: 33.33%;

height: 200rpx;

display: flex;

flex-direction: column;/*主轴纵向*/

/*居中*/

align-items: center;

justify-content: center;

border-bottom: 1px solid #ededde;

border-right: 1px solid #ededde;

box-sizing: border-box;

}

.grid-item image{

width: 60rpx;

height: 60rpx ;

}

.grid-item text{

font-size: 24rpx;

margin-top: 10rpx;

color: gray;

}

/*九宫格区域end*/

/*图片区域start*/

.imgBox{

display: flex;

justify-content: space-around;

padding-top: 20rpx;

}

.imgBox image{

width: 45%;

height: 200rpx;

}

/* 图片区域 end*/
5--效果展示

相关推荐
Qspace丨轻空间21 分钟前
气膜场馆:推动体育文化旅游创新发展的关键力量—轻空间
大数据·人工智能·安全·生活·娱乐
独行soc3 小时前
#渗透测试#SRC漏洞挖掘#深入挖掘XSS漏洞02之测试流程
web安全·面试·渗透测试·xss·漏洞挖掘·1024程序员节
李少兄4 小时前
Notepad++ 更改字体大小和颜色
notepad++·技巧
丁总学Java10 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
lantiandianzi12 小时前
基于单片机的老人生活安全监测系统
单片机·嵌入式硬件·生活
mosen86812 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650212 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
morris13113 小时前
【SpringBoot】Xss的常见攻击方式与防御手段
java·spring boot·xss·csp
小飞哥liac1 天前
微信小程序的组件
微信小程序
stormjun1 天前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享