微信小程式小技巧分享

微信小程式相關程式設計技巧分享，内容來源是經驗總結以及論壇啊，部落格上收集，後續還會分享更多技巧，歡迎大家讨論。

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>