微信小程序使用的是MVVM框架,通過(guò)數據的綁定,可以實(shí)時(shí)解析視圖的內容,從而展示不同內容,下面要介紹的是一種經(jīng)常使用的功能,就是如果微信小程序里加載產(chǎn)品的列表功能,當用戶(hù)向下滑動(dòng)時(shí),會(huì )不間斷的加載產(chǎn)品。
看來(lái)先js文件:
1.初始化參數
data: {
p: 1,//當前是第幾頁(yè)
list: [],//產(chǎn)品數據的數組
hasMoreData: true, //是否需要加載更多內容
},
再來(lái)看onLoad函數,就是加載一個(gè)getProlist函數
2.onLoad: function (options) {
var that = this
that.getProlist('正在加載數據...')
},
3.getProlist: function (message) {
wx.showLoading({
title: message,//提示正在加載中
})
var that = this
var p = that.data.p
//加載新產(chǎn)品
var request_newpro_url = util.getApiUrl(app, "/GList/newpro", "&p=" + p)
util._get(request_newpro_url,
function (res) {
wx.hideLoading();//關(guān)閉提示
var list = that.data.list;//獲取list的值
if (list == false) { //如果數據為空,則list就等于加載過(guò)來(lái)的數據就可以
var data_list = res.data.data
}else{
var list2 = res.data.data
var data_list = list.concat(list2);//因為list不為空,所以需要將list和list2兩個(gè)數組合并起來(lái),再把值賦予data_list
}
//如果頁(yè)面數等于當前頁(yè),那就不要再加載了
if (res.data.page_count <= res.data.p) {
that.setData({
hasMoreData: 0,
})
}
that.setData({
page_count: res.data.page_count,
list: data_list //將data_list綁定到list中,這樣list用this.data.list獲取時(shí),又是一個(gè)新的數組了
})
},
function (res) {
wx.hideLoading();
wx.showToast({
title: res.errMsg,
duration: 2000
})
}
)
},
//頁(yè)面相關(guān)事件處理函數--監聽(tīng)用戶(hù)下拉動(dòng)作
4.onPullDownRefresh: function () {
this.getProlist('正在刷新數據')
},
//頁(yè)面上拉觸底事件的處理函數
5.onReachBottom: function () {
var that = this
var p = that.data.p
if (that.data.hasMoreData) { //判斷hasMoreData是不是等1,如果不等于1,則不再運行調用getProlist函數,也就是說(shuō)加載到些結束了。
that.setData({
p: Number(p) + 1,
})
this.getProlist('加載更多數據')
} else {
wx.showToast({
title: '沒(méi)有更多數據',
})
}
},
再來(lái)看下后臺的程序部分,還是比較簡(jiǎn)單的,使用的是thinkphp框架:
public function newpro(){
$url_arr['status'] = 1;//查詢(xún)條件
$page= 6;//每次加載多個(gè)產(chǎn)品
$p = I('request.p',1);//第幾頁(yè)
$pagesize = ($p-1)*$page;//要加載從第幾個(gè)開(kāi)始的產(chǎn)品
$list=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->limit($pagesize,$page)->select();//獲取查詢(xún)的數據
$total_count=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->count();//計算所有符合條件的產(chǎn)品總數
$page_count = ceil($total_count/$page);//所有的產(chǎn)品一共有多少頁(yè),向上取整
$data['p'] = $p;
$data['total_count'] = $total_count;
$data['page_count'] = $page_count;
$data['data'] = $list;
$this->response($data,C('API_TYPE'));//將這些參數傳遞到微信小程序里
}
這個(gè)功能也是同樣運用了小程序MVVM的思想,通過(guò)后臺加載過(guò)來(lái)的數據,將數據一次次并接,形成更多的數據,讓瀏覽者能夠比較舒適的查看內容變化,形成好的瀏覽體驗
以上是啟凡網(wǎng)絡(luò )小程序開(kāi)發(fā)公司的小程序開(kāi)發(fā)知識介紹。我們有一個(gè)專(zhuān)業(yè)的小程序開(kāi)發(fā)團隊,可以根據不同的客戶(hù)要求完成小程序的開(kāi)發(fā)和定制,保證設計出來(lái)的小程序更專(zhuān)業(yè)。我們深知客戶(hù)的需求,致力于服務(wù)每一位客戶(hù),讓客戶(hù)享受到優(yōu)質(zhì)的服務(wù),保證小程序更穩定,保證小程序更好的推廣和營(yíng)銷(xiāo)效果。當然,做好小程序制作的充分準備尤為重要。
刷臉支付系統平臺以其幫助商家智慧營(yíng)銷(xiāo),支持微信
傳統的零售業(yè)要發(fā)展自己,建立多商戶(hù)商城是個(gè)不錯的選
汽車(chē)美容保養改裝維修會(huì )員系統開(kāi)發(fā)定制小程序pc網(wǎng)
因特網(wǎng)帶動(dòng)了傳統產(chǎn)業(yè)的變革,物流圈的無(wú)車(chē)承運人
微信營(yíng)銷(xiāo)上有所作為的企業(yè)紛紛意識到:市面上那些
項目名稱(chēng):曹操小店單用戶(hù)商城開(kāi)發(fā)-小程序版客戶(hù)名稱(chēng):
項目名稱(chēng):曹操清洗-小程序版客戶(hù)名稱(chēng):鄭州曹操跑腿公
醫療體檢預約小程序app定制開(kāi)發(fā)分銷(xiāo)系統
網(wǎng)約車(chē)是網(wǎng)絡(luò )預約出租車(chē)的簡(jiǎn)稱(chēng)。伴隨著(zhù)社會(huì )的進(jìn)步