swiper视频优化

Posted 2021-03-17 dianzan

wxml

<view class="detail-container" >
  <view class="det-inner" >
    <swiper class="inner-swiper" interval="3000" duration="500" vertical="true" bindanimationfinish="changeWofan" current="{{nowIndex}}">
      <block wx:key="list" wx:for="{{videoList}}">
        <swiper-item class="swiper-only">
          <view class="only-box" wx:if="{{nowIndex>index-3}}">
            <view class="only-b-back">
              <view class="back-v">
               <view class="back-v-pic wh flexca">
                  <image mode="aspectFill" class="wh" src="{{item.videoLogo}}"></image>
                </view>
                <video id="myVideo{{item.id}}" style="{{nowIndex==index?‘‘:‘opacity:0‘}}" initial-time="{{0}}" class="back-v-start" src="{{item.videoUrl}}" controls="{{false}}" show-play-btn="{{false}}" show-fullscreen-btn="{{false}}" loop="{{false}}" show-center-play-btn="{{false}}" bindended="endVideoFn"  ></video>
               
              </view>
              <view class="back-v-zhe flexca" catchtap="startStopBtn">
                <view class="zhe-start-btn" wx:if="{{!videoStart&&index==nowIndex}}">
                  <image mode="aspectFill" class="wh" src="../../resources/pic/school_detail_star.png"></image>
                </view>
              </view>
            </view>
            <view class="only-b-btm flexa" wx:if="{{index==nowIndex}}">
              <view class="b-btm-per">
                <image wx:if="{{item.isSelf==1}}" mode="aspectFill" class="wh" src="../../../../image/home/zj_xnjz_logo.png"></image>
                <image wx:if="{{item.isSelf==0}}" mode="aspectFill" class="wh" src="{{item.logo}}"></image>
              </view>
              <view class="b-btm-text corfff ml20">
                <view class="f32" wx:if="{{item.isSelf==1}}" style="line-height:32rpx;">小鸟家装{{nowIndex+3>index}}</view>
                <view class="f32" wx:else style="line-height:32rpx;">{{item.designerUserName}}</view>
                <view class="f24 mt15" style="line-height:24rpx;">{{item.brownNum}}次播放</view>
              </view>
              <view class="b-btm-btn bgc2z corfff f24" catchtap="backHome">查看设计师</view>
            </view>
            <view class="only-b-rt" wx:if="{{index==nowIndex}}">
              <view class="b-rt-pic flexca">
                <button class="b-rt-pic-btn wh" open-type="share">
                  <image mode="aspectFill" class="wh" src="../../resources/pic/school_detail_share.png"></image>
                </button>
              </view>
              <view class="b-rt-text tc">分享</view>
            </view>
            <view class="only-b-before" wx:if="{{endVideo&&index==nowIndex}}">
              <view class="b-before-in">
                <view class="before-in-top flexb">
                  <view class="in-top-tem" catchtap="play">
                    <view class="top-tem-box">
                      <image class="wh" src="../../resources/pic/school_detail_restart.png"></image>
                    </view>
                    <view class="tem-box-text corfff f32">
                      <view class="tc box-text-t">重播</view>
                    </view>
                  </view>
                  <view class="in-top-tem">
                    <view class="top-tem-box">
                      <button class="b-rt-pic-btn wh" open-type="share">
                        <image class="wh" src="../../resources/pic/school_detail_bieshare.png"></image>
                      </button>
                    </view>
                    <view class="tem-box-text corfff f32">
                      <view class="tc box-text-t">分享给好友</view>
                    </view>
                  </view>
                </view>
                <view class="before-in-dwon">
                  <view class="dwon-pic">
                    <image class="wh" src="../../resources/pic/school_detail_up.png"></image>
                  </view>
                  <view class="f26 corfff tc mt5">上滑查看更多</view>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
   

    <view class="det-back corfff flexa" wx:if="{{!cheuid}}" catchtap="backFn">
      <view class="det-back-lf">
        <image class="wh" src="../../../../image/flow/flow_rt.png"></image>
      </view>
    </view>
    <view class="det-end tc pb10" wx:if="{{nowIndex==(videoList.length-1)}}">
      <text class="cor9 f26">没有更多数据了</text>
    </view>
    <view class="det-start tc pt50" wx:if="{{nowIndex==0}}">
      <text class="cor9 f26">已经到顶了</text>
    </view>
  </view>

</view>

 

wxss

page {
  width: 100%;
  height: 100%;
  background-color: #000
}

.detail-container {
  width: 100%;
  height: 100%;
}
.det-back{
  width: 20%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 24rpx;
  padding-top: 35px;
  z-index: 20;
}
.det-back-lf{
  width: 20rpx;
  height: 38rpx;
  transform: rotateY(180deg);
}
.det-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.inner-swiper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.swiper-only {
  position: relative;
}

