vue3 uniapp封装一个瀑布流组件

2. 新增组件m-waterfall   这样就可以在页面直接使用 不用在引入了
3. <template>
4.         <view class="m-waterfall">
5.                 <view id="m-left-column" class="m-column">
6.                         <slot name="left" :leftList="leftList"></slot>
7.                 </view>
8.                 <view id="m-right-column" class="m-column">
9.                         <slot name="right" :rightList="rightList"></slot>
10.                 </view>
12.         </view>
13. </template>
15. <script setup>
16. /**
17. * @param value  瀑布流数据
18. * @param addTime 插入数据的时间间隔
19. * @param keyIdData / id值，用于清除某一条数据时，根据此idKey名称找到并移除
20. */
22. import {
23.                 computed,
24.                 defineProps,
25.                 toRefs
26.         } from "vue"
28.        
29.         const props=defineProps({
30.                 // 瀑布流数据
31.                 value: {
32.                          required: true,
33.                         type: Array,
34.                         default: ()=>[]
35.                 },
36.                 // 每次向结构插入数据的时间间隔，间隔越长，越能保证两列高度相近，但是对用户体验越不好
37.                 addTime: {
38.                         type: [Number, String],
39.                         default: 200
40.                 },
41.                 // id值，用于清除某一条数据时，根据此idKey名称找到并移除
42.                 keyIdData: {
43.                         type: String,
44.                         default: 'id'
45.                 }
46.         })
47.         const {
48.                 value,
49.                 addTime,
50.                 keyIdData
51.         } = toRefs(props)
52.         const leftList = ref([])
53.         const rightList = ref([])
54.         const tempList = ref([])
55.         const copyFlowList= computed (()=> {
56.                 return cloneData(value.value);
57.         })
59.        
60.         watch(()=>value.value,(nVal,oVal)=>{
61.                 let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
62.                
63.                 tempList.value = tempList.value.concat(cloneData(nVal.slice(startIndex)));
64.                 splitData();
65.        
66.         })
67.         onMounted(()=>{
68.        
69.                 tempList.value = cloneData(copyFlowList.value);
70.                 setTimeout(()=>{
71.                         splitData();
72.                 },200)
73.         })
74.        
75. const instance = getCurrentInstance()
76.         const getysHeigth=(classd)=>{
77.                 return new Promise((resolve, reject) => {
78.                         uni.createSelectorQuery().in(instance)
79.                             .select(classd)
80.                             .boundingClientRect(data => {
81.                                 if (data) {
82.                                     resolve(data);
83.                                 } else {
84.                                     reject(new Error('获取节点信息失败'));
85.                                 }
86.                             })
87.                             .exec();
88.                     });
89.         }
90.         const splitData = async () => {
91.        
92.                 if (tempList.value.length==0) return;
93.                 let leftRect = await getysHeigth('#m-left-column');
94.                 let rightRect = await getysHeigth('#m-right-column');
95.                 // 如果左边小于或等于右边，就添加到左边，否则添加到右边
96.                 let item =tempList.value[0];
97.                 // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
98.                 // 数组可能变成[]，导致此item值可能为undefined
99.                 if (!item) return;
100.                 if (leftRect.height < rightRect.height) {
101.                         leftList.value.push(item);
102.                 } else if (leftRect.height > rightRect.height) {
103.                         rightList.value.push(item);
104.                 } else {
105.                         // 这里是为了保证第一和第二张添加时，左右都能有内容
106.                         // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
107.                         if (leftList.value.length <= rightList.value.length) {
108.                                 leftList.value.push(item);
109.                         } else {
110.                                 rightList.value.push(item);
111.                         }
112.                 }
113.                 // 移除临时列表的第一项
114.                 tempList.value.splice(0, 1);
115.                 // 如果临时数组还有数据，继续循环
116.                 if (tempList.value.length) {
117.                         setTimeout(() => {
118.                                 splitData();
119.                         }, addTime)
120.                 }
122.         }
123.         // 复制而不是引用对象和数组
124.         const cloneData=(data)=>{
125.                 if(data){
126.                         return JSON.parse(JSON.stringify(data));
127.                 }else{
128.                         return [];
129.                 }
130.                
131.         }
132.        
133. </script>
135. <style lang="scss" scoped>
137. .m-waterfall {
138.         display: flex;
139.         flex-direction: row;
140.         align-items: flex-start;
141. }
143. .m-column {
144.         display: flex;
145.         flex: 1;
146.         flex-direction: column;
147.         height: auto;
148. }
150. .m-image {
151.         width: 100%;
153. }
154. </style>

复制代码

组件利用

1. <m-waterfall :value="product">
2.                                 <!-- 左边数据 -->
3.                                 <template v-slot:left="{leftList}">
4.                                         <view @click="addDta" class="prodecutitem" v-for="(item,index) in leftList" :key="index">
5.                                                 <view style="width: 100%;">
6.                                                         <m-imgage :url="item.image"></m-imgage>
7.                                                 </view>
8.                                                 <view class="title">{{item.title}}</view>
9.                                                 <view class="desc">{{item.title}}</view>
10.                                         </view>
11.                                 </template>
12.                                 <!-- 右边数据 -->
13.                                 <template v-slot:right="{rightList}">
14.                                         <view class="prodecutitem" v-for="(item,index) in rightList" :key="index">
15.                                                 <view>
16.                                                         <m-imgage :url="item.image"></m-imgage>
17.                                                 </view>
18.                                                 <view class="title">{{item.title}}</view>
19.                                                 <view class="desc">{{item.title}}</view>
20.                                         </view>
21.                                 </template>
22.                         </m-waterfal>
24. 数据
25.         const product=ref([
26.                 {
27.                         title:'水果蔬菜1',
28.                         image:imgSrc.value
29.                 },
30.                 {
31.                         title:'水果蔬菜2',
32.                         image:"https://img2.baidu.com/it/u=3893165480,918722033&fm=253&fmt=auto&app=120&f=JPEG?w=729&h=1215"
33.                 },
34.                 {
35.                         title:'水果蔬菜3',
36.                         image:imgSrc.value
37.                 },
38.                 {
39.                         title:'水果蔬菜1',
40.                         image:imgSrc.value
41.                 },
42.                 {
43.                         title:'水果蔬菜3',
44.                         image:imgSrc.value
45.                 }
46.         ])

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。