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

最新推荐文章于 2024-10-16 09:12:58 发布

zwj、

最新推荐文章于 2024-10-16 09:12:58 发布

阅读量811

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Twisted_/article/details/120467092

版权

上拉触底

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

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

页面相关事件处理函数

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

配置上拉触底距离

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

上拉触底设置节流

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