眾所周知，微信小程序使用的是MVVM框架。通過數(shù)據(jù)綁定，可以實(shí)時(shí)分析視圖的內(nèi)容，從而顯示不同的內(nèi)容。以下是一個(gè)經(jīng)常使用的功能，即如果在微信小程序中加載商品列表功能，當(dāng)用戶向下滑動(dòng)時(shí)，商品會(huì)被連續(xù)加載。 似乎js文件首先: 1.初始化參數(shù) 數(shù)據(jù):{ P: 1，//目前是第幾頁？ List: []，//產(chǎn)品數(shù)據(jù)的數(shù)組 HasMoreData: true，//是否需要加載更多內(nèi)容？ }, 再看onLoad函數(shù)，就是加載一個(gè)getProlist函數(shù)。 2.onLoad:函數(shù)(選項(xiàng)){ 變那個(gè)=這個(gè) that . getprolist(& # 39；加載數(shù)據(jù)...') }, 3.getProlist:函數(shù)(消息){ wx.showLoading({ 標(biāo)題:消息，//提示正在加載 }) 變那個(gè)=這個(gè) var p = that.data.p //加載新產(chǎn)品 var request _ new pro _ URL = util . geta piurl(app，& quot/GList/new pro & quot；，& quot& ampp = & quot+ p) util。_get(request_newpro_url， 功能(資源){ wx . hide loading()；//關(guān)閉提示 var list = that . data . list；//獲取列表的值 If (list == false) {//如果數(shù)據(jù)為空，則列表等于加載的數(shù)據(jù)。 var data_list = res.data.data }否則{ var list2 = res.data.data var data _ list = list . concat(list 2)；//因?yàn)閘ist不是空的，所以需要把list和list2這兩個(gè)數(shù)組合起來，然后把值賦給data_list。 } //如果頁數(shù)等于當(dāng)前頁，則不要再次加載 if(RES . data . page _ count & lt；= res.data.p) { that.setData({ hasMoreData: 0， }) } that.setData({ page_count: res.data.page_count List: data_List //將data_list綁定到list，這樣用this.data.list獲取list時(shí)，又是一個(gè)新數(shù)組。 }) }, 功能(資源){ wx . hide loading()； wx.showToast({ 標(biāo)題:res.errMsg， 持續(xù)時(shí)間:2000年 }) } ) }, //頁面相關(guān)事件處理函數(shù)——監(jiān)控用戶的下拉動(dòng)作。 4 . onpulldownresh:function(){ this . getprolist(& # 39；刷新數(shù)據(jù)& # 39；) }, //頁面上底部事件的處理函數(shù) 5.onReachBottom: function () { 變那個(gè)=這個(gè) var p = that.data.p If (that.data.hasMoreData) {//判斷hasMoreData是否在等待1，如果不等于1，則不再調(diào)用getProlist函數(shù)，也就是說加載在某個(gè)時(shí)刻完成。 that.setData({ p:數(shù)字(p) + 1， }) this . getprolist(& # 39；加載更多數(shù)據(jù)& # 39；) }否則{ wx.showToast({ 標(biāo)題:& # 39；沒有更多的數(shù)據(jù)& # 39；, }) } }, 我們來看看后臺(tái)的程序部分。還是比較簡單的，使用thinkphp框架: 公共函數(shù)newpro(){ $ URL _ arr[& # 39；地位& # 39；] = 1;//查詢條件 $ page = 6；//一次加載多個(gè)產(chǎn)品 $ p = I(& # 39；request.p & # 39,1);//什么頁面？ $ pagesize =($ p-1)* $ page；//您想裝載多少件產(chǎn)品？ $ list = $ model goods-& gt；其中($ URL _ arr)-& gt；訂單(& # 39；order_id asc，goods _ id desc & # 39；)-& gt；limit($pagesize，$ page)-& gt；select()；//獲取查詢到的數(shù)據(jù) $ total _ count = $ model goods-& gt；其中($ URL _ arr)-& gt；訂單(& # 39；order_id asc，goods _ id desc & # 39；)-& gt；count()；//計(jì)算所有合格產(chǎn)品的總數(shù) $ page _ count = ceil($ total _ count/$ page)；//所有產(chǎn)品有多少頁，四舍五入？ $ data[& # 39；p & # 39]= $ p； $ data[& # 39；total _ count & # 39]= $ total _ count； $ data[& # 39；page _ count & # 39]= $ page _ count； $ data[& # 39；數(shù)據(jù)& # 39；]= $ list； $ this-& gt；響應(yīng)($data，C(& # 39；API _ TYPE & # 39));//將這些參數(shù)傳遞給微信小程序 } 這個(gè)函數(shù)也使用了小程序MVVM的思想。通過后臺(tái)加載的數(shù)據(jù)，將數(shù)據(jù)一次又一次的連接起來，形成更多的數(shù)據(jù)，讓訪問者舒適的查看內(nèi)容變化，形成良好的瀏覽體驗(yàn)。 寒武紀(jì). render(“尾巴”)

本文由“云崛起”原創(chuàng)發(fā)布，未經(jīng)許可，禁止轉(zhuǎn)載！本文原創(chuàng)鏈接：http://www.ijcxpl.cn/weixinfenxiao/2478.html