小程序瀑布流

最新推荐文章于 2023-06-09 14:59:59 发布

多学学习吧

最新推荐文章于 2023-06-09 14:59:59 发布

阅读量164

点赞数

分类专栏：小程序文章标签：小程序

本文链接：https://blog.csdn.net/weixin_44900317/article/details/103814562

版权

小程序专栏收录该内容

19 篇文章 1 订阅

订阅专栏

wxml代码：

<view class="free-WaterfallFlow">
  <block>
    <view class="flex-wrap" wx:for="{{taxiRuleInfos}}" wx:if="{{item.index%2!=''}}">
      <view>{{item.carNo}}</view>
      <view>{{item.ruleTime}}</view>
      <view class="text-cut">{{item.ruleAddr}}</view>
      <image mode="widthFix" src="{{item.ruleImage}}"></image>
    </view>
  </block>
  <block>
    <view class="flex-wrap" wx:for="{{taxiRuleInfos}}" wx:if="{{item.index%2==''}}">
      <view>{{item.carNo}}</view>
      <view>{{item.ruleTime}}</view>
      <view class="text-cut">{{item.ruleAddr}}</view>
      <image mode="widthFix" src="{{item.ruleImage}}"></image>
    </view>
  </block>
</view>

wxss代码：

.free-WaterfallFlow{
  width:94%;
  column-count:2;/*column-count 属性规定元素应该被分隔的列数：*/
}
.free-WaterfallFlow .flex-wrap{
  display: inline-block;
  width:100%;
  margin-bottom:2%;
  border:1px solid #ccc;
  padding:2%;
  padding-top:5%;
  margin-right:2%;
  box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
  text-align: center;
}
.flex-wrap image{
  /* width:95%; */
  margin:0 auto;
}
.flex-wrap view:nth-child(2){
  font-size:15px;
  padding:2% 0;
  color:#717171;
}
.flex-wrap view:nth-child(3){
  font-size:13px;
  padding:2% 0;
  color:#aaa;
  text-align: right;
}