uniapp、taro 微信小程序 瀑布流
项目场景例如:项目场景:示例:商品货架、文章、视频等组件效果图实现过程提示:大致思路:布局分开左右两边布局,分成二条线直线,互不相关。利用uni.createSelectorQuery() 实例获取节点每次获取左右两边的数据的高度进行判断之后再push 数据进去渲染代码如下<template><view class="dislocat_content"><view i
·
项目场景
例如:项目场景:示例:商品货架、文章、视频等组件
效果图
实现过程
提示:大致思路:
- 布局分开左右两边布局,分成二条线直线,互不相关。
- 利用uni.createSelectorQuery() 实例获取节点
- 每次获取左右两边的数据的高度进行判断之后再push 数据进去渲染
代码如下
<template>
<view class="dislocat_content">
<view id="dis_left" class="dislocat_content_left">
<view class="border-outside" v-for="(item, index) in leftList" :key="index">
<image class="img_icon" :src="item" mode="widthFix"></image>
</view>
</view>
<view id="dis_right" class="dislocat_content_right">
<view class="border-outside" v-for="(item, index) in rightList" :key="index">
<image class="img_icon" :src="item" mode="widthFix"></image>
</view>
</view>
</view>
</template>
<script>
let query, leftHeight = 0, rightHeight = 0;
export default {
data() {
return {
totalList: [
"../../static/dis_icon.jpg",
"../../static/dis_icon2.jpeg",
"../../static/dis_icon3.jpeg",
"../../static/dis_icon4.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon6.jpg",
"../../static/dis_icon.jpg",
"../../static/dis_icon7.jpg",
"../../static/dis_icon8.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon2.jpeg",
"../../static/dis_icon3.jpeg",
"../../static/dis_icon4.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon6.jpg",
"../../static/dis_icon.jpg",
"../../static/dis_icon2.jpeg",
"../../static/dis_icon3.jpeg",
"../../static/dis_icon4.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon2.jpeg",
"../../static/dis_icon.jpg",
"../../static/dis_icon7.jpg",
"../../static/dis_icon8.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon2.jpeg",
"../../static/dis_icon3.jpeg",
"../../static/dis_icon4.jpg",
"../../static/dis_icon5.jpg",
"../../static/dis_icon6.jpg"
], // 总数居
leftList: [], // 左边数据
rightList: [], // 右边数据
}
},
mounted() {
this.getDataDom()
},
methods: {
async getDataDom() {
let data = this.$data;
query = uni.createSelectorQuery().in(this);
for (let item in data.totalList) {
// 判断两边的高度
leftHeight <= rightHeight ? data.leftList.push(data.totalList[item]) : data.rightList.push(data.totalList[item]);
await this.getBoxHeight(data.leftList, data.rightList);
}
},
getBoxHeight(leftList, rightList) {
return new Promise((resolve, reject) => {
this.$data.leftList = leftList
this.$data.rightList = rightList
query.select('#dis_left').boundingClientRect();
query.select('#dis_right').boundingClientRect();
// 处理异步问题,没有数据
setTimeout(() => {
query.exec((res) => {
leftHeight = res[0].height; //获取左边列表的高度
rightHeight = res[1].height; //获取右边列表的高度
resolve();
});
})
})
}
}
}
</script>
<style lang="scss" scoped>
.dislocat_content{
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
&_left, &_right{
width: 48.2%;
float: left;
border-radius: 10rpx;
}
&_left{
margin-left: 1.2%;
margin-right: 0.6%;
}
&_right{
margin-right: 1.2%;
margin-left: 0.6%;
}
.border-outside{
margin-top: 8rpx;
.img_icon{
width: 100%;
display: block;
border-radius: 10rpx;
}
}
}
</style>
到这里,错位布局就完了,有不对之处,请指出改正,谢谢!!!
更多推荐
已为社区贡献5条内容
所有评论(0)