微信小程序開發實戰&電影小程序——閱讀頁面輪播圖-新聞列表頁面構建-數據綁定

微信小程序開發——閱讀頁面輪播圖-新聞列表頁面構建-數據綁定開發教程：

今天打開微信官方文檔發現輪播圖組件更新了兩個功能，可是目前暫未啓用，估計過幾天就能使用了。

屬性名	類型	默認值	說明
indicator-color	Color	rgba(0,0,0,.3)	指示點顏色 （這個屬性目前暫未啓用）
indicator-active-color	Color	#000000	當前選中的指示點顏色 （這個屬性目前暫未啓用）

最終的效果圖：

代碼部分：

下面咱們來繼續研究代碼部分： 
wxml部分：

<view>
  <swiper indicator-dots="true" autoplay="true" interval="2000">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}"></image>
    </swiper-item>
    </block>
  </swiper>
</view>

•  

注意：swiper-item僅可放置在swiper組件中，寬高自動設置爲100%。

js部分：

data:{
    imgUrls: [
      '/images/wx.png',
      '/images/vr.png',
      '/images/iqiyi.png'
    ]
  },

•  

js文件中定義了一個數組，裏面存放圖片的路徑

wxss代碼：

swiper,swiper image {
  width: 100%;
  height: 500rpx;
}

•  

注意：輪播圖組件的寬高樣式須要設置在swiper標籤上，官方文檔中沒有說明，只能一個一個試，最後的結論是必須定義在swiper標籤。

一、效果圖預覽

二、準備工做

在拿到效果圖後不要先急着去寫代碼，而是要去分析一下頁面的總體結構，用什麼方式定位和佈局。小程序裏建議使用flex佈局，由於小程序對flex的支持是很好的。

上一篇博客中完成了輪播圖部分，接下來繼續完成下面的新聞列表部分

三、wxml部分

新聞列表部分總體使用flex縱向佈局比較合適， 
先把頁面內的元素標籤和類名寫好。

<view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="{{item.view_img}}"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="{{item.collect_img}}"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>

•  

四、wxss部分

.post-container{
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}
.post-author-date{
  margin: 10rpx 0 20rpx 10rpx;
}
.post-author{
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}
.post-date{
  margin-left: 20rpx;
  vertical-align: middle;
  margin-bottom: 5px;
  font-size: 26rpx;
}
.post-title{
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
}
.post-image{

  width: 100%;
  height: 340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}
.post-content{
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}
.post-like{
  font-size: 13px;
  flex-direction: row;
  line-height: 16px;
  margin-left: 10px;
}
.post-like-image{
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}
.post-like-font{
  vertical-align: middle;
  margin-right: 20px;
}

•  

五、數據綁定

數據綁定很重要，那麼多的新聞列表，不可能每一個新聞都複製粘貼一下代碼。何況小程序還限制在1MB大小。

咱們把數據內容單獨放在一個文件夾裏，模擬從網絡加載的狀況

如圖，在根目錄新建一個data文件夾，裏面新建一個posts-data.js文件 

5.一、posts-data.js

在posts-data.js裏定義一個local_database數組

var local_database=[
      {
        date:"Nov 10 2016",
        title:"文章標題1",
        imgSrc:"/images/post/crab.png",
        avatar:"/images/avatar/1.png",
        content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介",
        reading:"92",
        collection:"65",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      },
      {
        date:"Nov 20 2016",
        title:"文章標題2",
        imgSrc:"/images/post/bl.png",
        avatar:"/images/avatar/2.png",
        content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介",
        reading:"88",
        collection:"66",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      },
      {
        date:"Nov 25 2016",
        title:"文章標題3",
        imgSrc:"/images/post/cat.png",
        avatar:"/images/avatar/3.png",
        content:"文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介文章簡介",
        reading:"123",
        collection:"55",
        view_img:"/images/icon/chat.png",
        collect_img:"/images/icon/view.png",
      }
    ]

•  

別忘了在posts-data.js文件最後加上輸出

module.exports={
        postList:local_database
    }

•  

5.二、post.wxml使用數據綁定：

例如用戶頭像圖片的路徑，用雙大括號括起來 裏面和數組裏定義的要相同，而後前面要加上item. 意思是綁定數組裏定義的avatar，代碼以下：

<image class="post-author" src="{{item.avatar}}"></image>

•  

5.三、post.js

先把posts-data.js文件引入：

var postsData=require('../../data/posts-data.js')

•  

而後在onLoad: 函數內設置Data的值

onLoad:function(options){
    // 生命週期函數--監聽頁面加載
    this.setData({
      posts_key:postsData.postList
    })
  },

•  

六、for循環

在wxml要循環的部分外面加上<block> </block>標籤

<block wx:for="{{posts_key}}" wx:for-item="item">
<view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}"></image>
        <text class="post-date">{{item.date}}</text>
      </view>
      <text class="post-title">{{item.title}}</text>
      <image class="post-image" src="{{item.imgSrc}}"></image>
      <text class="post-content">{{item.content}}</text>
      <view class="post-like">
        <image class="post-like-image" src="{{item.view_img}}"></image>
        <text class="post-like-font">{{item.reading}}</text>
        <image class="post-like-image" src="{{item.collect_img}}"></image>
        <text class="post-like-font">{{item.collection}}</text>
      </view>
    </view>
</block>

•  

語法是：

wx:for=」{{數組名}}」