1.页面排版
<template>
<view>
<view class="body">
<view v-for="(item,index) in list" :key="index">
<view class="card">
<view class="title">
<text>燃气编号:{{ item.gas_number }}</text>
<text class="orgen">{{ item.default }}</text>
</view>
<view class="main">
<text>{{ item.rela_name }}<text class="padding-left">{{ item.phone }}</text></text>
<text>地址:{{ item.address }}</text>
</view>
</view>
</view>
<view v-if="list.length == 0">
<emptyPage title="暂无绑定记录"></emptyPage>
</view>
</view>
</view>
</template>
2.分页加载逻辑模板
<script>
import {
toLogin
} from '@/libs/login.js';
import {
userBindGasList
} from '@/api/user.js';
import emptyPage from '@/components/emptyPage.vue';
export default {
components: {
emptyPage
},
data() {
return {
list: [],
page: 1,
limit: 10,
loading:true,
}
},
onLoad(options) {
this.getList(true);
},
onShow(){
if (this.$store.getters.isLogin) {
this.getList();
} else {
toLogin();
}
},
methods: {
getList(isRefresh){
if(isRefresh){
this.loading=true;
this.page = 1;
this.list = [];
}
if(!this.loading){
return false;
}
this.loading = true;
let data = {
page:this.page,
limit:this.limit,
}
userBindGasList(data)
.then(res => {
this.loading = false;
this.loaded = res.data.list.length < this.limit;
this.list.push.apply(this.list, res.data.list);
this.page = this.page + 1;
})
.catch(err => {
this.$util.Tips({
title: err
})
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
this.getList();
},
}
}
</script>
3. 页面样式
<style lang="scss">
.body {
padding: 30rpx 30rpx;
margin-bottom: 150rpx;
.unbind {
display: flex;
justify-content: space-between;
color: #777777;
padding: 0 30rpx 30rpx 30rpx;
.orgen {
color: #feae35;
}
}
.card {
background: #fff;
padding: 30rpx 30rpx;
color: #373945;
border-radius: 20rpx;
margin-bottom: 30rpx;
.title {
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid #dcdcdc;
padding-bottom: 20rpx;
.orgen {
color: #fea716;
}
}
.main {
display: flex;
flex-direction: column;
padding: 30rpx 0 0rpx 0;
line-height: 50rpx;
.padding-left {
padding-left: 40rpx;
}
}
}
}
</style>