Skip to content

M
mayi-mp-shop
Commit 9c3cfcd1 by 程默
Options

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents 1e82cab2 27e11e53
Showing with 413 additions and 0 deletions
src/pages/home/index.vue
......@@ -8,6 +8,14 @@
></image>
<van-button type="primary">按钮</van-button>
<view class="ant-bofang">1</view>
----瀑布流开始----
<waterfall-flow id="waterfallFlow"></waterfall-flow>
----瀑布流结束----
<!-- <banner id="banner" :datas="componentsList[0]"></banner>
<div class="domain">abc
<van-button type="primary">按钮</van-button> -->
<!-- </div> -->
</div>
</template>
......
src/pages/home/main.json
{
"usingComponents": {
"banner": "../../../static/nativeComponents/Banner/index",
"waterfall-flow": "../../../static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index"
}
}
\ No newline at end of file
static/nativeComponents/Banner/index.js 0 → 100644
const app = getApp()
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String
// value: '',
},
list: {
type: Array
},
datas: {
type: Object
}
},
data: {
// 这里是一些组件内部数据
message: "Hello World",
indicatorDots: false,
vertical: false,
autoplay: false,
interval: 2000,
duration: 500,
activeIndex:0,
},
methods: {
customMethod() {
console.log("hello world! I am learning 微信小程序");
},
bannerChange(val) {
console.log(val,'--------30')
this.setData({ activeIndex:val.detail.current });
},
}
});
\ No newline at end of file
static/nativeComponents/Banner/index.json 0 → 100644
{
"component": true
}
\ No newline at end of file
static/nativeComponents/Banner/index.wxml 0 → 100644
<view>
<view class="banner"
style="--dotsColor:{{datas.componentData.indColor}};padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
<view class="bannerItem">
<swiper class="swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="bannerChange">
<block wx:for="{{datas.componentData.imgList}}" wx:key="index">
<swiper-item>
<view class="swiper-item">
<image src="{{item.imageUrl}}" style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx" mode="widthFix" class="bannerImgItem"></image>
</view>
</swiper-item>
</block>
</swiper>
<view class="dots">
<view class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}}" wx:for="{{datas.componentData.imgList}}" wx:key="index"></view>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/Banner/index.wxss 0 → 100644
.banner{
/* position: relative; */
}
.bannerItem{
position: relative;
}
.swiper{
width: 100%;
height: calc(100vw*9/16);
padding-bottom: 32rpx;
}
.swiper-item{
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.bannerImgItem{
width: 100%;
height: 100%;
}
.dots{
position: absolute;
bottom: 10rpx;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
.dotsItem{
margin: 0 8rpx;
background: rgba(255,255,255,0.4);
}
.dotsStyle1{
width: 30rpx;
height: 10rpx;
border-radius: 4rpx;
-webkit-border-radius: 4rpx;
-moz-border-radius: 4rpx;
-ms-border-radius: 4rpx;
-o-border-radius: 4rpx;
}
.dotsStyle2{
width: 20rpx;
height: 20rpx;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
}
.isDotsColor{
background: var(--dotsColor);
border-color: var(--dotsColor);
}
\ 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