微信小程序-wx:for-复杂界面

一。wx:for 基础

下面连接或百度搜索
https://www.jianshu.com/p/2057d88f0920

二。wx:for复杂布局效果1

截屏2019-12-31下午1.29.17.png

 <view class="goods">
      <view class="title">0元免费拿</view>
      <view class="rss">
          <button bindtap="rss">
            <view class="ico"><image src="../image/rss.png" mode="widthFix"></image></view>
          </button>
      </view>

      <view class="ul">
        <view class="li" bindtap="content" wx:for='{{goods}}' wx:key="index" data-id="{{item.id}}">
          <image src="{{host}}{{item.cover}}"></image>
          <text class="gtitle">{{item.title}}</text>
          <view class="price">¥{{item.rmb}}<text>已兑换{{item.givenum}}件</text></view>
          <view class="btn"><button>0元免费拿</button></view>
        </view>
        
      </view>
    </view>

.goods{
  position: relative;
}
.goods .title{
  font-size: 50rpx;
  padding: 25rpx 35rpx;
  color: red;
}
.goods .ul{
  width: 95%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.goods .li{
  position: relative;
  width: 47%;
  margin: 5px;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}

.goods .li image{
  width: 100%;
  height: 300rpx;
  border-radius: 5px 5px 0 0;
}
.goods .li .gtitle{
  display: block;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  white-space: nowrap;
}
.goods .li .price{
  font-size: 28rpx;
  color: red;
  text-decoration: line-through;
}

.goods .li .price text{
  position: absolute;
  right:0; 
  width: 100%;
  color: #666;
  text-align: right;
}
.goods .li .price,.goods .li .gtitle{
  margin-left: 10rpx;
  margin-right: 5rpx;
}
.goods .li .btn{
  text-align: center; 
}
.goods .li .btn button{
  width: 70%;
  background: red;
  color: #fff;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  margin: 10rpx auto;
}

解释

1.

          <view class="price">¥{{item.rmb}}<text>已兑换{{item.givenum}}件</text></view>

上面这行是我们比较熟悉的写法，wx:for 里面的组件建议用这个，上面的其他写法不好理解如下：

三。wx:for复杂布局效果2

背景图上面加组件

截屏2019-12-31下午5.58.32.png

  <view class="goods">

     <view class="ul">
       <view class="li" bindtap="showTradeDetail" wx:for='{{list}}' wx:key="indext" data-id="{{item}}">
        
               <!--o元-->
         <view class="price"> 
         <image src="../../Image/backgroundImg.png"></image>

         <text class="netCardName"> {{item.cardName}}</text>
         <text class="netMoney"> {{item.money}}元</text>
         <text class="netvalidDays"> 有效时间：{{item.validDays}}天</text>
         <text class="netticketLimit"> {{item.ticketLimit}}</text>
         <text class="buy">点击购买</text>
         <text class="netticketRule"> {{item.ticketRule}}</text>

         </view>
                               <!--o元-->

       </view>
                     <!--wxfor-->

     </view>
                     <!--view-->

   </view>
                               <!--good-->

.goods{
  position: relative;
}
.goods .ul{
  width: 95%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.goods .li{
  position: relative;
  width: 100%;
  margin: 5px;
  background-color: #fff;
  border-radius: 5px 5px 0 0;
}

.goods .li .price{
  width: 100%;
  height: 216px;
  font-size: 28rpx;
  color: white;
 /* text-decoration: line-through; 字上有横线*/
}
.goods .li .price image{
  position: absolute;
  width: 100%;
  height: 100%;

}
.netCardName{
  position: absolute;
  top: 35px;
  left: 30px;
  text-align: left;
      font-size: 18px;

}
.netMoney{
  position: absolute;
  bottom: 30px;
  left: 30px;
  text-align: left;
        font-size: 16px;
  color: #381711;

}
.netvalidDays{
  position: absolute;
  bottom: 30px;
  right: 30px;
  text-align: right;
  color: #381711;
}
.netticketLimit{
  position: absolute;
  top: 80px;
  right: 30px;
  text-align: right;
      font-size: 32px;

}
.buy{
  position: absolute;
  top: 35px;
  right: 35px;
  width: 60px;
  text-align: center;
    font-size: 13px;
        border-radius: 5px; 
border:1px solid white;
}
.netticketRule{
  position: absolute;
  bottom: 90px;
  left: 30px;
  text-align: left;
      font-size: 15px;

}

四。wx:for 页眉和页脚

1.做一个背景view 作为整个页面的背景，2做一个view 作为页眉3然后如下面的代码设置 wx:for 的容器的top，和 margin-bottom: 4.做一个view 放在屏幕底部。

设置margin-top或margin-bottom失效不取作用的解决方法
http://www.manongjc.com/article/1263.html

截屏2020-06-09 下午4.09.10.png

<view class="bgOne">
    <view class="head">
    </view>
    <view class="goods">
    </view>
    <view class="foot">
    </view>
</view>

.bgOne{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #E1E3E6;
}
.goods{
  position: relative;
  top: 10%;
  background-color: #E1E3E6;
  overflow:hidden;
  padding-bottom:1px;
}
.goods .ul{
  width: 95%;
    margin-bottom: 120rpx;
  display: flex;
  flex-wrap: wrap;
}