Langage de développement : applet uniapp
Prémisse : Le backend effectue le traitement de pagination et renvoie toutes les données. Une fois que le frontend a obtenu les données, il transmet deux paramètres au backend, représentant la page à obtenir et le nombre de données affichées sur chaque page.
1. Obtenez des données back-end
data(){
return{
// 定义初始数组
transList:[],
// 定义初始加载第一页数据
page: 1
}
}
// 进入页面时调用加载后端数据的方法
onLoad() {
this.TransQueryData()
},
methods: {
// 调接口的方法
TransQueryData() {
let obj = {
"M": this.page, // 页数
"N": "20", // 每页显示条数
};
getTransQueryData(obj).then(res => {
uni.hideLoading()
if (res.data.HEAD.CODE == '000') {
// 后端获取的数据拼接到初始数组中
this.transList = this.transList.concat(res.data.BODY.orderList)
}
})
},
}
2. Données de rendu de page
<view class="con_list" v-for="(item,index) in transList" :key="index" @click="goToTransDetails(index)">
<view class="list_top">
<view class="top_txt">{
{item.txnTypeEnum}}</view>
<view class="top_amount">{
{(item.txnAmount / 100).toFixed(2)}}</view>
</view>
<view class="list_bottom">
<view class="bot_time">{
{(item.createTime).replace(/^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/, '$1-$2-$3 $4:$5')}}</view>
<view class="bot_result">{
{txnTxt}}</view>
</view>
</view>
3. Traitement de la pagination
// 页面上拉触底事件的处理函数
onReachBottom() {
if(this.transList.length > 0){
uni.showLoading({
mask:true
})
// 每次上拉数据，触底时，都会使页数+1，依次获取第二页、第三页的数据
this.page += 1
this.TransQueryData();
}
},