武进网站建设价格,wordpress。短视频主题,学校网页制作模板,电商网站图片处理实现一个两列的瀑布流布局#xff0c;支持无限滚动 **思路#xff1a;**利用flex布局#xff0c;将列表分为左右两侧#xff0c;因为这种方式存在一个弊端#xff0c;就是当有一侧的高度越来越高的时候#xff0c;滑到底部的时候就会出现一个很明显的高度差#xff0c;为…实现一个两列的瀑布流布局支持无限滚动 **思路**利用flex布局将列表分为左右两侧因为这种方式存在一个弊端就是当有一侧的高度越来越高的时候滑到底部的时候就会出现一个很明显的高度差为了修复这个漏洞写一个算法计算每一页两侧列表的高度差举个例子当左侧高度比右侧高很多的时候则把下一页列表的第一个数据放在右侧补齐高度反之同理如果数据是无限滚动加载不会滑动到底部的话则可以不做处理
代码如下
templatediv classprod-listvan-list v-model:loadingloading :finishedfinish finishedtext没有更多了 loadloaddiv classleftdiv idleft-boxproductCard v-forproductItem in productListLeft :keyproductItem.id :itemInfoproductItem :itemTypeitemType/productCard/div/divdiv classrightdiv idright-boxproductCard v-forproductItem in productListRight :keyproductItem.id :itemInfoproductItem :itemTypeitemType/productCard/div/div/van-list/div
/templatescript
import ref from vue
import { getAllstores,getAllGoods, getAllsuggest,getAllIntroduction } from /api/modules/goods.js
import productCard from ./productcard.vueexport default {props: {itemType: String,activeClass: Number},components: {productCard,Annotate},setup(props) {const page ref(0)const size ref(8)const loading ref(false)const finish ref(false)const apiMap { getAllsuggest, getAllGoods, getAllstores, getAllIntroduction }const productList ref([])const productListLeft ref([])const productListRight ref([])const leftHeightNum ref(0)const rightHeightNum ref(0)const getContentHeight () {const leftBox document.querySelector(#left-box)const rightBox document.querySelector(#right-box)leftHeightNum.value leftBox ? leftBox.offsetHeight : 0rightHeightNum.value rightBox ? rightBox.offsetHeight : 0}const getorderList (list, leftList, rightList, flag) {for(let i 0; i list.length; i) {if (flag left) {if (i % 2 0 ) {rightList.push(list[i])} else {leftList.push(list[i])} } else {if (i % 2 0) {leftList.push(list[i])else {rightList.push(list[i])}}}}const getProduct (path getAllSuggest, className 0, index) loading.value trueconst targetApi apiMap[path]const params {page: page .value.size: size.value,body: path !getAllSuggest || path ! getAllIntroduction? {goodsTypeID: className.} : null}targetApi(params).then(async res {if (res.code 20000) {if (page.value 0) {productList.value []productListLeft.value []productListRight.value []}let leftList []let rightList []productList.value res.data.listfinish.value page.value Number(res.data.totalPages)if (productList.value.length 0) {await getContentHeight()if (page.value 1) {getorderList(productList.value, leftList, rightList, right)} else {if (leftHeightNum.value rightHeightNum.value leftHeightNum.value - rightHeightNum.value 100) {let firstItem productList.value.shift()rightList.push(firstItem)getorderList(productList.value, leftList, rightListleft) } } else if ( leftHeightNum.value rightHeightNum.value rightHeightNum.value - leftHeightNum.value 100) {let firstItem productList.value.shift()leftList.push(firstItem)getorderList(productList.value, leftList, rightList,right)} else {getorderList(productList.value, leftList,rightList,right)}}productListLeft.value [...productListLeft.value,...leftList]productListRight.value [...productListRight.value, ...rightList]loading.value false} else {loading.valuefalse;finish.value true}}).catch(err {loading.valuefalsefinish.value true})}const onLoad () {page.value 1getProduct(props.itemTypeprops.activeClass)}// 重置数据const resetData () {page.value 1productList.value []productListLeft.value []productListRight.value []loading.value falsefinish.value false}return {productList,loadingfinish,onLoad,page,getProduct,productListLeft,productListRight,resetData,}
/scriptstyle langscssscoped
.prod-list {.container {width: 100%;display: flex;.left {flex: 1;margin-right: 8px;}.right {flex: 1;}}.van-list {:deep(.van-list finished-text) {width: 100%;}:deep(.van-list placeholder) {width: 100%;}}
}
/style
