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
| <!-- z-paging自定义的下拉刷新view -->
| <template>
| <view class="refresher-container">
| <!-- 这里的图片请换成自己项目的图片 -->
| <image class="refresher-image" mode="aspectFit" src="@/static/refresher_loading.gif"></image>
| <text class="refresher-text">{{statusText}}</text>
| </view>
| </template>
|
| <script>
| export default {
| data() {
| return {
|
| };
| },
| computed: {
| statusText() {
| // 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue);
| // 获取到当前语言之后，就可以自定义不同语言下的展示内容了
| const statusTextMap = {
| 'default': '哎呀，用点力继续下拉！',
| 'release-to-refresh': '拉疼我啦，松手刷新~~',
| 'refreshing': '正在努力刷新中...',
| 'complete': '刷新成功啦~'
| };
| return statusTextMap[this.status];
| }
| },
| props: {
| status: {
| type: String,
| default: function() {
| return 0;
| },
| },
| }
| }
| </script>
|
| <style scoped>
| .refresher-container {
| /* #ifndef APP-NVUE */
| display: flex;
| /* #endif */
| height: 150rpx;
| flex-direction: column;
| align-items: center;
| justify-content: center;
| }
|
| .refresher-image {
| margin-top: 10rpx;
| height: 45px;
| width: 45px;
| }
|
| .refresher-text {
| margin-top: 10rpx;
| font-size: 24rpx;
| color: #666666;
| }
| </style>
|
|
