项目前的准备
关闭自动热重载警告:详情->本地设置->关闭“启用代码自动热重载”
新建项目并梳理项目结构
配置导航栏效果
全局app.json->window
配置tabBar
在全局app.json中和window平级创建一个tabBar节点
实现轮播图效果
接口地址
①获取轮播图数据列表的接口
②在子页面中定义获取轮播图数据的方法
③在onload中调用这个方法-通过this实例页面一加载就调用
④通过setDate()将数据赋值data里面的数组
data: {
//存放轮播图数据的列表
swiperList:[]
},
//获取轮播图数据的方法
getSwiperLsit()
{
wx.request({
url:'https://www.escook.cn/slides',
method:'GET',
success:(res)=>{
console.log(res);
this.setData({
swiperList:res.data
})
}
})
},
⑤渲染轮播图的效果
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}">
</image>
</swiper-item>
</swiper>
上拉触底功能
步骤一-定义随机获取颜色的方法
data: {
colorList:[]
},
getColors(){
wx.request({
url: 'https://www.escook.cn/api/color',
method:'get',
success:({data:res})=>{
console.log(res)
// 数据拼接
this.setData({
colorList:[...this.data.colorList,...res.data]
})
}
})
},
步骤二-在页面加载时获得初始数据
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getColors()
},
步骤三-渲染UI结构并美化页面效果
<!--pages/contact/contact.wxml-->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>
页面要足够大可以下拉刷新
步骤四-上拉触底时获取随机颜色
//页面上拉触底事件的处理函数
onReachBottom:function(){
//调用获取随机颜色的方法
this.getColors()
}
上拉刷新,数据一次性获取10条,由10条变成20条
步骤五-添加loading提示效果
getColors(){
//展示loading效果
wx.showLoading({
title: '数据加载中。。。',
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'get',
success:({data:res})=>{
console.log(res)
// 数据拼接
this.setData({
colorList:[...this.data.colorList,...res.data]
})
},
//手动关闭数据加载
complete:()=>{
wx.hideLoading()
}
})
},
步骤六-对上拉触底进行节流处理
data: {
colorList:[],
isloading:false
},
getColors(){
this.setData({
isloading:true
})
//展示loading效果
wx.showLoading({
title: '数据加载中。。。',
})
wx.request({
url: 'https://www.escook.cn/api/color',
method:'get',
success:({data:res})=>{
console.log(res)
// 数据拼接
this.setData({
colorList:[...this.data.colorList,...res.data]
})
},
//手动关闭数据加载
complete:()=>{
wx.hideLoading()
this.setData({
isloading:false
})
}
})
},
onReachBottom() {
if(this.data.isloading) return
this.getColors()
},