微信小程序项目实战三-实现视频列表展示-微信视频展示小程序-微信小程序视频上传-即速应用

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

浏览量：1520 时间：2020-04-06 来源：流年若逝

1.
这一节我们主要介绍下如何实现视频列表展示，这里展示的数据是从云数据库里面获取显示到界面上的。
2.
【效果展示】
3.
【分析】
4.
我们通过授权登录之后跳转到这个界面之后就可以看到我们自己数据库中所需要显示的视频，这里我们使用block标签以及wx:for来实现遍历我们需要显示的视频。
5.
因为wx:if是一个控制属性，需要将它添加到一个标签上，如果需要一次性判断多个组件标签，可以使用一个block/将多个组件包装起来，并在上边使用wx:for控制属性。
6.
【代码展示】
//welcome.xmlviewclass"container"blockwx:for"{{video}}"wx:for-item"item"viewcatchtap'onPostTap'data-videoId'{{item.videoId}}'textclass"video-title"{{item.title}}/textimageclass"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:1pxsolid#ededed;border-top:1pxsolid#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){constdbwx.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){//获取本页面的idvarvideoIdevent.currentTarget.dataset.videoid;varappgetApp();app.requestDetailidvideoId;wx.navigateTo({//将本页面的id传到需要跳转的页面url:"../comment/comment?id"+videoId})}})7.
【总结】
8.
onPostTap:function(event){}这个函数我们这节暂时不解释，这个函数的作用就是根据当前界面跳转到当前相应的视频播放界面。