小程序开发实战——视频展示页面

拼搏现实的明天。 2021-07-25 11:36 432阅读 0赞

# 视频展示页面 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

QQ 1285575001  
Wechat M010527  
技术交流 QQ群599020441  
纪年科技aming

--------------------

#### 业务逻辑 ####

*  首页 列表循环展示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]

<view wx:for="{
       {videoList}}" class="item-container">  
    //列表查询 展示

*  （封面图 + 底色图）

<view  style='width:{
       {screenWidth}}px;  height:210px;'    class='back-img'  > 
     <image 
     src="{
       {serverUrl}}{
       {item.coverPath}}"
      style='width:{
       {screenWidth}}px;height:210px;' 
      mode="aspectFit" 
      bindtap='showVideoInfo' 
      data-arrindex='{
       {index}}'>   // 列表循环data 对于详情页面跳转动作应用
      </image>
     </view> 
    //底色背景图 + 视频截图
    // 动态调节尺寸

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]

*  尺寸动态调节

data: { 
        screenWidth: 350, 
      },

var me = this;
        var screenWidth = wx.getSystemInfoSync().screenWidth;
        me.setData({
          screenWidth: screenWidth,
        });

*  css背景

.back-img{
        display: block; 
        background-color: black;
    }

*  点击单个页面 跳到 详情页面 进行播放

showVideoInfo: function(e) {
        var me = this;
        var videoList = me.data.videoList;
        var arrindex = e.target.dataset.arrindex;
        var videoInfo = JSON.stringify(videoList[arrindex]);
    
        wx.redirectTo({
          url: ' /xxxxx?xxxx=' + videoInfo
        })
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/cb84c5921deb453ea870c198aeb114ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]: /images/20210725/ec722963e38e482fb0a4465be86bd680.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]: /images/20210725/639ecadf825942a69688bd5c63938fde.png