简单轻松搞定小程序瀑布流

小程序 实现瀑布流比较简单的方法就是对数组进行分割循环 使用wx:if来判断数组元素的下标是否能被2整除 形成两次循环同一个数组 接下来看代码

wxml

<view class='footlist'>
    <view class="foot-left">
        <block wx:for="{{list}}" wx:key="id">
            <view class='footbox'  id="{{item.id}}" wx:if="{{index%2==0}}" >
                <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' >
                            <image src="{{item.userinfo.avatarurl}}"></image>
                            <text class="username">{{item.userinfo.nickName}} </text>
                        </view>
                        <view class='thump'>
                            <image class='un'  wx:if="{{item.islike=='1'}}"  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="id">
            <view class='footbox'  wx:if="{{index%2==1}}" >
                <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' >
                            <image src="{{item.userinfo.avatarurl}}"></image>
                            <text class="username">{{item.userinfo.nickName}}</text>
                        </view>
                        <view class='thump' data-fid='{{item.id}}' >
                            <image class='un' data-fid='{{item.id}}' wx:if="{{item.islike=='1'}}"  src="../../images/thumph.png"></image>
                            <view style="color:red;">❤</view>
                            <view class='thumpnum'>{{item.like}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </block>
    </view>
</view>

wxss

.footlist {
    position: relative;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    padding-top: 20rpx;
  }
  
  .footlist::after {
    content: '';
    clear: both;
    display: block;
  }
  
  .foot-left {
    float: left;
    width: 50%;
  }
  
  .foot-right {
    float: left;
    width: 50%;
  }
  
  .box-shadow {
    padding: 6rpx 10rpx 18rpx 10rpx;
    box-sizing: border-box;
    box-shadow: 0 2rpx 2rpx rgba(88, 88, 88, 0.233);
    border-bottom-left-radius: 10rpx;
    border-bottom-right-radius: 10rpx;
  }
  
  .footbox {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    box-sizing: border-box;
    position: relative;
    padding: 24rpx;
    padding-top: 10rpx;
  }
  
  .footbox image {
    width: 100%;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
  }
  
  .footbox .thump {
    display: flex;
    justify-content: space-between;
    width: auto;
    height: 42rpx;
  }
  
  .footbox .thump image {
    width: 40rpx;
    height: 42rpx;
    float: right;
  }
  
  .footbox .bot {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-top: 10rpx;
  }
  
  .footbox .bot::after {
    display: block;
    content: "";
    clear: both;
  }
  
  .footbox .bot .t1 {
    font-size: 30rpx;
    color: #1f1607;
    line-height: 1.5;
    overflow: hidden;
    width: 100%;
    margin-top: 15rpx;
  }
  
  .footbox .bot .t2 {
    font-size: 28rpx;
    color: #000;
    line-height: 100rpx;
    margin-left: 30rpx;
    float: left;
  }
  
  .foot-left .footbox {
    padding-right: 12rpx;
  }
  
  .personbox image {
    width: 42rpx;
    height: 42rpx;
    border-radius: 50%;
    background: #edaf39;
    float: left;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
  }
  

js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: [{
                id: 174,
                userid: 10,
                title: "日本岚山、和服一日游",
                banner: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg",
                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: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg",
                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: "心和身体总要有一个在路上🏃",
                banner: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg",
                points: 5,
                like: "110",
                userinfo: {
                    id: 314,
                    nickName: "二夏",
                    avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
                },
                islike: 0
            },
            {
                id: 99,
                userid: 312,
                title: "新疆两日游",
                banner: "https://img1.baidu.com/it/u=1738531146,3909274171&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                points: 5,
                like: "99",
                userinfo: {
                    id: 312,
                    nickName: "Tohsaka",
                    avatarurl: "https://pic3.zhimg.com/80/v2-fd0a58741fdf20f256c755719f81871e_hd.jpg"
                },
                islike: 0
            }
        ]
    },
})