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

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

+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

+{
+  "component": true
+}
\ No newline at end of file

static/nativeComponents/Banner/index.wxml

+<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

+.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.json

+{
+  "components":true
+}
\ No newline at end of file

static/nativeComponents/module/WaterfallFlow/index.wxml

+<!--瀑布流组件-->
+<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

+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;
+}