zoukankan      html  css  js  c++  java
  • 微信小程序瀑布流

    原文:https://www.cnblogs.com/sizhou/p/7219551.html

    HTML

    <view class="content">
          <view class="left">
            <block wx:for="{{note}}" wx:key="">
              <template is="item" data="{{...item}}" wx:if="{{index%2==0}}"></template>
            </block>
          </view>
          <view class="right">
            <block wx:for="{{note}}" wx:key="">
              <template is="item" data="{{...item}}" wx:if="{{index%2==1}}"></template>
            </block>
          </view>
        </view><!--  下面是一个模块 -->
    <template name="item">
      <view class="item">
        <image class="item-img" src="{{url}}" mode="widthFix"></image>
        <view class="item-title-box">
          <navigator url="url" class="item-title">{{title}}</navigator> 
          <image class="arrow" src="../../image/arrow.png"></image>  
        </view>
        <view class="name">
          <image class="item-ava" src="{{avatar}}"></image>    
          <text class="name-title">{{name}}</text>
          <view class="heart_">
            <image class="heart" src="../../image/heart.png"></image>
            <text>{{heart_num}}</text>
          </view>
        </view>
      </view>
    
    </template>

    css

    .content{
      margin: 0 20rpx;
      text-align: justify; 
    }  
    .item{
      background-color: #fff;
      margin: 1%; 
      margin-bottom: 20rpx;
      display: inline-block;
    }
    .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;
    }
    .item .name{
      display: flex;
      padding: 0 15rpx;
      margin-top: 20rpx;
      padding-bottom: 10rpx;
      align-items: center;
      font-size: 22rpx;
      color: #1e1e1e;
      font-family: 'PingFang SC-Medium';
    }
    .name image{
      flex: 0 0 30rpx;
    }
    .item-title-box{
      display: flex;
      position: relative;
    }
    .name-title{
      flex: 1;
      margin-left: 18rpx;
      margin-right: 20rpx;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .name text:last-child{
      flex: 0 0 30rpx;
      color: #c4c4c4;
      text-decoration: underline;
      line-height: 10rpx;
      
    }
    .left,.right{
      display: inline-block;
      vertical-align: top;
      width: 49%;
    }
    .right{
      float: right;
    }

    js

    var app = getApp()
    Page({
      data: {
        note:[
          {
            name: '大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼大脸猫爱吃鱼',
            heart_num: '1',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          },
          {
            name: '大脸猫爱吃鱼',
            heart_num: '2',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          },
          {
            name: '大脸猫爱吃鱼',
            heart_num: '3',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          }, {
            name: '大脸猫爱吃鱼',
            heart_num: '4',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          },
          {
            name: '大脸猫爱吃鱼',
            heart_num: '5',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://f10.baidu.com/it/u=121654667,1482133440&fm=72',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          },
          {
            name: '大脸猫爱吃鱼',
            heart_num: '6',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://img3.imgtn.bdimg.com/it/u=1417732605,3777474040&fm=26&gp=0.jpg',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          },
          {
            name: '大脸猫爱吃鱼',
            heart_num: '7',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://img4.imgtn.bdimg.com/it/u=2748975304,2710656664&fm=26&gp=0.jpg',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          }, {
            name: '大脸猫爱吃鱼',
            heart_num: '8',
            title: '你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识你所不知道的红酒知识',
            url: 'http://img2.imgtn.bdimg.com/it/u=1561660534,130168102&fm=26&gp=0.jpg',
            avatar: 'http://img4.imgtn.bdimg.com/it/u=349345436,3394162868&fm=26&gp=0.jpg'
          }
        ]}
    })
  • 相关阅读:
    TRIGGERS_监测系统_多表视图触发器—向原始数据报表中插入数据
    PROCEDURE_监测系统_原始数据报表数据生成存储过程—求每天平均值插入多表视图
    PROCEDURE_监测系统_数据备份存储过程—备份原始数据,每十分钟一条,取平均值
    TRIGGERS_监测系统_原始数据表触发器—调用告警信息存储过程
    PROCEDURE_监测系统_告警信息存储过程—产生告警信息插入告警表
    秒(s) 毫秒(ms) 微秒(μs) 纳秒(ns) 皮秒(ps)及Java获得 .
    new String(byte[])和byte[]toString() 的区别
    Java 线程池 .
    加载配置文件的方式
    Spring的PropertyPlaceholderConfigurer应用
  • 原文地址:https://www.cnblogs.com/kpengfang/p/12966199.html
Copyright © 2011-2022 走看看