11<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