小程序視頻組件和底部動畫彈框

前言

近期對前段時間作的電商小程序的商品詳情作了一些優化，主要涉及到視頻播放和底部彈起彈框，所以來作一下總結

視頻組件化

視頻在電商系統中，是一個很常見的功能，在不少地方都會用到，所以，能夠封裝成一個組件，以供多處使用，當頁面滑動的過程當中，視頻進入不可見區域，視頻暫停播放

WXML

<view class="video-box">
  <video class='c_video' id="myVideo" src="{{videoUrl}}" controls show-center-play-btn='{{false}}'    wx:if='{{!showCover}}' show-fullscreen-btn='{{false}}' bindended='playEnd' show-play-btn='{{false}}'>
    <image class='pause_img' src='/static/newIcon/video-{{isPlay ? "pause":"play"}}.png' bindtap="play"></image>
  </video>
  <view class="controls f_row f_r_cnt f_jc_cnt" bindtap='toPlay' wx:else='{{showCover}}'>
    <image lazy-load src="{{coverUrl}}" class='slide_img' />
    <image class='pause_img' src='/static/newIcon/video-play.png'></image>
  </view>
</view>
複製代碼

js

Component({
  properties: {
   //視頻url
    videoUrl: {
      type: String,
      value: ''
    },
    //視頻封面圖
    coverUrl: {
      type: String,
      value: ''
    }
  },
  lifetimes: {
    attached() {
    //能夠自動"觀察"元素是否可見
    //wx.createIntersectionObserver(Object component, Object options)
    /**建立並返回一個 IntersectionObserver 對象實例。在自定義組件或包含自定義組件的頁面中，應使用 *this.createIntersectionObserver([options]) 來代替 **/
      this._observer = this.createIntersectionObserver()
      this._observer.relativeToViewport()
        .observe('.video-box', (res) => {
          if(this.data.isPlay){
            this.setData({
              isPlay:false
            })
            this.videoCtx.pause()
          }
        })
    }
  },
  data: {showCover: true},
  methods: {
   //點擊播放按鈕，封面圖片隱藏,播放視頻
    toPlay(e) { 
      if (!this.videoCtx) {
        //wx.createVideoContext(string id, Object this)用於建立video上下文
        /** id video組件的id this 在自定義組件下，當前組件實例的this，以操做組件內 video 組件 **/
        this.videoCtx = wx.createVideoContext('myVideo', this)
      }
      this.videoCtx.play()
      this.setData({
        showCover: false,
        isPlay: true
      })
    },
    //暫停、播放視頻
    play() {
      let {
        isPlay
      } = this.data
      isPlay = !isPlay
      this.setData({
        isPlay: isPlay
      })
      if (isPlay) {
        this.videoCtx.play()
      } else {
        this.videoCtx.pause()
      }
    },
    //視頻播放完成之後 顯示視頻封面圖
    playEnd() {
      this.setData({
        showCover: true
      })
    }
  }
})
複製代碼

小程序對IntersectionObserver對象和視頻都進行了部分封裝，使用起來也比較方便
具體的IntersectionObserver API的使用方法能夠查看：www.ruanyifeng.com/blog/2016/1…

底部動畫彈框

底部彈框也是相對而言一個很常見的功能，可是太過生硬的彈框，會給人一種很差的體驗， 因此通常在作彈框的過程當中，會給彈框添加一些動畫特效，優化用戶體驗（通常彈框都會是fixed或者absolute不存在文檔流中，因此不存在迴流，對性能影響不大）,這裏實現底部動畫彈框，主要用到的是transform 和 transition，這個也常常用到，也能夠封裝成組件的形式

WXML

<view class="pop_prop_box {{showShare ? 'm_slideUp':''}}" catchtouchmove='preventClose' >
  <view class="mask" bindtap='closePopup'></view>
  <view class="m_bot_box f_col">
    <view class="service_titile" wx:if='{{viewTitle}}'>
      <text class="txt">{{viewTitle}}</text>
    </view>
    <image class="icon-close" src='/static/newIcon/goods-close.png' bindtap="closePopup" wx:if='{{showCloseIcon}}'></image>
    <slot></slot>
    <view class='service_finish bgb_color' bindtap="closePopup" wx:if='{{showFinish}}'>完成</view>
  </view>
</view>
複製代碼

WXSS

.pop_prop_box {
  position: fixed;
  width: 100%;
  z-index: 99;
  bottom: 0;
  left: 0;
}

.mask {
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
  z-index: 99;
  display: none;
}

.m_slideUp .mask{
  display: block;
}

.m_bot_box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out 0.08s;
  transform: translate3d(0, 200%, 0);
  z-index: 101;
  background: #fff;
  color: #333;
  border-radius: 16rpx 16rpx 0 0;
}

.m_slideUp .m_bot_box {
  transform: translate3d(0, 0, 0);
}
複製代碼

這裏簡單的運用 transform 和 transition的基本特性，實現了簡單的向上彈起的動效，左右動畫也差很少的方法，有興趣的人能夠去用一個其餘特性，另外這種方式實現的時候要注意position：fixed定位生效的背景，有須要瞭解的同窗，能夠看一下這片文章：www.cnblogs.com/coco1s/p/73…

總結

此次實現視頻組件化和頂部動畫彈框，讓我對css3 的動畫特性，有了更深入的瞭解，以及IntersectionObserver API的基本使用和功能，積累更多的知識，以便解決更多的需求和問題