Skip to content

M
mayi-mp-shop
Commit 3579d1b3 by 李嘉林
Options

商品列表支持瀑布流

parent 43e05be4
Showing with 132 additions and 164 deletions
static/nativeComponents/GoodsList/index.js
......@@ -217,6 +217,9 @@ const componentOptions = {
this.setData({
"datas.componentData.goodsList": goodsList
});
if (this.selectComponent("#waterfallFlow")) {
this.selectComponent("#waterfallFlow").initList();
}
}, 0);
},
getSaleTime(val) {
......
static/nativeComponents/GoodsList/index.json
{
"component": true,
"usingComponents": {
"goods-item":"./GoodsItem/index"
"goods-item":"./GoodsItem/index",
"waterfall-flow":"../module/WaterfallFlow/index"
}
}
static/nativeComponents/GoodsList/index.wxml
......@@ -54,6 +54,17 @@
></goods-item>
</view>
</view>
<!-- 瀑布流 -->
<view wx:if="{{datas.componentData.style==='waterfall'}}">
<waterfall-flow
generic:defaultCom="goods-item"
id="waterfallFlow"
note="{{datas.componentData.goodsList}}"
datas="{{datas}}"
padding="{{datas.componentData.proGap}}"
wx:if="{{datas.componentData.goodsList}}"
></waterfall-flow>
</view>
<!-- 横向列表 -->
<view
class="goods goods-rowList"
......
static/nativeComponents/defaultCom/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
items: {
type:Object
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {}
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前，页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
static/nativeComponents/defaultCom/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
static/nativeComponents/module/WaterfallFlow/index.js
const app = getApp();
Component({
properties: {},
// 启用插槽
options: {
multipleSlots: true
},
properties: {
note: {
type: Array
},
datas: {
type: Object
},
padding: {
type: Number
}
},
lifetimes: {
created() {
console.log("进入组件created");
......@@ -8,157 +22,15 @@ Component({
},
attached() {
console.log("进入组件attached");
this.initList();
// this.initList();
},
ready() {
console.log("进入组件ready");
this.reLoadPro();
// 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,
//列高度数组
......@@ -174,6 +46,8 @@ Component({
contentList[0] = [];
contentList[1] = [];
this.setData({ contentList });
console.log(this.data.note, "-------------------185");
this.reLoadPro();
},
async reLoadPro() {
let _this = this;
......@@ -219,7 +93,14 @@ Component({
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");
console.log(
width,
height,
newWidth,
newHeight,
ev.target.dataset.id,
"-----------------------219"
);
}
}
});
static/nativeComponents/module/WaterfallFlow/index.json
{
"component":true
"component":true,
"componentGenerics": {
"defaultCom": {
"default": "/static/nativeComponents/defaultCom/index"
}
}
}
\ No newline at end of file
static/nativeComponents/module/WaterfallFlow/index.wxml
<!--瀑布流组件-->
<view class="waterfallFlow">
<view class="waterfallFlow" style="--proGap:{{padding}}rpx">
<view class="container flex">
<view
wx:for="{{contentList}}"
......@@ -13,14 +13,11 @@
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>
<defaultCom
datas="{{datas}}"
items="{{item1}}"
indexs="{{2*index+index1}}"
></defaultCom>
</view>
</view>
</view>
......
static/nativeComponents/module/WaterfallFlow/index.wxss
......@@ -4,17 +4,16 @@ image {
.flex {
display: flex;
}
.waterfallFlow{
width: 100vw;
}
.container {
justify-content: space-around;
align-items: flex-start;
}
.container-item{
width: 49%;
width: 50%;
}
.container-item:nth-child(2n + 1) {
padding-right: var(--proGap);
}
.imageItem{
border: 1px solid #333;
margin-bottom: 10rpx;
.container-item:nth-child(2n + 2) {
padding-left: var(--proGap);
}
\ No newline at end of file
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