1.首页效果以及实现步骤
②配置导航栏效果
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "本地生活",
"navigationBarTextStyle":"white"
},
③配置tabBar效果
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "./images/home.png",
"selectedIconPath": "./images/home-active.png"
},
{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "./images/message.png",
"selectedIconPath": "./images/message-active.png"
},
{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "./images/联系我们.png",
"selectedIconPath": "./images/联系我们 (1).png"
}
]
},
④实现轮播图效果
2.接口地址
①获取轮播图数据列表的接口
- [GET]http://www.escook.cn/slides
data: {
//存放轮播图数据的列表
swipeiList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getSwiperList()
},
getSwiperList(){
wx.request({
url:'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
this.setData({
swipeiList:res.data
})
}
})
},
④实现轮播图
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
swiper{
height: 350rpx;
}
swiper image{
width: 100%;
height: 100%;
}
⑤实现九宫格效果
onLoad(options) {
this.getSwiperList()
this.getGridList()
},
getGridList(){
wx.request({
url:'https://www.escook.cn/categories',
method:'GET',
success:(res)=>{
this.setData({
gridList:res.data
})
}
})
}
.grid-list{
display: flex;
flex-wrap: wrap;
border-left: 1rpx solid #efefef;
border-top: 1rpx solid #efefef;
}
.grid-item{
width: 33.33%;
height: 200rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
box-sizing: border-box;
}
.grid-item image{
width: 60rpx;
height: 60rpx;
}
.grid-item text{
font-size: 24rpx;
margin-top: 10rpx;
}
⑥实现图片布局