【 微信小程序 】上拉触底事件

本文主要是介绍【 微信小程序 】上拉触底事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

上拉触底

手指在屏幕上的上拉滑动操作 从而加载更多数据

页面上拉触底事件触发时距页面的距离 默认50px (滚动条距离底部的距离 自动加载更多数据)"onReachBottomDistance" : Number

页面相关事件处理函数

Page({data:{},// 监听上拉触底事件onReachBottom(){console.log('上拉触底');}
})

配置上拉触底距离

{"usingComponents": {},"onReachBottomDistance" : 100
}

上拉触底设置节流

Page({data:{  colorList:[],// 1.在data中设置节流阀 isLoading false(没有请求数据) / true(正在请求数据)isLoding:false},// 2.在监听上拉触底事件中执行的函数里面修改isLoading的值getColors(){// 将节流阀设置为 truethis.setData({isLoding:true})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()// 将节流阀设置为 falsethis.setData({isLoding:false})}})},// 3.在onReachBottom中判断节流阀的值 对数据进行控制onReachBottom: function () {// true 阻止请求if(this.data.isLoding){return}else{// false 发起请求this.getColors()}},
})

这篇关于【 微信小程序 】上拉触底事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---