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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
| <!-- z-paging -->
| <!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
| <!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
| <!-- 反馈QQ群：790460711 -->
|
| <!-- 空数据占位view，此组件支持easycom规范，可以在项目中直接引用 -->
| <template>
| <view :class="{'zp-container':true,'zp-container-fixed':emptyViewFixed}" :style="[finalEmptyViewStyle]" @click="emptyViewClick">
| <view class="zp-main">
| <image v-if="!emptyViewImg.length" :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" :style="[emptyViewImgStyle]" :src="emptyImg" />
| <image v-else :class="{'zp-main-image-rpx':unit==='rpx','zp-main-image-px':unit==='px'}" mode="aspectFit" :style="[emptyViewImgStyle]" :src="emptyViewImg" />
| <text class="zp-main-title" :class="{'zp-main-title-rpx':unit==='rpx','zp-main-title-px':unit==='px'}" :style="[emptyViewTitleStyle]">{{emptyViewText}}</text>
| <text v-if="showEmptyViewReload" :class="{'zp-main-error-btn':true,'zp-main-error-btn-rpx':unit==='rpx','zp-main-error-btn-px':unit==='px'}" :style="[emptyViewReloadStyle]" @click.stop="reloadClick">{{emptyViewReloadText}}</text>
| </view>
| </view>
| </template>
|
| <script>
| import zStatic from '../z-paging/js/z-paging-static'
| export default {
| name: "z-paging-empty-view",
| data() {
| return {
|
| };
| },
| props: {
| // 空数据描述文字
| emptyViewText: {
| type: String,
| default: '没有数据哦~'
| },
| // 空数据图片
| emptyViewImg: {
| type: String,
| default: ''
| },
| // 是否显示空数据图重新加载按钮
| showEmptyViewReload: {
| type: Boolean,
| default: false
| },
| // 空数据点击重新加载文字
| emptyViewReloadText: {
| type: String,
| default: '重新加载'
| },
| // 是否是加载失败
| isLoadFailed: {
| type: Boolean,
| default: false
| },
| // 空数据图样式
| emptyViewStyle: {
| type: Object,
| default: function() {
| return {}
| }
| },
| // 空数据图img样式
| emptyViewImgStyle: {
| type: Object,
| default: function() {
| return {}
| }
| },
| // 空数据图描述文字样式
| emptyViewTitleStyle: {
| type: Object,
| default: function() {
| return {}
| }
| },
| // 空数据图重新加载按钮样式
| emptyViewReloadStyle: {
| type: Object,
| default: function() {
| return {}
| }
| },
| // 空数据图z-index
| emptyViewZIndex: {
| type: Number,
| default: 9
| },
| // 空数据图片是否使用fixed布局并铺满z-paging
| emptyViewFixed: {
| type: Boolean,
| default: true
| },
| // 空数据图中布局的单位，默认为rpx
| unit: {
| type: String,
| default: 'rpx'
| }
| },
| computed: {
| emptyImg() {
| return this.isLoadFailed ? zStatic.base64Error : zStatic.base64Empty;
| },
| finalEmptyViewStyle(){
| this.emptyViewStyle['z-index'] = this.emptyViewZIndex;
| return this.emptyViewStyle;
| }
| },
| methods: {
| // 点击了reload按钮
| reloadClick() {
| this.$emit('reload');
| },
| // 点击了空数据view
| emptyViewClick() {
| this.$emit('viewClick');
| }
| }
| }
| </script>
|
| <style scoped>
| .zp-container{
| /* #ifndef APP-NVUE */
| display: flex;
| /* #endif */
| align-items: center;
| justify-content: center;
| }
| .zp-container-fixed {
| /* #ifndef APP-NVUE */
| position: absolute;
| top: 0;
| left: 0;
| width: 100%;
| height: 100%;
| /* #endif */
| /* #ifdef APP-NVUE */
| flex: 1;
| /* #endif */
| }
|
| .zp-main{
| /* #ifndef APP-NVUE */
| display: flex;
| /* #endif */
| flex-direction: column;
| align-items: center;
| padding: 50rpx 0rpx;
| }
|
| .zp-main-image-rpx {
| width: 240rpx;
| height: 240rpx;
| }
| .zp-main-image-px {
| width: 120px;
| height: 120px;
| }
|
| .zp-main-title {
| color: #aaaaaa;
| text-align: center;
| }
| .zp-main-title-rpx {
| font-size: 28rpx;
| margin-top: 10rpx;
| padding: 0rpx 20rpx;
| }
| .zp-main-title-px {
| font-size: 14px;
| margin-top: 5px;
| padding: 0px 10px;
| }
|
| .zp-main-error-btn {
| border: solid 1px #dddddd;
| color: #aaaaaa;
| }
| .zp-main-error-btn-rpx {
| font-size: 28rpx;
| padding: 8rpx 24rpx;
| border-radius: 6rpx;
| margin-top: 50rpx;
| }
| .zp-main-error-btn-px {
| font-size: 14px;
| padding: 4px 12px;
| border-radius: 3px;
| margin-top: 25px;
| }
| </style>
|
|
