微信小程序上拉触底事件

一、什么是上拉触底事件

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

二、监听上拉触底事件

在页面的.js文件中,通过onReachBottom()函数即可监听当前页面的上拉触底事件。

三、配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时,滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中,通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px,在实际开发中,可以根据自己的需求修改这个默认值。

四、微信小程序上拉触底案例

1. 页面效果

2. 实现步骤

  1. 定义获取随机颜色的方法
  2. 在页面加载时初始化数据
  3. 渲染UI结构并且美化页面效果
  4. 在上拉触底时调用获取随机颜色的方法
  5. 添加loading提示效果
  6. 对上拉触底进行节流处理

3. 具体实现

  1. 定义获取随机颜色的方法

    getColors() {
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    // console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
       },
     });

    },

  2. 在页面加载时初始化数据

    onLoad(options) {
    this.getColors();
    },

  3. 渲染UI结构并且美化页面效果

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

    /* pages/connect/connect.wxss */
    .num-item {
    border: 1rpx solid #efefef;
    border-radius: 8rpx;
    line-height: 200rpx;
    margin: 15rpx;
    text-align: center;
    text-shadow: 0rpx 0rpx 5rpx #fff;
    box-shadow: 1rpx 1rpx 6rpx #aaa;
    }

  4. 在上拉触底时调用获取随机颜色的方法

    onReachBottom() {
    this.getColors();
    },

  5. 添加loading提示效果
    在调用getColors( )函数的内部,发送请求之前展示loading效果,发送请求获取数据之后隐藏loading效果。

    getColors() {
    // 需要展示loading效果
    wx.showLoading({
    title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
       },
       complete: ()=>{
         wx.hideLoading();
       }
     });

    },

  6. 对上拉触底进行节流处理

  • 在data中定义isLoading节流阀:true 正在进行数据请求,false 当前没有进行任何数据请求

  • 在getColor()方法中修改isLoading节流阀的值:刚调用 设置为 true,在网络请求的complete中 重置为 false

  • 在onReachBottom中判断节流阀的值,从而对数据请求进行节流控制:true 阻止当前请求,false 可以发起数据请求

    data: {
    colorList: [],
    isLoading: false
    },
    getColors() {
    this.setData({
    isLoading: true
    });
    // 需要展示loading效果
    wx.showLoading({
    title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
    url: 'https://applet-base-api-t.itheima.net/api/color',
    method: 'GET',
    success: ( {data:res})=>{
    console.log(res.data);
    this.setData({
    colorList: this.data.colorList.concat(res.data)
    })
    console.log(this.data.colorList);

    复制代码
        },
        complete: ()=>{
          wx.hideLoading();
          this.setData({
            isLoading: false
          })
        }
      });
    
    },

    onReachBottom() {
    if (this.data.isLoading===true) {
    return;
    }
    this.getColors();
    },

4. 完整.js文件代码

复制代码
// pages/connect/connect.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    colorList: [],
    isLoading: false
  },
  getColors() {
    this.setData({
      isLoading: true
    });
    // 需要展示loading效果
    wx.showLoading({
      title: '正在加载中...',
    }); // 展示loading效果
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: 'GET',
      success: ( {data:res})=>{
        console.log(res.data);
        this.setData({
          colorList: this.data.colorList.concat(res.data)
        })
        console.log(this.data.colorList);
       
      },
      complete: ()=>{
        wx.hideLoading();
        this.setData({
          isLoading: false
        })
      }
    });

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.isLoading===true) {
      return;
    }
    this.getColors();
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
相关推荐
鸭鸭梨吖1 小时前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发2 小时前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb
mon_star°4 小时前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台
The_era_achievs_hero4 小时前
微信小程序91~100
微信小程序·小程序
假装我不帅5 小时前
微信小程序下拉加载更多实现
微信小程序·小程序
高压锅_12205 小时前
Cursor+Coze+微信小程序实战: AI春联生成器
人工智能·微信小程序·notepad++
2301_805962935 小时前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Ama_tor11 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
毛毛三由20 小时前
基于svga+uniapp的微信小程序动画组件开发指南
微信小程序·uni-app·notepad++