資訊專欄INFORMATION COLUMN
摘要：導(dǎo)語需求是上拉加載數(shù)據(jù)，實際就是獲取分頁數(shù)據(jù)。后臺就是正常的請求分頁數(shù)據(jù)，小程序部分稍復(fù)雜些，查了一些資料完成的，但是資料的鏈接找不到了，不能放上以供參考了。小程序頁面涉及到數(shù)據(jù)循環(huán)，下面是簡單的實例的開發(fā)模式例如，提倡把渲染和邏輯分離。
導(dǎo)語
需求是上拉加載數(shù)據(jù)，實際就是獲取分頁數(shù)據(jù)。后臺就是正常的ajax請求分頁數(shù)據(jù)，小程序部分稍復(fù)雜些，查了一些資料完成的， 但是資料的鏈接找不到了，不能放上以供參考了。
小程序頁面涉及到數(shù)據(jù)循環(huán)，下面是簡單的實例
{{item.name}} {{item.age}}
MVVM 的開發(fā)模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態(tài)即可，然后再通過一種模板語法來描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。小程序JS部分
JS部分負(fù)責(zé)的是獲取數(shù)據(jù)，以及拼接數(shù)據(jù)
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
array: [],
page: 1,
isReachBottom: true // 是否上拉加載
},
// 獲取數(shù)據(jù)
getList: function () {
var that = this;
wx.request({
url: "https://xxx",
data: {
p: that.data.page
},
success: function (res) {
if (res.data.message == "success") {
// 獲取成功，數(shù)據(jù)追加
var list = [];
var count = res.data.data.length
for (var i = 0; i < count; i++) {
var data = {name: "", age: ""};
data.name = res.data.data[i].name;
data.age = res.data.data[i].age;
list.push(data);
}
Array.prototype.push.apply(that.data.array, list);
that.setData({
array: that.data.array
})
} else if (res.data.message == "finish") {
// 沒有數(shù)據(jù)，禁止再次上拉加載
that.setData({
isReachBottom: false
})
}
}
})
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
if (this.data.isReachBottom == true) {
this.setData({
page: this.data.page + 1
})
this.getList()
}
}
})
關(guān)于上拉觸底，還有這些特性
參考資料：小程序、列表渲染、注冊頁面。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/29994.html
摘要：最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁面，需要使用，詳見。參考文獻(xiàn)微信小程序開發(fā)者文檔 最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。 原文地址：mini programs 目...
摘要：最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。的使用微信小程序不支持原生頁面跳轉(zhuǎn)，包括和，若要跳轉(zhuǎn)小程序應(yīng)用內(nèi)頁面，需要使用，詳見。參考文獻(xiàn)微信小程序開發(fā)者文檔 最近開始接觸了小程序的開發(fā)，由于時間問題，文檔閱讀的并不完備，也踩了很多坑。不得不說，微信的野心真是越來越大了，但是它超高的流量注定了它有這個資本。 原文地址：mini programs 目...
摘要：資源開發(fā)文檔是一套完全免費的微信小程序開發(fā)框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監(jiān)聽數(shù)據(jù)變化開發(fā)如何在微信小程序的頁面間傳遞數(shù)據(jù)需要時可以快速過一遍。微信小程序回調(diào)，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當(dāng)是做個總結(jié)，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...
閱讀 2992·2023-04-26 01:32
閱讀 1589·2021-09-13 10:37
閱讀 2333·2019-08-30 15:56
閱讀 1722·2019-08-30 14:00
閱讀 3105·2019-08-30 12:44
閱讀 1996·2019-08-26 12:20
閱讀 1105·2019-08-23 16:29
閱讀 3275·2019-08-23 14:44
