微信小程序-文章推荐页面

跟着视频做了一下练习，把代码贴上作为备忘。

效果如下

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'
    ],
    // 以后可以用代码便利文件夹获得文件名
    images:[
      '../../images/1.png',
      '../../images/2.png',
      '../../images/3.png',
      '../../images/4.png',
    ],
    listItems:[
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
      '',
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

index.wxml

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


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

    <view class='content'>

  <!---------------精品推荐------------------------  -->
      <!--直接手动输入  -->
       <!-- <view class='content-item'>
        <image src='../../images/1.png'/>
      </view>
      <view class='content-item'>2</view>
      <view class='content-item'>3</view>
      <view class='content-item'>4</view> -->


      <!--用block循环输出页面  -->
      <!-- <block wx:for="{{images}}">
        <view class='content-item'>
          <image src='{{item}}'/>
          <view class='content-item-text'>
            <text>这里是标题</text>
          </view>
        </view>
      </block> -->

        <!--用包裹view循环输出页面  -->
        <view class='content-item' wx:for="{{images}}">
          <image src='{{item}}'/>
          <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/5.png' class="list-item-images-img"/>
        <image src='../../images/head.jpg' class='head'/>
      </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

/**index.wxss**/

.selection{
  border-bottom: 5px solid #ddd;
  padding-bottom: 10px;
}

.header {
  border-left: 2px solid lightgreen;
  display: flex;
  /*调整对齐方式  */
  justify-content: space-between;
  align-content: center;
  height: 60rpx;
  margin-top: 20rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-bottom: 10rpx;
}

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

.content {
  display: flex;
  flex-direction: row;
  /*设置自动换行  */
  flex-wrap: wrap;
  justify-content: center;
}

.content-item {
  width: 45%;
  height: 250rpx;
  background-color: goldenrod;
  /* border: 1px solid white; */
  margin: 5px;
  /*这个元素定位了文字才能依靠这个绝对定位  */
  position: relative;
}

.content-item image {
  /* 宽高100%填满每个content-item */
  width: 100%;
  height: 100%;
}

.content-item-text {
  /*使用绝对定位来做文字重叠到图片的效果  */
  position: absolute;
  /*bottom 是以content-item 来定位的  */
  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%;
  /*设置flex显示， flex-direction:排列方式为纵向， justify-content:从底部开始  */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* 设置内边距，注意修改边距时也要修改响应的宽和高 */
  padding-left: 1%;
  padding-bottom: 1%;
  padding-right: 1%;
}


.list-item{
height: 500rpx;
width: 100%;
}

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

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


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

  /* background-color: purple; */
}
/*head用绝对定位到父元素的对应位置 父元素为list-item-images要设置position  */
.head{
  width: 100rpx;
  height: 100rpx;
  /*变为圆形  */
  border-radius: 50%;
  position: absolute;
  bottom:-50rpx;
  right: 50rpx;
}

.list-item-text-content{
  font-size: 13px;
  color: lightgray;
  margin-top: 20rpx;
}