uniapp小程序上拉加载更多
uni-app和微信小程序提供了下拉刷新的加载loading，但是上拉刷新没有提供loading加载动画
现在我们就自己写一个上拉加载更多的时候加载loading动画
loading-css3.gif
效果 ：
上代码：
1 <template>
2 <!-- //自己写的loading加载 -->
3 <view class="empty">
4 <text v-if="!opens" class="meiy-empty">没有更多数据了~</text>
5 <div v-else class="loading spin"></div>
6 </view>
7 </template>
8
9 <script>
10 export default {
11 props:{
12 open:{
13 type: Boolean,
14 default: false
15 }
16 },
17 data() {
18 return{
19 opens: false
20 }
21 },
22 watch:{
23 open:{
24 handler(newval,oldval){
25 this.opens = newval
26 },
27 immediate: true
28 }
29 }
30 }
31 </script>
32
33 <style lang="scss" scoped>
34 .spin {
35 -webkit-transform: rotate(360deg);
36 -webkit-animation: spin 2s linear infinite;
37 }
38
39 @-webkit-keyframes spin {
40 from {
41 -webkit-transform: rotate(0deg);
42 }
43
44 to {
45 -webkit-transform: rotate(360deg);
46 }
47 }
48
49 .spin {
50 transform: rotate(360deg);
51 animation: spin 2s linear infinite;
52 }
53
54 @keyframes spin {
55 from {
56 transform: rotate(0deg);
57 }
58
59 to {
60 transform: rotate(360deg);
61 }
62 }
63
64
65 /* 所有浏览器实现实现 */
66 .loading {
67 width: 32px;
68 height: 32px;
69 background: url('@/static/loading-css3.gif');
70 }
71
72 /* IE10+以及其他 */
73 .loading::after {
74 content: '';
75 width: 3px;
76 height: 3px;
77 margin: 14.5px 0 0 14.5px;
78 border-radius: 100%;
79 /* 圆角 */
80 position: absolute;
81 }
82
83 .empty {
84 display: flex;
85 justify-content: center;
86 .meiy-empty {
87 font-size: 28rpx;
88 color: #C0C0C0;
89 text-align: center;
90 margin: 30rpx;
91 }
92 }
93 </style>
使用： 自定义组件的引用和注册，我这点就不写了， 就穿一个参数open 为true和fasle就行
