Skip to content

M
mayi-mp-shop
Commit 27e11e53 by 李嘉林
Options

瀑布流组件

parent f3494461
Showing with 290 additions and 8 deletions
src/pages/home/index.vue
<template> <template>
<div class="domain"> <div class="domain">
abc ----瀑布流开始----
<Banner id="banner" :datas="componentsList[0]"></Banner> <waterfall-flow id="waterfallFlow"></waterfall-flow>
<div class="domain">abc ----瀑布流结束----
<!-- <banner id="banner" :datas="componentsList[0]"></banner>
<div class="domain">abc
<van-button type="primary">按钮</van-button> <van-button type="primary">按钮</van-button> -->
</div> <!-- </div> -->
</div> </div>
</template> </template>
...@@ -698,7 +700,7 @@ export default { ...@@ -698,7 +700,7 @@ export default {
<style> <style>
.domain { .domain {
text-align: center; /* text-align: center; */
padding-top: 50%; /* padding-top: 50%; */
} }
</style> </style>
\ No newline at end of file
src/pages/home/main.json
{ {
"usingComponents": { "usingComponents": {
"Banner": "../../../static/nativeComponents/Banner/index", "banner": "../../../static/nativeComponents/Banner/index",
"waterfall-flow": "../../../static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index" "van-button": "/static/vant/button/index"
} }
} }
\ No newline at end of file
static/nativeComponents/module/WaterfallFlow/index.js 0 → 100644
const app = getApp();
Component({
properties: {},
lifetimes: {
created() {
console.log("进入组件created");
// this.initList();
},
attached() {
console.log("进入组件attached");
this.initList();
},
ready() {
console.log("进入组件ready");
this.reLoadPro();
}
},
observers: {},
data: {
note: [
{
name: "大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼",
heart_num: "1",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "2",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201407%2F09%2F195336lcyfkff8rw808row.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701648&t=574800c4e85e1e5437c9a97d6ff8bc54",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "3",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201407%2F09%2F195336lcyfkff8rw808row.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701648&t=574800c4e85e1e5437c9a97d6ff8bc54",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "4",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1025707121,3229693962&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "5",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1025707121,3229693962&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "6",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "7",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "8",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3111609385,453132559&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "9",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "10",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F02%2F092241w9f4vaz8peovfe91.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701705&t=f7e3d83f199d4aac9b7d6ef3ea72cff1",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "11",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201403%2F02%2F092241w9f4vaz8peovfe91.jpg&refer=http%3A%2F%2Fattach.bbs.miui.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701705&t=f7e3d83f199d4aac9b7d6ef3ea72cff1",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "12",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fandroid-wallpapers.25pp.com%2Ffs01%2F2014%2F10%2F10%2F2000_d9c1ccb59874db2de2ffccd707ecd997_900x675.jpg&refer=http%3A%2F%2Fandroid-wallpapers.25pp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701726&t=4b48ead509d1b6e0c8211504635bb854",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "13",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fandroid-wallpapers.25pp.com%2Ffs01%2F2014%2F10%2F10%2F2000_d9c1ccb59874db2de2ffccd707ecd997_900x675.jpg&refer=http%3A%2F%2Fandroid-wallpapers.25pp.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613701726&t=4b48ead509d1b6e0c8211504635bb854",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
},
{
name: "大脸猫爱吃鱼",
heart_num: "14",
title:
"你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识",
url:
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3111609385,453132559&fm=26&gp=0.jpg",
avatar:
"http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg"
}
],
//列数
waterfallImgCol: 2,
//列高度数组
waterfallDeviationHeight: [0, 0],
contentList: [],
inj: 0
},
methods: {
// 初始化数组
initList() {
// 初始化容器
let contentList = this.data.contentList;
contentList[0] = [];
contentList[1] = [];
this.setData({ contentList });
},
async reLoadPro() {
let _this = this;
this.setHeight(0);
},
setHeight(i) {
let _this = this;
let item = this.data.note[i];
console.log(i, "---------------i");
console.log(
this.data.waterfallDeviationHeight,
"-------waterfallDeviationHeight"
);
let minIndex = this.filterMin();
console.log(minIndex, "---------------126");
let contentList = this.data.contentList;
contentList[minIndex].push(item);
this.setData({ contentList });
const queryDom = wx.createSelectorQuery().in(this);
queryDom.select(`.item${minIndex}`).boundingClientRect();
queryDom.exec(res => {
res[0].height;
console.log(res[0], "--------------res");
let waterfallDeviationHeight = _this.data.waterfallDeviationHeight;
waterfallDeviationHeight[minIndex] = res[0].height;
_this.setData({ waterfallDeviationHeight });
if (i >= _this.data.note.length - 1) {
return;
}
i++;
_this.setHeight(i);
});
},
filterMin() {
let val = Math.min.apply(null, this.data.waterfallDeviationHeight);
// console.log(this.waterfallDeviationHeight,this.waterfallDeviationHeight.indexOf(val),'-------------------167')
return this.data.waterfallDeviationHeight.indexOf(val);
},
imageLoad(ev) {
let windowWidth = wx.getSystemInfoSync().windowWidth;
let src = ev.currentTarget.dataset.src,
width = ev.detail.width,
height = ev.detail.height;
let newWidth = parseInt(windowWidth * 0.49);
let newHeight = parseInt(newWidth / (width / height));
console.log(width, height,newWidth,newHeight, ev.target.dataset.id, "-----------------------219");
}
}
});
static/nativeComponents/module/WaterfallFlow/index.json 0 → 100644
{
"components":true
}
\ No newline at end of file
static/nativeComponents/module/WaterfallFlow/index.wxml 0 → 100644
<!--瀑布流组件-->
<view class="waterfallFlow">
<view class="container flex">
<view
wx:for="{{contentList}}"
wx:key="index"
class="container-item item{{index}}"
>
<view
wx:for="{{item}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="index1"
class="imageItem"
>
<image
src="{{item1.url}}"
mode='widthFix'
bindload="imageLoad"
data-id="{{item1.heart_num}}"
/>
<!-- <image src="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/241f95cad1c8a7863cb5bacd6709c93d71cf5052.jpg" mode='widthFix'></image> -->
<text>{{item1.name}}--{{item1.heart_num}}</text>
</view>
</view>
</view>
</view>
static/nativeComponents/module/WaterfallFlow/index.wxss 0 → 100644
image {
width: 100%;
}
.flex {
display: flex;
}
.waterfallFlow{
width: 100vw;
}
.container {
justify-content: space-around;
align-items: flex-start;
}
.container-item{
width: 49%;
}
.imageItem{
border: 1px solid #333;
margin-bottom: 10rpx;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment