首页 > 编程语言 >直播小程序源码,实现瀑布流布局的两种方式

直播小程序源码,实现瀑布流布局的两种方式

时间:2022-10-07 14:11:31浏览次数:48  
标签:flex column display 瀑布 直播 fall 源码

直播小程序源码,实现瀑布流布局的两种方式

实现方式

方式一:在页面遍历数组时使用if判断当前下标是基数还是偶数,将一个数组拆分为两个数组左右显示

 


<view class="photos">
     <view class="list">
       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
         <view class="item-content" v-if="index%2==0">
           <image class="avatar" :src="item.url" mode="widthFix"></image>
           <view v-text="item.name+index"></view>
         </view>
       </view>
     </view>
     <view class="list">
       <view class="list-item" v-for="(item,index) in list" :key="item" @click="detail(item)">
         <view class="item-content" v-if="index%2==1">
           <image class="avatar" :src="item.url" mode="widthFix"></image>
           <view v-text="item.name+index"></view>
         </view>
       </view>
     </view>
</view>
 <view class="flow">
        <view class="left">
            <view class="Item" style="height:{{item1.height}}" wx:for="{{List}}" wx:for-item="item1" wx:for-index="index1"   data-id="{{item1.id}}" data-index="{{item1.img_index}}">
                <image src="{{item1.image_watermark}}"  class="flowimg" mode="widthFix" lazy-load="true"></image>
            </view>
        </view>
    </view>

方式二:在接口返回数据中定义图片高度,在页面遍历数组时选择自动换行且将高度进行设置渲染

主要css

 

column-count: 2; //2列
column-gap: 20rpx; //列间距
.fall-container {
  width: 100%;
  display: flex;
}
.fall-left {
  display: flex;
  flex-direction: column;
}
.fall-right {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;

 

以上就是 直播小程序源码,实现瀑布流布局的两种方式,更多内容欢迎关注之后的文章

 

标签:flex,column,display,瀑布,直播,fall,源码
From: https://www.cnblogs.com/yunbaomengnan/p/16759647.html

相关文章