微信小程序 上拉触底事件 及 小程序 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 界面

<!-- 上拉触底案例 -->
<view wx:for="{{coloList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}
</view>

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 正则

2. wxs不支持类似ES6及以上的语法形式

• 不支持 let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc。。。
• 支持 var定义变量、普通function函数类似ES5的语法

3. wxs 遵循CommonJS 规范

• module 对象
• require() 函数
• module.exports对象

内嵌 wxs 脚本

编写在wxml文件中的标签内，就想JavaScript代码编写在html的<script>标签内一样
wxml文件中的每个标签，必须提供 module 属性，用来指定当前wxs的模块名称，方便在wxml中访问模块中的成员

<!-- 内嵌 wxs 脚本 -->
<view>{{username}}</view>
<view>{{test.toUpper(username)}}</view>
<wxs module="test">
  module.exports.toUpper = function(str){
    return str.toUpperCase()
  }
</wxs>

定义外联的wxs脚本

wxs代码可以编写在以 .wxs为后缀的文件内

使用外联的wxs脚本

在wxml中引入外联的wxs脚本时，必须为标签添加module和src属性，其中：
- module 用来指定模块名称
- src 用来指定要引入的脚本的路径，且必须是相对路径

<!-- 外联wxs 脚本 -->
<wxs src="../message/tools.wxs" module="test1"></wxs>
<view>{{name}}</view>
<view>{{test1.toLower(name)}}</view>

/// tools.wxs
function toLower(str){
  return str.toLowerCase()
}

module.exports ={
  toLower:toLower
}

wxs 的特点

1.借鉴了JavaScript的语法
2.不能作为组件的事件回调
- 经常配合Mustache语法({{}})进行使用
3.隔离性
wxs的运行环境和其他JavaScript代码是隔离的，体现在如下方面：
- wxs不能调用js中定义的函数
- wxs不能调用小程序提供的API
4. 性能好

• 在iOS设备上，小程序的wxs会比JavaScript代码快2-20倍
• 在android 设备上，二者的运行效率无差异