欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序?qū)崿F(xiàn)滾動(dòng)視頻自動(dòng)播放（未優(yōu)化） - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序?qū)崿F(xiàn)滾動(dòng)視頻自動(dòng)播放（未優(yōu)化）

發(fā)表時(shí)間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：142

先看看大概效果

1.首先需要了解微信API：

wx.createIntersectionObserver(Object component, Object options)

創(chuàng)建并返回一個(gè) IntersectionObserver 對(duì)象實(shí)例。在自定義組件或包含自定義組件的頁面中，應(yīng)使用 this.createIntersectionObserver([options]) 來代替

具體可以看微信小程序文檔

2.由于我們這個(gè)區(qū)域是一個(gè)滾動(dòng)區(qū)域，所以我用了scoll-view，最外層用scroll-view包裹

直接封裝一個(gè)組件

player.js

// pages/text/play.js
const app = getApp()
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    index: {
      type: Array,
      value: []
    }
  },
  ready() {

  },
  attached() {
    // 獲取隨機(jī)數(shù)字 給video標(biāo)簽id命名 可使用時(shí)間戳
    var random = Math.floor(Math.random() * 1000);
    // 全局獲取 屏幕高度寬度
    var { screenHeight, screenWidth } = app.globalData.systemInfo
    this.setData({
      screenHeight,
      screenWidth,
      random
    })
    var that = this
    var screenHeight = screenHeight //獲取屏幕高度

    var screenWidth = screenWidth //獲取屏幕寬度

    let topBottomPadding = screenHeight / 2
    // 獲取試圖目標(biāo)元素  
    const videoObserve = wx.createIntersectionObserver(this)
    // 設(shè)置試圖可見區(qū)域
    this.observe = videoObserve.relativeToViewport({ top: -topBottomPadding + 10, bottom: -topBottomPadding })


    // // 暫存隨機(jī)
    var random = that.data.random
    this.observe.observe(`#vids${that.data.random}`, (res) => {
      let { intersectionRatio } = res
      // var videoNow = wx.createVideoContext(res.id,that)
      if (intersectionRatio > 0) {
        //離開視界，因?yàn)橐暣罢急?gt;0，開始播放

        // that.setData({

        //   playstart: true

        // })
        //進(jìn)入視界，開始播放
        console.log('start',res);
        wx.createVideoContext(res.id,that).play()
        wx.createVideoContext('vids',that).play()
        // that.observe.disconnect()


      } else {
        // 離開試圖 暫停播放
        console.log('stop',res);
        wx.createVideoContext('vids',that).pause()

        wx.createVideoContext(res.id,that).pause()
        // that.observe.disconnect()
        // that.setData({

        //   playstart: false

        // })
      }
    })

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    list: [],
    playstart: false,
    screenHeight: "",
    screenWidth: "",
    random: '',
  },

  /**
   * 組件的方法列表
   */

  onShow() {
    
  },
  methods: {

  
  }
})

View Code

player.wxml

<view class="box" hover-class="none">
    <view class="">
        <video class="vids"  id="vids{{random}}" data-index='{{index}}' src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
    </view>
</view>

View Code