微信小程序项目实战【三】-------实现视频列表展示

这一节我们主要介绍下如何实现视频列表展示，这里展示的数据是从云数据库里面获取显示到界面上的。

【效果展示】

【分析】

我们通过授权登录之后跳转到这个界面之后就可以看到我们自己数据库中所需要显示的视频，这里我们使用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){}这个函数我们这节暂时不解释，这个函数的作用就是根据当前界面跳转到当前相应的视频播放界面。

微信小程序项目实战【三】-------实现视频列表展示

猜你喜欢