微信小程序布局实例

版权声明：本文为博主原创文章，未经博主允许不得转载，如文章对您有帮助，请页面左侧随意打赏。 https://blog.csdn.net/smartsmile2012/article/details/83543019

//index.js
Page({
  data:{
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    contentItems:['','','',''],
    listItems:['','','','','','','']
  }
})

index.wxml

<view class="container">
 
  <view class="selection">
    <swiper indicator-dots="true"
      autoplay="true" interval="3000" duration="1000">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>
  </view>


  <view class="selection">
      <view class="header">
           <text>精品推荐</text>
            <text class="text-all">全部精品</text>
      </view>


      <view class="content">
          <view class="content-item" wx:for="{{contentItems}}">
             <image src="../../images/img1.png" />
             <view class="content-item-text">
              <text>这里是标题</text>
             </view>
          </view>

         

      </view>

  </view>



  <view class="selection">
      <view class="header">
           <text>热门评测</text>
            <text class="text-all">全部评测</text>
      </view>

      <view class="list-item" wx:for="{{listItems}}">

            <view class="list-item-images">
                 <image src="../../images/img2.png" class="list-item-images-img" />
                 <image src="../../images/avatar.png" class="avatar" />
            </view>

            <view class="list-item-text">
                <view class="list-item-text-title">
                  <text>标题标题标题</text>
                </view>

                <view class="list-item-text-content">
                  <text>这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,</text>
                </view>

            </view>

      </view>


  </view>


</view>

/* index.wxss */
.selection{
  border-bottom: 5px solid #ddd;

}


.header{
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: limegreen;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.text-all{
  color: green;
  font-size: 10px;
}

.content{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
}

.content-item{
  height: 250rpx;
  width: 45%;
  background-color: goldenrod;
  margin: 5px;
  position: relative;
}

.content-item image{
  width: 100%;
  height: 100%;
}

.content-item-text{
  position: absolute;
  bottom: 0px;
  color: white;
  font-size: 10px;
  background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0));
  height: 125rpx;
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}

.list-item{
  height: 500rpx;
  width: 100%;
}
.list-item-images{
   height: 300rpx;
   width: 100%;
   position: relative;
}

.list-item-images-img{
   height: 100%;
   width: 100%;
}


.avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute;
  bottom: -50rpx;
  right: 50rpx;
}


.list-item-text{
  height: 200rpx;
  width: 96%;
  margin-top: 20rpx;
  padding-left: 2%;
  padding-right: 2%; 
}

.list-item-text-content{
  font-size: 10px;
  color: #999;
  margin-top: 20rpx;

}