zoukankan      html  css  js  c++  java
  • 小程序 之两列瀑布流

    一、效果图

     二、代码

    <view class="content">
        <view class="left">
            <block wx:for="{{lists}}" wx:key="index">
                <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
            </block>
        </view>
        <view class="right">
            <block wx:for="{{lists}}" wx:key="index">
                <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
            </block>
        </view>
    </view>
    
    <template name="item">
        <view class="item" bindtap="goTo" data-url='../book/index?id={{id}}'>
            <image lazy-load="{{true}}" class="item-img" src="{{thumb}}" mode="widthFix"></image>
            <view class="item-title-box">
                <navigator url="url" class="item-title" hover-class="none">{{title}}</navigator>
            </view>
        </view>
    </template>
    .content{
      margin: 20rpx 20rpx;
      text-align: justify;
    }  
    .item{
      background-color: #fff;
      /* margin: 1%;  */
      margin-bottom: 20rpx;
      display: inline-block;
      width: 100%;
      /* padding: 10rpx; */
      box-sizing: border-box;
      box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .09);
    }
    .item-ava{
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx;
    }
    .heart{
      width: 30rpx;
      height: 26rpx;
      margin-right: 8rpx;
    }
    .heart_{
      display: flex;
      align-items: center;
    }
    .item-img{
      width: 100%
      
    }
    .item-title{
      font-size: 24rpx;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      font-family: 'PingFang SC-Medium';
      color: #1e1e1e;
      margin: 15rpx;
      line-height: 27rpx;
    }
  • 相关阅读:
    初学者一些常用的SQL语句(一)
    java小知识
    ArrayList底层实现原理
    JVM原理
    一个简单的登陆注册页面(希望可以帮到您)
    数据结构
    C++/C
    C的函数指针与指针函数
    函数指针与指针函数
    对数据库通用性的更新操作(ssh)
  • 原文地址:https://www.cnblogs.com/yang-2018/p/13786680.html
Copyright © 2011-2022 走看看