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
| <!--
| * @Author: 小明丶
| * @Date: 2019-08-30 10:21:30
| * @LastEditors: 小明丶
| * @LastEditTime: 2019-08-30 10:21:30
| * @Description:
| -->
| /*
| * @Author: hzq
| * @Date: 2018-07-24 15:22:44
| * @Last Modified by: CL
| * @Last Modified time: 2019-01-29 16:49:46
| * @说明: 上拉加载、下拉刷新组件,现用于客户列表、订单列表、客户经理列表
| * 参数说明 ： defheight 默认高度，距离底部的高度
| * @使用说明: 以下为使用方法
| <f-upload :querys="querys" apiUrl="clientList" @returnData="returnData">
| //以下代码为你的列表html
| <ul>
| <li>你的列表数据</li>
| </ul>
| //以上代码为你的列表html
| </f-upload>
| */
|
| <template>
| <div class="f-upload">
| <Scroller ref="scroller"
| lock-x
| :height="defHeight" use-pullup :pullup-config="pullUpConfig" @on-pullup-loading="upLoadData">
| <div>
| <slot></slot>
| </div>
| <divider v-if="showNone">我是有底线的</divider>
| </Scroller>
| </div>
| </template>
|
| <script>
| import { Scroller, Divider } from 'vux';
| export default {
| name: 'f-upload',
| components: { Scroller, Divider},
| props: {
| apiUrl: {
| //数据请求接口地址,必填
| type: String,
| required: true
| },
| querys: {
| //数据请求接口参数,选填
| type: Object
| },
| pageSize: {
| // 查询数量,选填
| type: Number,
| default: 10
| },
| lastId: {
| // 列表最后一个数据的id,用于上拉加载查询,必填
| required: true,
| default: '001'
| },
| disablePullup: {
| // 是否禁用上拉
| default: 1
| },
| loadData: {
| // 是否在加载数据
| type: Boolean,
| default: false
| },
| defHeight: {
| // 是否在加载数据
| type: String,
| default: "-150"
| },
| showNone: {
| type: Boolean,
| }
| },
| data() {
| return {
| //上拉加载 组件参数
| pullUpConfig: {
| height: 50,
| downContent: '释放加载',
| upContent: '上拉加载',
| loadingContent: '正在加载...'
| },
| //是否正在访问接口
| isLoadData: false,
| };
| },
| watch: {
| disablePullup(val) {
| if (val.length) {
| if (val.length % this.pageSize) {
| this.$refs.scroller.disablePullup();
| } else {
| this.$refs.scroller.enablePullup();
| }
| } else {
| this.$refs.scroller.disablePullup();
| }
| },
| loadData(val) {
| if (val) {
| this.$refs.scroller.reset({ top: 0 });
| }
| },
| },
|
| methods: {
| //上拉加载数据
| upLoadData() {
| // 1.判断是否已经在加载数据了
| if (this.isLoadData) return;
| this.isLoadData = true;
| // 2.收集【上拉刷新】操作所需的参数
| let obj = {
| ...this.querys,
| orderId: this.lastId
| };
| // 3.访问接口
| this.$api[this.apiUrl](obj).then(res => {
| if (res.body.length !== this.pageSize) {
| // 禁用上拉, 判断页面是否加载完成
| this.$refs.scroller.disablePullup();
| }
| // 将列表数据返回给父组件
| this.$emit('returnData', res.body);
| setTimeout(() => {
| this.$nextTick(() => {
| this.isLoadData = false;
| // 下拉加载操作完成
| this.$refs.scroller.donePullup();
| // this.$refs.scroller.reset({top: 0});
| });
| }, 200);
| });
| }
| },
| created() {
| this.isLoadData = false;
| }
| };
| </script>
|
| <style lang="less" scoped>
| .f-upload {
| & /deep/ .xs-plugin-pullup-container {
| line-height: 50px;
| }
| }
| </style>
|
|
