微信小程序小技巧分享

微信小程序小技巧分享

微信小程序相关编程技巧分享，内容来源是经验总结以及论坛啊，博客上收集，后续还会分享更多技巧，欢迎大家讨论。

1. 滚动加载数据方式

在滚动分页加载数据的时候，通常做法是定义一个数据arr，下滑触发加载更改请求接口获取分页数据arr2，然后将arr2合并到arr，重新setData到arr。这样的操作方式是每次都全量覆盖，当数据量过大时，会造成渲染加载卡顿问题。arr数组结构为[{ },{ },{ },{ }]

旧方法：

Page({
    data:{
        arr:[]      //这是一个滚动渲染数组数据
    }
}) 

//上拉触底方法
onReachBottom:function(){
    let that = this;
    let arr = that.data.arr;
    
    wx.reauest({
        url : '',
        data : { },
        success : function(res){
            let newData = res.result;  //获取接口返回的分页数据
            arr.push(...newData);      //将新数据合并到原数组中
            that.setData({
                arr : arr
            });
        }
    });
}

<block wx:for="{{ arr }}" >
    <view>{{item.name}}</view>
</block>

新方法：
新方式通过二位数组的方式来渲染页面，并在获取分页数据后将新数据以数组元素的方式直接追加到一维数组。
arr数组的格式为：[[{},{},{}],[{},{}],[{},{}]]

Page({
    data:{
        arr:[]      //这是一个滚动渲染数组数据
    }
}) 

//上拉触底方法
onReachBottom:function(){
    let that = this;
    let arr = that.data.arr;
    
    wx.reauest({
        url : '',
        data : { },
        success : function(res){
            let newData = res.result;   //获取接口返回的分页数据
            that.setData({
                [ `arr[${arr.length}]`] : newData
            });
        }
    });
}

<block wx:for="{{ arr }}" >
    <block wx:for="{{ item }}" wx:for-index="ind" wx:for-item="it" >
        <view data-index="{{ index }}" data-ind="{{ ind }}" ontap="changeName">{{it.name}}</view>
    </block>
</block>

当需要更改其中某一个对象的值时

    changeName:function(e){
        let {index,ind} = e.currentTarget.dataset;
        this.setData({
            [`arr[${index}][${ind}].name`] : "哇哈哈"
        });
    }

2. 浮点数据取整

使用"~~(1.999)" 语法，将浮点数 向下取整

    <view>{{~~(1.9999)}}</view>
    <!-- 最后效果 -->
    <view>1</view>