1
1
<template >
2
- <view class =" wrap" >
3
- <u-waterfall v-model =" flowList" ref =" uWaterfall" >
4
- <template v-slot :left =" { leftList } " >
5
- <view class =" demo-warter" v-for =" (item, index) in leftList" :key =" index" >
6
- <view class =" " @tap =" click1(item)" >
7
- <!-- 警告:微信小程序不支持嵌入lazyload组件,请自行如下使用image标签 -->
8
- <!-- #ifndef MP-WEIXIN -->
9
- <u-lazy-load threshold =" -450" border-radius =" 10" :image =" item.image" :index =" index" ></u-lazy-load >
10
- <!-- #endif -->
11
- <!-- #ifdef MP-WEIXIN -->
12
- <view class =" demo-img-wrap" ><image class =" demo-image" :src =" item.image" mode =" widthFix" ></image ></view >
13
- <!-- #endif -->
14
- <view class =" demo-title" >{{ item.title }}</view >
15
- <view class =" demo-price" >{{ item.price }}元</view >
16
- <view class =" demo-tag" >
17
- <view class =" demo-tag-owner" >自营</view >
18
- <view class =" demo-tag-text" >放心购</view >
19
- </view >
20
- <view class =" demo-shop" >{{ item.shop }}</view >
21
- <!-- 微信小程序无效,因为它不支持在template中引入组件 -->
22
- <view class =" u-close" >
23
- <u-icon name =" close-circle-fill" color =" #fa3534" size =" 34" @click =" remove(item.id)" ></u-icon >
24
- </view >
25
- </view >
26
- </view >
27
- </template >
28
- <template v-slot :right =" { rightList } " >
29
- <view class =" demo-warter" v-for =" (item, index) in rightList" :key =" index" >
30
- <!-- #ifndef MP-WEIXIN -->
31
- <u-lazy-load threshold =" -450" border-radius =" 10" :image =" item.image" :index =" index" ></u-lazy-load >
32
- <!-- #endif -->
33
- <!-- #ifdef MP-WEIXIN -->
34
- <view class =" demo-img-wrap" ><image class =" demo-image" :src =" item.image" mode =" widthFix" ></image ></view >
35
- <!-- #endif -->
36
- <view class =" demo-title" >{{ item.title }}</view >
37
- <view class =" demo-price" >{{ item.price }}元</view >
38
- <view class =" demo-tag" >
39
- <view class =" demo-tag-owner" >自营</view >
40
- <view class =" demo-tag-text" >放心购</view >
41
- </view >
42
- <view class =" demo-shop" >{{ item.shop }}</view >
43
- <!-- 微信小程序无效,因为它不支持在template中引入组件 -->
44
- <view class =" u-close" >
45
- <u-icon name =" close-circle-fill" color =" #fa3534" size =" 34" @click =" remove(item.id)" ></u-icon >
46
- </view >
47
- </view >
48
- </template >
49
- </u-waterfall >
50
- <u-loadmore bg-color =" rgb(240, 240, 240)" :status =" loadStatus" @loadmore =" addRandomData" ></u-loadmore >
51
- </view >
52
- </template >
53
-
54
- <script >
55
- export default {
56
- data () {
57
- return {
58
- loadStatus: ' loadmore' ,
59
- flowList: [],
60
- list: [
61
- {
62
- price: 35 ,
63
- title: ' 北国风光,千里冰封,万里雪飘' ,
64
- shop: ' 李白杜甫白居易旗舰店' ,
65
- image: ' http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg'
66
- },
67
- {
68
- price: 75 ,
69
- title: ' 望长城内外,惟余莽莽' ,
70
- shop: ' 李白杜甫白居易旗舰店' ,
71
- image: ' http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23325_s.jpg'
72
- },
73
- {
74
- price: 385 ,
75
- title: ' 大河上下,顿失滔滔' ,
76
- shop: ' 李白杜甫白居易旗舰店' ,
77
- image: ' http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
78
- },
79
- {
80
- price: 784 ,
81
- title: ' 欲与天公试比高' ,
82
- shop: ' 李白杜甫白居易旗舰店' ,
83
- image: ' http://pic2.sc.chinaz.com/Files/pic/pic9/202002/zzpic23369_s.jpg'
84
- },
85
- {
86
- price: 7891 ,
87
- title: ' 须晴日,看红装素裹,分外妖娆' ,
88
- shop: ' 李白杜甫白居易旗舰店' ,
89
- image: ' http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2130_s.jpg'
90
- },
91
- {
92
- price: 2341 ,
93
- shop: ' 李白杜甫白居易旗舰店' ,
94
- title: ' 江山如此多娇,引无数英雄竞折腰' ,
95
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23346_s.jpg'
96
- },
97
- {
98
- price: 661 ,
99
- shop: ' 李白杜甫白居易旗舰店' ,
100
- title: ' 惜秦皇汉武,略输文采' ,
101
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23344_s.jpg'
102
- },
103
- {
104
- price: 1654 ,
105
- title: ' 唐宗宋祖,稍逊风骚' ,
106
- shop: ' 李白杜甫白居易旗舰店' ,
107
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
108
- },
109
- {
110
- price: 1678 ,
111
- title: ' 一代天骄,成吉思汗' ,
112
- shop: ' 李白杜甫白居易旗舰店' ,
113
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
114
- },
115
- {
116
- price: 924 ,
117
- title: ' 只识弯弓射大雕' ,
118
- shop: ' 李白杜甫白居易旗舰店' ,
119
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
120
- },
121
- {
122
- price: 8243 ,
123
- title: ' 俱往矣,数风流人物,还看今朝' ,
124
- shop: ' 李白杜甫白居易旗舰店' ,
125
- image: ' http://pic1.sc.chinaz.com/Files/pic/pic9/202002/zzpic23343_s.jpg'
126
- }
127
- ]
128
- };
129
- },
130
- onLoad () {
131
- this .addRandomData ();
132
- },
133
- onReachBottom () {
134
- this .loadStatus = ' loading' ;
135
- // 模拟数据加载
136
- setTimeout (() => {
137
- this .addRandomData ();
138
- this .loadStatus = ' loadmore' ;
139
- }, 1000 );
140
- },
141
- methods: {
142
- addRandomData () {
143
- for (let i = 0 ; i < 10 ; i++ ) {
144
- let index = this .$u .random (0 , this .list .length - 1 );
145
- // 先转成字符串再转成对象,避免数组对象引用导致数据混乱
146
- let item = JSON .parse (JSON .stringify (this .list [index]));
147
- item .id = this .$u .guid ();
148
- this .flowList .push (item);
149
- }
150
- },
151
- remove (id ) {
152
- this .$refs .uWaterfall .remove (id);
153
- },
154
- clear () {
155
- this .$refs .uWaterfall .clear ();
156
- },
157
- click1 (item ){
158
- console .log (item);
159
- }
160
- }
161
- };
162
- </script >
163
-
164
- <style >
165
- /* page不能写带scope的style标签中,否则无效 */
166
- page {
167
- background-color : rgb (240 , 240 , 240 );
168
- }
169
- </style >
170
-
171
- <style lang="scss" scoped>
172
- .demo-warter {
173
- border-radius : 8px ;
174
- margin : 5px ;
175
- background-color : #ffffff ;
176
- padding : 8px ;
177
- position : relative ;
178
- }
179
-
180
- .u-close {
181
- position : absolute ;
182
- top : 32 rpx;
183
- right : 32 rpx;
184
- }
185
-
186
- .demo-img-wrap {
187
- }
188
-
189
- .demo-image {
190
- width : 100% ;
191
- border-radius : 4px ;
192
- }
193
-
194
- .demo-title {
195
- font-size : 30 rpx;
196
- margin-top : 5px ;
197
- color : $u-main-color ;
198
- }
199
-
200
- .demo-tag {
201
- display : flex ;
202
- margin-top : 5px ;
203
- }
204
-
205
- .demo-tag-owner {
206
- background-color : $u-type-error ;
207
- color : #ffffff ;
208
- display : flex ;
209
- align-items : center ;
210
- padding : 4 rpx 14 rpx;
211
- border-radius : 50 rpx;
212
- font-size : 20 rpx;
213
- line-height : 1 ;
214
- }
215
-
216
- .demo-tag-text {
217
- border : 1px solid $u-type-primary ;
218
- color : $u-type-primary ;
219
- margin-left : 10px ;
220
- border-radius : 50 rpx;
221
- line-height : 1 ;
222
- padding : 4 rpx 14 rpx;
223
- display : flex ;
224
- align-items : center ;
225
- border-radius : 50 rpx;
226
- font-size : 20 rpx;
227
- }
228
-
229
- .demo-price {
230
- font-size : 30 rpx;
231
- color : $u-type-error ;
232
- margin-top : 5px ;
233
- }
234
-
235
- .demo-shop {
236
- font-size : 22 rpx;
237
- color : $u-tips-color ;
238
- margin-top : 5px ;
239
- }
240
- </style >
2
+ <view ></view >
3
+ </template >
0 commit comments