我們都知道，微信小程序使用的是MVVM框架，通過數據的綁定，可以實時解析視圖的內容，從而展示不同內容，下面要介紹的是一種經常使用的功能，就是如果微信小程序里加載產品的列表功能，當用戶向下滑動時，會不間斷的加載產品。
看來先js文件：
1.初始化參數
data: {
p: 1,//當前是第幾頁
list: [],//產品數據的數組
hasMoreData: true, //是否需要加載更多內容
},
再來看onLoad函數，就是加載一個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
//加載新產品
var request_newpro_url = util.getApiUrl(app, "/GList/newpro", "&p=" + p)
util._get(request_newpro_url,
function (res) {
wx.hideLoading();//關閉提示
var list = that.data.list;//獲取list的值
if (list == false) { //如果數據為空，則list就等于加載過來的數據就可以
var data_list = res.data.data
}else{
var list2 = res.data.data
var data_list = list.concat(list2);//因為list不為空，所以需要將list和list2兩個數組合并起來，再把值賦予data_list
}
//如果頁面數等于當前頁,那就不要再加載了
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獲取時，又是一個新的數組了
})
},
function (res) {
wx.hideLoading();
wx.showToast({
title: res.errMsg,
duration: 2000
})
}
)
},
//頁面相關事件處理函數--監聽用戶下拉動作
4.onPullDownRefresh: function () {
this.getProlist('正在刷新數據')
},
//頁面上拉觸底事件的處理函數
5.onReachBottom: function () {
var that = this
var p = that.data.p
if (that.data.hasMoreData) { //判斷hasMoreData是不是等1，如果不等于1，則不再運行調用getProlist函數，也就是說加載到些結束了。
that.setData({
p: Number(p) + 1,
})
this.getProlist('加載更多數據')
} else {
wx.showToast({
title: '沒有更多數據',
})
}
},
再來看下后臺的程序部分，還是比較簡單的,使用的是thinkphp框架：
public function newpro(){
$url_arr['status'] = 1;//查詢條件
$page= 6;//每次加載多個產品
$p = I('request.p',1);//第幾頁
$pagesize = ($p-1)*$page;//要加載從第幾個開始的產品
$list=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->limit($pagesize,$page)->select();//獲取查詢的數據
$total_count=$ModelGoods->where($url_arr)->order('order_id asc,goods_id desc')->count();//計算所有符合條件的產品總數
$page_count = ceil($total_count/$page);//所有的產品一共有多少頁，向上取整
$data['p'] = $p;
$data['total_count'] = $total_count;
$data['page_count'] = $page_count;
$data['data'] = $list;
$this->response($data,C('API_TYPE'));//將這些參數傳遞到微信小程序里
}

分享題目：如何實現在微信小程序下如何無刷新加載產品列表的內容
轉載來于：http://www.2m8n56k.cn/news12/244162.html

成都網站建設公司_創新互聯，為您提供網站維護、外貿網站建設、面包屑導航、網站營銷、建站公司、App開發

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