小程式上拉載入更多資料,分類切換狀態等例項
阿新 • • 發佈:2019-01-02
發現很多人對小程式的文章比較好奇,購物車那篇居然佔了快三分一的訪問量,因此寫多篇關於小程式的常用功能。
上拉載入更多其實很簡單,關鍵點只是知道上拉載入是變相的分頁載入,然後通過初始化記錄值和通過陣列來儲存載入過的資料(使用者看回載入過的資料),同樣的每行解析,分類切換的狀態顯示的想法是慕課網的七月講師在視訊的想法。我這裡簡化一下。
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);//執行載入資料函式說 }