案例-本地生活
一、首页效果
二、实现步骤
1.新建项目并梳理项目结构
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
]
2.配置导航栏效果
"window": {
"backgroundTextStyle": "light",
"navigationBarTitleText": "本地生活",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTextStyle": "white"
}
3.配置tabBar效果
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/image/home.png",
"selectedIconPath": "/image/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息页面",
"iconPath": "/image/message.png",
"selectedIconPath": "/image/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/image/contact.png",
"selectedIconPath": "/image/contact-active.png"
}]
}
4.实现轮播图效果
5.实现九宫格效果
6.实现图片布局
// pages/home/home.js
Page({
/**
* 页面的初始数据
*/
data: {
// 存放轮播图数据的列表
swiperList: [],
// 存放九宫格数据的列表
gridList: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getSwiperList()
this.getGridList()
},
// 获取轮播图数据的方法
getSwiperList() {
wx.request({
url: 'https://applet-base-api-t.itheima.net/slides',
method: 'GET',
success: (res) => {
this.setData({
swiperList: res.data
})
}
})
},
// 获取九宫格数据的方法
getGridList() {
wx.request({
url: 'https://applet-base-api-t.itheima.net/categories',
method: 'GET',
success: (res) => {
this.setData({
gridList: res.data
})
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})