微信小程序上拉触底事件

一、什么是上拉触底事件

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

二、监听上拉触底事件

在页面的.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() {

  }
})
相关推荐
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷13 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯13 小时前
小程序自定义组件学习笔记
微信小程序
阿眠15 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
xmdoor20 小时前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
大锦终1 天前
【Linux】第一个小程序—进度条
linux·运维·服务器·小程序