下拉刷新上拉加载更多
1. 页面json配置文件中
使用”enablePullDownRefresh”：true开启下拉刷新功能
使用"onReachBottomDistance"设置上拉触底距离（默认50px）
{
"navigationBarTitleText": "首页",
"usingComponents": {
"van-icon": "@vant/weapp/icon/index",
"van-grid": "@vant/weapp/grid/index",
"van-grid-item": "@vant/weapp/grid-item/index",
"van-card": "@vant/weapp/card/index",
"van-button": "@vant/weapp/button/index"
},
"enablePullDownRefresh":true,//开启下拉刷新功能
"backgroundColor":"#efefef",//下拉刷新背景色(十六进制)
"backgroundTextStyle":"dark",//下拉刷新时loading(小圆点)样式(dark/light)
"onReachBottomDistance":100//设置上拉触底距离为100
}
2.页面js文件中
调用下拉刷新固定方法onPullDownRefresh(){},编写想要的效果的逻辑代码。下拉刷新的loading效果不会主动消失，要调用wx.stopPullDownRefresh()停止当前页面的下拉刷新
调用上拉触底固定方法onReachBottom(){},编写想要的效果的逻辑代码。上拉触底节流处理，防止连续触底加载多页
import { RequestGoodsList } from '../../api/goods'
Page({
data: {
goodsList: [], // 菜品列表
currentNo: 1, // 当前页号
totalNum: 0, // 总页数
isloading: false,//节流阀。false没有进行的数据请求，true当前正在进行数据请求
},
onLoad(options) {
this.getGoodsList()
},
/**
* 获取菜品列表
*/
async getGoodsList() {
this.setData({ isloading: true })//打开节流阀。当前正在进行数据请求
wx.showNavigationBarLoading() // 加载中...
let { currentNo, goodsList } = this.data
wx.request({
url: 'https://10.7.163.165:8089/api/test',
method: get,
data: currentNo,
success: res => {
resolve(res.data)
const { resultCode, resultInfo } = res
if (resultCode === 1) {
const list = resultInfo.list // 当前页列表
const totalNum = resultInfo.totalNum // 总页数
goodsList = [...goodsList, ...list] // 拼接以前列表和当前列表
this.setData({ goodsList, totalNum })
}
},
fail: error => {
reject(error)
},
complete:()=>{
this.setData({ isloading: false })//关闭节流阀
}
})
//const data = await RequestGoodsList(currentNo)
//const { resultCode, resultInfo } = data
//if (resultCode === 1) {
// const list = resultInfo.list // 当前页列表
// const totalNum = resultInfo.totalNum // 总页数
// goodsList = [...goodsList, ...list] // 拼接以前列表和当前列表
// this.setData({ goodsList, totalNum })
//}
wx.hideNavigationBarLoading() // 结束加载中...
},
/**
* 下拉刷新回调
*/
onPullDownRefresh() {
this.setData({ currentNo: 1, goodsList: [] })
this.getGoodsList()
wx.stopPullDownRefresh() //停止下拉刷新
},
/**
* 触底执行
*/
onReachBottom() {
const { currentNo, totalNum } = this.data
if (currentNo < totalNum) {
this.setData({ currentNo: currentNo + 1 })
//发请求之前判断节流阀是true还是false，如果是true说明当前正在进行数据请求，直接return出去，否则发起请求
if(this.data.isloading)return
this.getGoodsList()
}
}
})
3.页面wxml结构代码
<view>
<!-- 菜品列表 -->
<van-grid column-num="2" border="{{ false }}">
<van-grid-item use-slot wx:for="{{ goodsList }}" wx:key="*this">
<image bind:tap="onGoodsDetail" data-id="{{item.id}}" style="width: 130px; height: 130px;" src="{{util.filterUrl(item.picture)}}" />
<view class="g-shop">
<view class="m-title text_morerow ">{{item.shop}}</view>
<view class="m-price">价格:<text>￥{{item.price}}</text> </view>
</view>
</van-grid-item>
</van-grid>
</view>
