Day3小程序页面上拉触底事件

1.什么是上拉触底事件
上拉触底事件是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

1.2监听页面的上拉触底事件

//json文件 必须声明onReachBottomDistance，否则即使声明了
//页面上拉触底事件的处理函数也不会起作用
  "onReachBottomDistance": 50

//.wxml
<view class="text">
</view>

//wxss
.text{
    width: 100%;
    height: 1700rpx;
    background-color: aqua;
}


//js
 /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        console.log('上拉触底事件触发了')
    },

1.3案例
①定义获取随机颜色的方法
②在页面加载时获取初始数据
③渲染UI结构
④在上拉触底时调用获取随机颜色的方法
⑤添加loading提示效果
⑥对上拉触底进行节流处理

案例

//wxml
<view wx:for="{{colorList}}" wx:key="index" class="num-item" 
style="background-color: rgb({{item}});">{{item}}</view> 

//wxss
.num-item{
    width: 100%;
    height: 200rpx;
    text-align: center;
    line-height: 200rpx;
    border-radius: 8rpx;
    margin-top: 15rpx;
    box-shadow: 1rpx 1rpx 1rpx #aaa;
}

 data: {
        colorList:[],
        isLoading:false
    },

  /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.getColors()
    },

    getColors(){
        this.setData({
            isLoading: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]
                })
          },
          //加载成功后隐藏loading
          complete:()=>{
            wx.hideLoading(),
            this.setData({
                isLoading:false
            })
        }
        })
    },
 onReachBottom:function(){
        if(this.data.isLoading) return
        else this.getColors()
        
    },

添加loading提示效果在–》帮助–》开发者文档–》API
对上拉触底进行节流处理

在data中定义loading节流阀

• false表示当前没有进行任何数据请求
• true表示当前正在进行数据请求

在getColors()方法中修改isloading的值

• 在刚调用getColors()时将节流域值设置为true
• 在网络请求的complete回调函数中，将节流域重置为false

在onReachBottom中判断isloading的值，从而对数据请求进行节流控制

• 如果isloading为true时，则阻止当前请求
• 如果isloading为false时，则发起数据请求