微信小程序 上拉触底事件 及 小程序 wxs 脚本

源代码地址

https://git.weixin.qq.com/depressiom/my_mp

效果图

contact.json json配置上拉触底

{
  "usingComponents": {},
  "onReachBottomDistance": 50 //设置上拉触底 触发距离 默认50px
}

contact.js 获取数据

Page({

  /**
   * 页面的初始数据
   */
  data: {
    coloList:[], //随机颜色列表
    isloading:false
  },
  /**
   * 随机获取颜色的方法
   */
  getColors(){
    this.setData({
      isloading:true
    })
    wx.showLoading({
      title: '数据加载中。。。', //展示loding效果
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method:'GET',
      success:({data:res})=>{
        this.setData({
            // 新旧数据拼接  旧数据展开赋给数组，新数据展开赋给数组
            coloList:[...this.data.coloList, ...res.data]
        })
        // console.log(this.data.coloList);
      },
      complete:()=>{ 
        wx.hideLoading();  // 隐藏loading效果
        this.setData({
          isloading:false
        })
      }
    })
  },

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

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 进行数据节流处理

    this.getColors();
  }

})

对上拉触底进行节流处理

  1. 在data中定义isloading 节流阀
    • false 表示当前没有进行任何数据请求
    • true 表示当前正在进行数据请求
  2. 在getColors()方法中修改isloading节流阀的值
    • 在刚调用getColors时将节流阀设置true
    • 在网络请求中的complete回调函数中，将节流阀充值为false
  3. 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
    • 如果为true 阻止当前请求
    • 如果false 发起当前请求

contact.wxml 界面


{{item}}

contact.wxss

/* 上拉触底案例 */
.num-item{
  border: 1rpx solid #eeffee;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

wxs 脚本

小程序中wxs的典型应用场景就是 ‘过滤器’

  1. wxs有自己的数据类型
  • number 数值类型
  • string 字符串类型
  • boolean 布尔类型
  • object 对象类型
  • function 函数类型
  • array 数组类型
  • date 日期类型
  • regexp 正则
  1. wxs不支持类似ES6及以上的语法形式
  • 不支持 let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc。。。
  • 支持 var定义变量、普通function函数类似ES5的语法
  1. wxs 遵循CommonJS 规范
  • module 对象
  • require() 函数
  • module.exports对象

内嵌 wxs 脚本

编写在wxml文件中的标签内，就想JavaScript代码编写在html的