微信小程序上拉触底事件

一、什么是上拉触底事件

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

二、监听上拉触底事件

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

  }
})
相关推荐
毕设源码-赖学姐3 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud4 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞12 小时前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞19 小时前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗20 小时前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张1 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师1 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪1 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2091 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
fakaifa1 天前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版