.only-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.only-b-back {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.back-v{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.back-v-start{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.back-v-pic{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.back-v-zhe{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
}
.zhe-start-btn{
  width: 100rpx;
  height: 100rpx;
  animation: danru 1s ease;
}
@keyframes danru {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
.only-b-btm{
  position: absolute;
  left: 24rpx;
  bottom: 100rpx;
  z-index: 10;
}
.b-btm-per{
  width: 100rpx;
  height: 100rpx;
  background-color: #fff;
  border-radius: 50%;
  overflow: hidden;
}
.b-btm-btn{
  width: 165rpx;
  height: 70rpx;
  border-radius: 5rpx;
  margin-left: 45rpx;
  text-align: center;
  line-height: 70rpx;
}
.only-b-rt{
  width: 90rpx;
  height: 90rpx;
  position: absolute;
  right: 24rpx;
  bottom: 450rpx;
  z-index: 10;
  overflow: visible;
}
.b-rt-pic{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  
 
}
.b-rt-text{
  width: 100%;
  color: #fff;
  font-size: 30rpx;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 10rpx;
}
.b-rt-pic-btn{
    background-color: transparent;
  border: 1px solid transparent;
   padding: 0;
   overflow: hidden;
}

.b-rt-pic-btn:after {
  border: 0;
}
.only-b-before{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  background-color: rgba(0,0,0,0.7);
}
.b-before-in{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-bottom: 330rpx;
}
.before-in-top{
  width: 375rpx;
  margin: 0 auto;
}
.in-top-tem{
  width: 100rpx;
  position: relative;
}
.top-tem-box{
  width: 100rpx;
  height: 100rpx;
}
.tem-box-text{
  width: 100%;
  position: absolute;
  left: 0;
 top: 100%;

}
.box-text-t{
    padding-top: 20rpx;
  width: 200rpx;
  position: relative;
 transform: translateX(-25%);
}
.before-in-dwon{
  width: 375rpx;
margin: 0 auto;
margin-top: 110rpx;
}
.dwon-pic{
  width: 45rpx;
  height: 45rpx;
  margin: 0 auto;
}
.det-end{
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
.det-start{
    width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

js

const FZ = require(‘../../../../util/util.js‘);
const Upj = require(‘../../../../util/user.js‘);

// const videoList = urls.map((url, index) => ({ id: index + 1, url }))
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoList: [],
    nowIndex: 0,
    videoStart: true,
    endVideo: false,
    pageNo: 2,
    chetype: ‘‘,
    checolumid: ‘‘,
    cheuid: ‘‘,
    cheVideoid: 0, //dom 的id
  },
  backFn: function() {
    wx.navigateBack({
      delta: 1
    })

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(opt) {
    let that = this;
    let cheuid = ‘‘;
    let jsonParam = JSON.parse(decodeURIComponent(opt.jsonParam));
    let user = wx.getStorageSync(‘user‘);
    console.log(opt)
    console.log(jsonParam)
    let chenowIndex = 0;
    if (opt.index) {
      chenowIndex = opt.index;
    }
    if (opt.cheuid) {
      cheuid = opt.cheuid;
    }
    console.log(chenowIndex)
    console.log(cheuid)
    // this.setData({ videoList: [jsonParam] })
    let videoList = jsonParam;
    for (let i = 0; i < videoList.length;i++){
      videoList[i].url = videoList[i].videoUrl;
    }
    console.log(videoList)
    this.setData({
      cheuid,
      videoList,
      nowIndex: chenowIndex,
      pageNo: (jsonParam[jsonParam.length - 1].page + 1),
      chetype: opt.type,
      checolumid: opt.columid
    })
    if (!user) {
      that.startLogin();
    }
    if (user) {
      if (chenowIndex > (jsonParam.length - 2)) {
        this.nexVideoList()
      }
      this.detailFn();
    }
  },
  backHome: function() {
    wx.switchTab({
      url: ‘/page/tabBar/home/index‘
    })
  },
  onReady() {

    
    let videoList = this.data.videoList;
    let nowIndex = this.data.nowIndex;
    this.videoCtx = wx.createVideoContext(‘myVideo‘ + videoList[nowIndex].id)
    console.log(videoList)
    this.videoCtx.play()
  },
  startStopBtn() {
    let videoStart = this.data.videoStart;
    if (videoStart) {
      this.pause()
    } else {
      this.play()
    }
  },
  play() {

    console.log(1)
    this.videoCtx.play()
    this.setData({
      videoStart: true,
      endVideo: false
    })
  
   
  },
  detailFn() {
    let that = this;
    let nowIndex = this.data.nowIndex;
    let videoList = this.data.videoList;
    let user = wx.getStorageSync(‘user‘);
    if (!user){return}
    let datVal = {
      userId: user.id,
      contentId: videoList[nowIndex].id
    }
    console.log(datVal)
    FZ._postJ3(‘column/v1/columncontentdetail‘, datVal).then(function(data) {
      console.log(data)
      let resoult = data.data;

      if (resoult) {
      } else {
        if (data.message != "正常") {
          wx.showToast({
            icon: ‘none‘,
            title: data.message,
          })
        }
      }
    })
  },
  haveEndAddfn:function(e){

  },
  pause() {
    console.log(2)
    this.videoCtx.pause()
    this.setData({
      videoStart: false
    })
  },

  changeWofan: function (e) {
    console.log(e)
    this.videoCtx.pause()
    let videoList = this.data.videoList;
    this.videoCtx = wx.createVideoContext(‘myVideo‘ + videoList[e.detail.current].id)

    console.log(e.detail.current)
    this.setData({
      cheVideoid: videoList[e.detail.current].id,
      endVideo: false,
      nowIndex: e.detail.current,
      videoStart: true,
    })
    this.videoCtx.play()



    this.detailFn();
    console.log(e.detail.current, ‘dangqian‘)
    if (e.detail.current == (videoList.length - 2)) {

      console.log(this.data.pageNo)
      this.nexVideoList()
    }


  },
  // 加载更多
  nexVideoList: function() {
    let that = this;
    let pageNo = this.data.pageNo;
    let navItem = this.data.navItem;
    let user = wx.getStorageSync(‘user‘);
    let videoList = this.data.videoList;
    let chetype = this.data.chetype;
    let checolumid = this.data.checolumid;
    let nowIndex = this.data.nowIndex;
    let datVal = {
      userId: user.id,
      type: chetype,
      columnId: checolumid,
      pageSize: 10,
      pageNo: pageNo
    }
    console.log("啥情况")
    FZ._postJ3(‘column/v1/listcolumncontents‘, datVal).then(function(data) {
      console.log(data)
      let resoult = data.data;
      if (resoult) {
        if (resoult.length > 0) {
          for (let i = 0; i < resoult.length; i++) {
            resoult[i].url = resoult[i].videoUrl;
          }
          videoList = videoList.concat(resoult)
          console.log(videoList)
          pageNo++
          that.setData({
            videoList: videoList,
            pageNo
          });
        } else {
          // that.setData({
          //   pageTottomText: getApp().globalData.endText
          // });
          if (videoList.length - 1 == nowIndex) {
            wx.showToast({
              title: ‘没有更多数据了‘,
              icon: ‘none‘,
              duration: 2000
            })
          }
        }


      } else {
        if (data.message != "正常") {
          wx.showToast({
            icon: ‘none‘,
            title: data.message,
          })
        }
      }
    })
  },
  // 视频播放结束
  endVideoFn: function() {
    console.log("播放结算")
    this.setData({
      endVideo: true
    })
  },

  // 初始注册--------------------------------
  // 初始注册
  startLogin: function() {

    let that = this;
    try {

      Upj._start_Login(that.data.cheuid).then((data) => {
        let resoult = data;
        if (resoult) {
          that.setData({
            user: resoult
          })
          wx.setStorageSync(‘user‘, resoult);
          // console.log("1这是成功")
          // console.log(that.data.nowIndex)
          // console.log(that.data.videoList.length - 2)
          if (that.data.nowIndex > (that.data.videoList.length - 3)) {
            // console.log("2这是成功")
            that.nexVideoList()
          }
          this.detailFn();
        } else {
          wx.showToast({
            title: data.message,
            icon: ‘none‘,
            duration: 3000
          })

        }

      }).catch((data) => {
        wx.showToast({
          title: data.message,
          icon: ‘none‘,
          duration: 3000
        })
      })
    } catch (err) {
      console.log(err)
    }
  },
  onShareAppMessage: function(e) {
    let that = this;
    let user = wx.getStorageSync(‘user‘);
    let cityon = wx.getStorageSync(‘cityon‘);
    let shareTitle = ‘‘;
    let videoList = this.data.videoList;
    let nowIndex = this.data.nowIndex;
    let imageUrl = ‘‘;
    console.log("转发数据")
    console.log()

    if (videoList[nowIndex].videoLogo) {
      imageUrl = videoList[nowIndex].videoLogo;
    }
    try {

      return {
        title: shareTitle,
        imageUrl: imageUrl,
        path: ‘/page/school/pages/study/detail?cheuid=‘ + user.id + "&jsonParam=" + encodeURIComponent(JSON.stringify(videoList)) + ‘&index=‘ + nowIndex + ‘&type=‘ + this.data.chetype + ‘&columid=‘ + this.data.checolumid,
        success: function(res) {
          console.log(res)
        },
        fail: function(res) {}
      }
    } catch (e) {
      console.log(e)
    }
  },
})