欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

小程序之瀑布流布局

发表日期:2019-10 文章编辑:小灯 浏览次数:905

新的设计图是按两列瀑布流排版的,类似于花瓣网那种。看到设计图后就在网上找,如何在小程序简单的实现,后来找到了一个特别简单的方法,就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列,
话不多说看图上代码:

wxml:

<view class='footlist'>
  <view class="foot-left">
    <block wx:for="{{list}}" wx:key="{{ item.id }}">
      <view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==0}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
        <image class='cover' src="{{item.banner}}" mode="widthFix"></image>
        <view class="box-shadow">
          <text class='t1'>{{item.title}}</text>
          <view class='bot'>
            <view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
              <image src="{{item.userinfo.avatarurl}}"></image>
              <text class="username">{{item.userinfo.nickName}} </text>
            </view>
            <view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
              <image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
              <view style="color:red;">❤ </view>
              <view class='thumpnum'>{{item.like}}</view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>

  <view class="foot-right">
    <block wx:for="{{list}}" wx:key="{{ item.id }}">
      <view class='footbox' catchtap='jumpdetail' catchlongtap="deletefoot" bindtouchend="touchend" id="{{item.id}}" wx:if="{{index%2==1}}" data-cover="{{item.banner}}" data-title="{{item.title}}">
        <image class='cover' src="{{item.banner}}" mode="widthFix"></image>
        <view class="box-shadow">
          <text class='t1'>{{item.title}}</text>
          <view class='bot'>
            <view class='personbox' data-userid="{{item.userid}}" catchtap="toProfile">
              <image src="{{item.userinfo.avatarurl}}"></image>
              <text class="username">{{item.userinfo.nickName}}</text>
            </view>
            <view class='thump' data-fid='{{item.id}}' catchtap='thumptap'>
              <image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}" catchtap='unthumptap' src="../../images/thumph.png"></image>
              <view style="color:red;">❤</view>
              <view class='thumpnum'>{{item.like}}</view>
            </view>
          </view>
        </view>
      </view>
    </block>
  </view>
</view>

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 174,
        userid: 10,
        title: "日本岚山、和服一日游",
        banner: "https://hbimg.huabanimg.com/1ff95bdf3070e1fbff052a03ed353b409749f5ea16a809-WXy25b_fw658",
        points: 6,
        like: "62",
        userinfo: {
          id: 10,
          nickName: "李诗源",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 173,
        userid: 9,
        title: "日本阿寒湖一日游",
        banner: "https://hbimg.huabanimg.com/ee5bf07b84fead3d57b445d2e7fa8eb6afe827c617e9c-ha1fZH_fw658",
        points: 7,
        like: "92",
        userinfo: {
          id: 9,
          nickName: "大飞狼",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 172,
        userid: 8,
        title: "二次璧大乱斗东京动漫游",
        banner: "http://img1qn.moko.cc/2019-08-12/235e9bab-046e-4fea-afc2-4a049d81774e.jpg?imageView2/2/w/915/h/915/q/85",
        points: 4,
        like: "41",
        userinfo: {
          id: 8,
          nickName: "黄飞鸿",
          avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
        },
        islike: 0
      },
      {
        id: 100,
        userid: 314,
        title: "心和身体总要有一个在路上					
本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/23635.html
相关小程序
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.