多商户瀑布流

static/nativeComponents/MerchantsList/index.json

 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {
+    "skeleton-block": "../module/SkeletonBlock/index"
+  }
 }
\ No newline at end of file

static/nativeComponents/MerchantsList/index.wxml

 <!--static/nativeComponents/MerchantsList/index.wxml-->
 <view class="merchants-list" wx:if="{{showList}}" style="border-radius:{{datas.componentData.moduleRadius * 2}}rpx;padding-top:{{datas.componentData.levelMargin * 2}}rpx;padding-bottom:{{datas.componentData.levelMargin * 2}}rpx;padding-left:{{datas.componentData.verticalMargin * 2}}rpx;padding-right:{{datas.componentData.verticalMargin * 2}}rpx;--modelBackgroundColor:{{datas.componentData.modelBackgroundColor}};--lineHeight:{{datas.componentData.lineHeight * 2}}rpx;--columnHeight:{{datas.componentData.columnHeight * 2}}rpx;--columnDistance:{{datas.componentData.columnHeight}}rpx;--pictureBackgroundColor:{{datas.componentData.pictureBackgroundColor}}">
+  <view wx:if="{{skeletonLoading}}">
+    <view wx:if="{{datas.componentData.layoutType == 0}}">
+      <skeleton-block loading="{{skeletonLoading}}" type="{{'flow'}}"></skeleton-block>
+    </view>
+    <view wx:if="{{datas.componentData.layoutType == 1}}">
+      <skeleton-block loading="{{skeletonLoading}}" type="{{'row'}}" height="30" row="1" col="4"></skeleton-block>
+    </view>
+    <view wx:if="{{datas.componentData.layoutType == 2}}">
+      <skeleton-block loading="{{skeletonLoading}}" type="{{'col'}}" row="1" col="2" height="50"></skeleton-block>
+    </view>
+  </view>
   <view wx:if="{{datas.componentData.layoutType == 0}}" id="ItemModule0">
     <view class="layoutType0">
       <view class="type-l">

static/nativeComponents/module/SkeletonBlock/index.js

+// static/nativeComponents/module/SkeletonBlock/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    type: {
+      type: String,
+      default: "row",
+    },
+    // 渲染块行数
+    row: {
+      type: Number,
+      default: 4,
+    },
+    // 列数
+    col: {
+      type: Number,
+      default: 1,
+    },
+    // 模块高度
+    height: {
+      type: Number,
+      default: 30,
+    },
+  },
+
+  
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    blockNumber : 0,
+    SkeletonItemWidth : 0
+  },
+
+  ready() {
+    if (this.data.type == 'flow'){
+      this.setData({
+        blockNumber : 4
+      })
+    }else{
+      this.setData({
+        blockNumber: this.properties.row * this.properties.col
+      })
+    }
+
+    this.setData({
+      SkeletonItemWidth: this.data.type == 'row' ? '100%' :'48%'
+    })
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

static/nativeComponents/module/SkeletonBlock/index.json

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

static/nativeComponents/module/SkeletonBlock/index.wxml

+<!--static/nativeComponents/module/SkeletonBlock/index.wxml-->
+<view wx:if="loading" class="SkeletonBlock {{type == 'row' ? 'SkeletonRow' : ''}} {{type == 'col' ? 'SkeletonCol' :''}} {{type == 'flow' ? 'SkeletonFlow' : ''}}" style="--blockWidth : 48%">
+  <view class="skeleton-animate SkeletonItem" wx:for="{{blockNumber}}" wx:key="index" style="width:{{SkeletonItemWidth}};padding-top:{{height}}%"></view>
+</view>
\ No newline at end of file

static/nativeComponents/module/SkeletonBlock/index.wxss

+/* static/nativeComponents/module/SkeletonBlock/index.wxss */
+.SkeletonBlock{
+  position: relative;
+}
+.SkeletonBlock .SkeletonItem{
+  width: 100%;
+  margin-bottom: 32rpx;
+  padding-top: 30%;
+  background-color: #f2f3f5;
+  border-radius: 8rpx;
+}
+.SkeletonBlock .skeleton-animate{
+  animation: skeleton-blink 1.2s ease-in-out infinite;
+}
+@keyframes skeleton-blink {
+    50% {
+      opacity: 0.6;
+    }
+  }
+
+.SkeletonRow .SkeletonItem{
+  width: 100%;
+  box-sizing: border-box
+}
+
+.SkeletonCol{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.SkeletonFlow{
+  padding: 0;
+  height: 620rpx;
+}
+.SkeletonFlow .SkeletonItem{
+  position: absolute;
+  top: 0;
+  margin-top: 0;
+}
+
+.SkeletonFlow .SkeletonItem:nth-child(2n){
+    position: absolute;
+    left: 52%;
+  }
+ .SkeletonFlow  .SkeletonItem:nth-child(1){
+    height: 360rpx;
+  }
+ .SkeletonFlow .SkeletonItem:nth-child(2){
+    height: 280rpx;
+  }
+  .SkeletonFlow .SkeletonItem:nth-child(3){
+    top: calc(360rpx + 32rpx);
+    height: 240rpx;
+  }
+ .SkeletonFlow  .SkeletonItem:nth-child(4){
+    top: calc(280rpx + 32rpx);
+    height: 32r0px;
+  }
\ No newline at end of file