小程序开发之Lin-ui瀑布流的使用方法

封装lin-demo瀑布组件：

l-demo.json : 

{
  "component": true,
  "usingComponents": {
    "l-card": "/miniprogram_npm/lin-ui/card",
    "l-price" : "/miniprogram_npm/lin-ui/price"
  }
}

l-demo.wxml:

<view>
    <l-card full type="cover" image="{{data.image}}" title="{{data.title}}" l-class="life-container" l-img-class="life-img" l-title-class="life-title" bindtap="onProduct">
    <view class='life-product-contianer'>
      <view class='art-content'>{{data.describe}}</view>
      <view class='price-container'>
        <l-price unit="￥" value="{{data.count}}" value-color="#ad0e11" unit-color="#ad0e11" value-size="36"></l-price>
        <l-price l-class="del-price" unit="￥" value="{{data.delCount}}" value-color="#ad0e11" unit-color="#ad0e11" deleted del-color="#666" value-color="#666" unit-color="#666"></l-price>
      </view>
    </view>
  </l-card>
</view>

l-demo.wxss:

/* demo.wxss */
.life-container {
  width: 350rpx !important;
  padding: 0 0 20rpx 0 !important;
  background-color: #fff !important;
  box-shadow: 0px 8rpx 20rpx 0px rgba(9, 36, 66, 0.04) !important;
  border-radius: 16rpx !important;
  overflow: hidden;
  margin-bottom: 20rpx;
}

.life-img {
  width: 350rpx !important;
  height: 380rpx !important;
}

.life-product-contianer {
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
}

.life-title {
  margin-left: 10rpx !important;
}

.tag {
  height: 30rpx !important;
  line-height: 30rpx !important;
}

.art-content {
  font-size: 28rpx;
  color: #999;
  margin-top: 15rpx;
  display: flex;
  flex-wrap: wrap;
}

l-demo.js :

  // demo.js
  Component({
    /**
     * 组件的属性列表
     */
    properties: {
      data:Object
    },
  
    /**
     * 组件的初始数据
     */
    data: {
  
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
  
    }
  })

-----------------------------------------------------------------以下为父组件中调用上述组件-----

index.json :

{
  "usingComponents": {
    "l-card": "/miniprogram_npm/lin-ui/card",
    "l-price" : "/miniprogram_npm/lin-ui/price",
    "l-demo":"/pages/components/l-demo/l-demo",
    "l-water-flow": "/miniprogram_npm/lin-ui/water-flow"
  }
}

index.wxml : 

<view class="big-brand">
                <l-water-flow generic:l-water-flow-item="l-demo"/>
              </view>

index.js :

  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    wx.lin.renderWaterFlow(this.data.demo, false ,()=>{
      console.log('渲染成功')
    })
  },

 

---------------其他补充：

编写下列代码获取数据：

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: async function () {
    const data = await this.data.spuPaging.getMoreData()
    if(!data){
      return
    }
    wx.lin.renderWaterFlow(data.items)
    if(!data.moreData){
      this.setData({
        loadingType:"end"
      })
    }
  },
  // 瀑布流
  async initBottomSpuList(){
    const paging = await SpuPaging.getLatestPaging()
    this.data.spuPaging= paging
    const data =await  paging.getMoreData()
    if(!data){
      return
    }
    wx.lin.renderWaterFlow(data.items) //linui瀑布流传入数组的方法
  },