如何實(shí)現(xiàn)在微信小程序下如何無(wú)刷新加載產(chǎn)品列表的內(nèi)容

我們都知道，微信小程序使用的是MVVM框架，通過(guò)數(shù)據(jù)的綁定，可以實(shí)時(shí)解析視圖的內(nèi)容，從而展示不同內(nèi)容，下面要介紹的是一種經(jīng)常使用的功能，就是如果微信小程序里加載產(chǎn)品的列表功能，當(dāng)用戶(hù)向下滑動(dòng)時(shí)，會(huì)不間斷的加載產(chǎn)品。
看來(lái)先js文件：
1.初始化參數(shù)
data: {
p: 1,//當(dāng)前是第幾頁(yè)
list: [],//產(chǎn)品數(shù)據(jù)的數(shù)組
hasMoreData: true, //是否需要加載更多內(nèi)容
},
再來(lái)看onLoad函數(shù)，就是加載一個(gè)getProlist函數(shù)
2.onLoad: function (options) {
var that = this
that.getProlist('正在加載數(shù)據(jù)...')
},
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) { //如果數(shù)據(jù)為空，則list就等于加載過(guò)來(lái)的數(shù)據(jù)就可以
var data_list = res.data.data
}else{
var list2 = res.data.data
var data_list = list.concat(list2);//因?yàn)閘ist不為空，所以需要將list和list2兩個(gè)數(shù)組合并起來(lái)，再把值賦予data_list
}
//如果頁(yè)面數(shù)等于當(dāng)前頁(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è)新的數(shù)組了
})
},
function (res) {
wx.hideLoading();
wx.showToast({
title: res.errMsg,
duration: 2000
})
}
)
},
//頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
4.onPullDownRefresh: function () {
this.getProlist('正在刷新數(shù)據(jù)')
},
//頁(yè)面上拉觸底事件的處理函數(shù)
5.onReachBottom: function () {
var that = this
var p = that.data.p
if (that.data.hasMoreData) { //判斷hasMoreData是不是等1，如果不等于1，則不再運(yùn)行調(diào)用getProlist函數(shù)，也就是說(shuō)加載到些結(jié)束了。
that.setData({
p: Number(p) + 1,
})
this.getProlist('加載更多數(shù)據(jù)')
} else {
wx.showToast({
title: '沒(méi)有更多數(shù)據(jù)',
})
}
},
再來(lái)看下后臺(tá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)的數(shù)據(jù)
$total_count=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->count();//計(jì)算所有符合條件的產(chǎn)品總數(shù)
$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'));//將這些參數(shù)傳遞到微信小程序里
}

分享題目：如何實(shí)現(xiàn)在微信小程序下如何無(wú)刷新加載產(chǎn)品列表的內(nèi)容
轉(zhuǎn)載來(lái)于：http://www.muchs.cn/news12/244162.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、面包屑導(dǎo)航、網(wǎng)站營(yíng)銷(xiāo)、建站公司、App開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)