list.vue
5.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<template>
<view>
<view class="lz-status_bar" :style="{ height: menuButtonInfo + 'px' }">
<view class="lz-top_view"></view>
</view>
<!--#ifdef MP-WEIXIN-->
<view class="index-head">
<view class="index-head-top">
<view class="index-head-m">巡检路线</view>
</view>
</view>
<!--#endif-->
<mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
:up="upOption">
<view class="daochu-box">
<view class="shenpi-list" v-for="(item,index) in dataList" :key="index">
<view class="shenpi-flex" @tap="goto_detail(item)">
<view>{{item.route_name}}</view>
<view class="shenpi-about">巡检周期：{{item.sign}}</view>
</view>
</view>
</view>
</mescroll-body>
</view>
</template>
<script>
import {mapState} from 'vuex';
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
mixins: [MescrollMixin], // 使用mixin
data() {
return {
dataList: [],
mescroll: null, //mescroll实例对象 (此行可删,mixins已默认)
// 下拉刷新的常用配置
downOption: {
use: true, // 是否启用下拉刷新; 默认true
auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
},
// 上拉加载的常用配置
upOption: {
use: true, // 是否启用上拉加载; 默认true
auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
page: {
num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
size: 20 // 每页数据的数量,默认10
},
noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: {
tip: '暂无相关数据'
}
},
}
},
onShow() {
if (this.userInfo.token == undefined) {
this.loginOut();
} else {
this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据
this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
}
},
computed: {
...mapState(['userInfo',"menuButtonInfo"]),
},
methods: {
loginOut() {
this.$lib.$store.commit('clearUserInfo')
// this.$lib.$store.commit('setUserInfo','')
uni.reLaunch({
url: '/pages/login/index'
})
},
/*上拉加载的回调*/
async upCallback(page, item) {
let pageNum = page.num; // 页码, 默认从1开始
let pageSize = page.size; // 页长, 默认每页10条
let res = await this.$lib.$http.post({
url: this.$lib.$urlMap.route,
data: {
page: pageNum,
limit: pageSize
},
needLogin: true
})
if (res.code == 1) {
// console.log(res)
// 接口返回的当前页数据列表 (数组)
let curPageData = res.data.data;
// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
let curPageLen = curPageData.length;
// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
// let totalPage =Math.ceil(totalSize/pageSize);
// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
let totalSize = res.data.length;
// 接口返回的是否有下一页 (true/false)
// let hasNext = data.xxx;
this.mescroll.endBySize(curPageLen, totalSize);
//设置列表数据
if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
this.dataList = this.dataList.concat(curPageData); //追加新数据
} else {
this.mescroll.endErr()
}
},
goto_detail(item) {
uni.navigateTo({
url: '/pages/xunjian/list_xjd?id=' + item.id
})
}
},
}
</script>
<style>
page {
background: #f5f5f5;
}
.daochu-box {
font-size: 16px;
padding-top: 14px;
}
.shenpi-list {
padding: 18px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border-radius: 5px;
box-shadow: 1px 2px 4px rgb(2 2 2 / 5%);
width: 84%;
margin: 0 auto;
margin-bottom: 14px;
}
.shenpi-flex {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 16px;
flex: 1;
}
.shenpi-about {
color: #9b9b9c;
font-size: 14px;
margin-top: 5px;
}
</style>