這一節我們主要介紹下如何實現視訊列表展示，這裡展示的資料是從雲資料庫裡面獲取顯示到介面上的。

【效果展示】

【分析】

我們通過授權登入之後跳轉到這個介面之後就可以看到我們自己資料庫中所需要顯示的視訊，這裡我們使用block標籤以及wx:for來實現遍歷我們需要顯示的視訊。

因為wx:if是一個控制屬性，需要將它新增到一個標籤上，如果需要一次性判斷多個元件標籤，可以使用一個<block/>將多個元件包裝起來，並在上邊使用wx:for控制屬性。

【程式碼展示】

//welcome.xml
<view class="container">
  <block wx:for="{{video}}" wx:for-item="item">
    <view catchtap='onPostTap' data-videoId='{{item.videoId}}'>
      <text class="video-title">{{item.title}}</text>
      <image class="video-image"   src="{{item.videoImg}}"></image>
    </view>
  </block>
</view>
 

//welcome.wxss
.video-image {
  width: 92%;
  height: 400rpx;
  border-radius: 10rpx;
  margin-top: 15rpx;
  margin-left: 30rpx;
}

.container {
  flex-direction: column;
  display: flex;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  margin-left: 0rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding-bottom: 5px;
}

.video-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 10px;
  margin-left: 10px;
}
 

Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    const db = wx.cloud.database()
    db.collection("videos").where({
      _openid: this.data.fileid
    }).get({
      success: res => {
        this.setData({
          video: res.data,

        })
        console.log(res.data)
      },
      fail: err => {
        wx.showToast({
          icon: "none",
          title: '播放失敗',
        })
      }
    })



  },

  onPostTap: function(event) {
    // 獲取本頁面的id
    var videoId = event.currentTarget.dataset.videoid;
    var app = getApp();
    app.requestDetailid = videoId;
    wx.navigateTo({
      //將本頁面的id傳到需要跳轉的頁面
      url: "../comment/comment?id=" + videoId
    })
  }

})
 

【總結】

onPostTap: function(event){}這個函式我們這節暫時不解釋，這個函式的作用就是根據當前介面跳轉到當前相應的視訊播放介面。