1. 程式人生 > >小程式上拉載入更多資料,分類切換狀態等例項

小程式上拉載入更多資料,分類切換狀態等例項

發現很多人對小程式的文章比較好奇,購物車那篇居然佔了快三分一的訪問量,因此寫多篇關於小程式的常用功能。

上拉載入更多其實很簡單,關鍵點只是知道上拉載入是變相的分頁載入,然後通過初始化記錄值和通過陣列來儲存載入過的資料(使用者看回載入過的資料),同樣的每行解析,分類切換的狀態顯示的想法是慕課網的七月講師在視訊的想法。我這裡簡化一下。

    data: {
        begin: 0,
        goods_list_key:[]//上拉載入更多初始化
    },
    goodsBegin: function (catId) {//初始化首頁商品展示
        var that = this;
        var begin = this.data.begin;//初始化時是零,後面通過上拉會不斷疊加
        //console.log(begin);
        wx.request({
            url: 'https://www.xxxxxx/' + begin + '/' + catId,
            method: 'GET', 
            header: { 'content-type': 'application/json' },
            success: function (res) {
                if(res.data ==""){//沒有返回資料時的判斷
                    wx.showToast({
                    title: '已載入完所有資料',
                    icon: 'success',
                    duration: 2000
                    })
                    //console.log(res.data);
                /*
                that.setData({
                begin:0                    
                })
                */
                }else{
    var goods_list_key=that.data.goods_list_key;//通過在小程式的data開陣列進行儲存,陣列是專門處理資料儲存的方法
    goods_list_key=goods_list_key.concat(res.data);//通過concat來合拼所有陣列統一為一個數組
    for(var i=0;i<goods_list_key.length;i++){//對商品的價格進行小數點後兩位的保留顯示
   var costPrice= parseFloat(goods_list_key[i].costPrice);
   costPrice =costPrice.toFixed(2);
   goods_list_key[i].costPrice=costPrice;
    }
               that.setData({//賦值
                    goods_list_key: goods_list_key
                })
                }
            }
        })
    },
    scrolltolower: function () {//上拉載入事件
        var begin = this.data.begin;//獲取記錄值,
        begin += 4;//自加
        this.setData({//更新記錄值
            begin: begin
        });
        var catId = wx.getStorageSync('catId');//獲取使用者點選的分類快取
        this.goodsBegin(catId);//執行載入資料函式
    },
    cateId: function (event) {//使用者切換分類時,分類點亮的顯示效果,商品顯示初始化
        var catId = event.currentTarget.dataset.catId;//獲取傳過來的分類id
        wx.setStorageSync('catId', catId);//記錄快取。用於上拉載入事件用
        var catIds=new Array;//開陣列物件
        catIds[catId]=true;//將獲取的分類id記錄到陣列,並賦予狀態
        this.setData({//將begin設回為0
        catIds:catIds,
        goods_list_key:[],//重置商品儲存陣列
        begin:0//初始化記錄值
        });
        //wx.setStorageSync('catIds',catIds);
        this.goodsBegin(catId);//執行載入資料函式說
    }