微信小程序下拉刷新和上拉触底_微信小程序上拉触底

下拉刷新和上拉触底一般都是为有需要的页面局部配置 在页面的 .json中

页面配置 | 微信开放文档

 例子：(无限刷新的颜色列表)

效果图

 my.wxml文件

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

my.js文件

// pages/my/my.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    colorList:[]   //颜色列表
  },
  getColor(){
    let colors = [];  //定义一个空的颜色数组
    for(let i = 0;i<10;i++){   //往数组中放入十个随机的rgba格式的颜色
      colors.push(Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.random())
    }
    return colors  
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      colorList : this.getColor()   //页面加载时为颜色列表赋值
    })
    console.log(this.data.colorList);
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
 
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({
      colorList: this.getColor()    //每次下拉刷新时将颜色列表初始为十条数据
    })
    wx.stopPullDownRefresh()   //调用完后一定要记得关闭下拉刷新
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.setData({
      //当滚动条距离底部还有100px的时候调用一次getColor()方法获取新的十条数据追加进颜色列表
      colorList: [...this.data.colorList, ...this.getColor()]  
    })
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
 
  }
})