小程序資訊

                                                                                  小程序商城推薦列表開發全解

                                                                                  小程序開發問題 2018-11-15 17:17:59 | 閱讀:4050 | 作者:方維網絡 | 標簽:小程序商城    小程序開發    

                                                                                  近期在開發一個小程序商城,里面有個欄目涉及到商品推薦列表的加載顯示,如下圖。

                                                                                  小程序商城列表加載數據

                                                                                  感覺這種功能可以做的很簡單,但是要做的細致完善也不容易,因為要考慮如下問題:

                                                                                  1、當數據還未加載時,顯示LOADING提示;

                                                                                  2、當數據加載完時,用戶滾動屏幕自動加載下一頁;

                                                                                  3、數據加載完成,顯示數據已全部加載完成,顯示FwShop提示你,數據已全部加載,沒有更多內容了;

                                                                                  4、下拉自動刷新功能;

                                                                                  5、下拉加載分頁數據時,顯示LOADING提示。

                                                                                  6、數據加載出錯時,顯示提示。

                                                                                  通過以上可見,一個小小的數據列表加載要做完善,就必須把以上的細節都做好。

                                                                                  小程序WXML代碼如下:

                                                                                  小程序WXML代碼


                                                                                  JSON代碼如下

                                                                                  {
                                                                                  "navigationBarTitleText": "推薦",
                                                                                  "enablePullDownRefresh": true
                                                                                  }

                                                                                  JS代碼如下
                                                                                  var util = require('../../utils/util.js')
                                                                                  var app = getApp()
                                                                                  Page({
                                                                                  data: {
                                                                                  data_list: [],//列表列表
                                                                                  pagesize: 6,//每頁顯示多少
                                                                                  cpage: 0,//當前頁數
                                                                                  total_page: 1,//總頁數
                                                                                  is_loading: true,//正在加載中
                                                                                  is_loading_more: false,//加載更多中
                                                                                  is_list_bottom: false//列表底部
                                                                                  },
                                                                                  onLoad: function (options) {
                                                                                  var that = this
                                                                                  get_list(that, 1)
                                                                                  },
                                                                                  onPullDownRefresh: function () {
                                                                                  console.log('onPullDownRefresh')
                                                                                  var that = this
                                                                                  wx.showNavigationBarLoading() //在標題欄中顯示加載
                                                                                  that.setData({
                                                                                  data_list: [],//當前懸賞列表
                                                                                  cpage: 0,//當前頁數
                                                                                  total_page: 1,//總頁數
                                                                                  is_loading: true,
                                                                                  is_loading_more: false,
                                                                                  is_list_bottom: false
                                                                                  })
                                                                                  get_list(that, 1)
                                                                                  wx.hideNavigationBarLoading() //完成停止加載
                                                                                  wx.stopPullDownRefresh() //停止下拉刷新
                                                                                  },
                                                                                  onReachBottom: function () {
                                                                                  console.log('onReachBottom')
                                                                                  var that = this
                                                                                  var cpage = that.data.cpage
                                                                                  var is_loading_more = that.data.is_loading_more
                                                                                  var is_loading = that.data.is_loading
                                                                                  if (!is_loading_more && !is_loading) {
                                                                                  var total_page = that.data.total_page
                                                                                  if (cpage >= total_page) {
                                                                                  that.setData({
                                                                                  is_list_bottom: true
                                                                                  })
                                                                                  return
                                                                                  }
                                                                                  cpage++
                                                                                  that.setData({
                                                                                  is_loading_more: true
                                                                                  })
                                                                                  get_list(that, cpage)
                                                                                  }
                                                                                  },
                                                                                  onShareAppMessage: function () {
                                                                                  return {
                                                                                  title: '熱賣商品',
                                                                                  desc: '熱賣商品',
                                                                                  path: '/pages/goods/hot'
                                                                                  }
                                                                                  }
                                                                                  })

                                                                                  方維網絡專注于微信小程序定制開發,歡迎廣大客戶咨詢400-800-9385
                                                                                   
                                                                                  天天爽夜夜爽夜夜爽精品视频_久久青青草原亚洲av无码_欧美日韩亚洲一区二区三区4k岛国_kkkk国产在线播放