dw网站建设怎么放在网上,推广策略英文,推荐邵阳网站建设,下载 wordpress语言包项目页面存在多个视频时#xff0c;只播放视频可见范围内单个视频播放的解决方案 QQ录屏20240326175303 在自定义组件中无onPageScroll(e)监听页面滚动的函数所以在自定义组件中用scroll-view标签包裹所有组件#xff08;以下为WXML页面源码#xff09;
scroll…项目页面存在多个视频时只播放视频可见范围内单个视频播放的解决方案 QQ录屏20240326175303 在自定义组件中无onPageScroll(e)监听页面滚动的函数所以在自定义组件中用scroll-view标签包裹所有组件以下为WXML页面源码
scroll-view scroll-y bindscrollgetScrollLength styleheight:{{scrollHeight*2rpx}}
view classcontent-box wx:for{{articleList}} wx:keyiview classuserInfo-box!-- 用户头像 --image src{{item.UserHeadImg}} mode classhead-imag classuser-image /view classname-lab-box!-- 用户昵称 --view classuser-name{{item.UserNickName}}/view!-- 用户标签 --view classuser-lab标签/view/view!-- 关注标签 --view classfollow-btn关注/view!-- 删除当前微博文章 --view classuser-delviewx/view/view/view!-- 内容区域 --view classweibo-contentview classtext-contrnt catch:tapnavGo{{item.WeiBoContent}}/view!-- 视频或图片区域 --view classweibo-content-img-videoblock wx:if{{item.WeiBoImg}}image wx:for{{item.WeiBoImg}} bind:tappreview data-urls{{item.WeiBoImg}} data-index{{number}} wx:keyi wx:for-itemimgUrl wx:for-indexnumber classweibo-content-img src{{imgUrl}} modeaspectFill //blockblock wx:if{{item.WeiBoVideo}}video controls id{{videoitem.Id}} autoplay{{false}} show-mute-btn controlsfalse custom-cachetrue direction0 classweibo-content-video src{{item.WeiBoVideo}} //block/view/view!-- 点赞转发评论区域 --view classwoo-boxview classwoo-img-box bind:taplaunchimage src../../img/weibocontent/3.1转发.png mode classicon /转发/viewview classwoo-img-boximage src../../img/weibocontent/pinglun.png mode classicon /评论/viewview classwoo-img-boximage src../../img/weibocontent/dianzan.png mode classicon /点赞/view/view
/view
/scroll-view
给每个存在video组件赋值唯一的id属性且不能为纯数字id属性(不知道为啥不行,我刚开始用的纯数字就是获取不到video的上下文)
定义组件属性列表用于接收自定义组件的父组件传过来的数据遍历 /*** 组件的属性列表*/properties: {articleList: Array, //文章集合},
在自定义组件的初始数据中定义几个数据
/*** 组件的初始数据*/data: {videoList: [], // 用于存储视频集合scrollHeight: 0, //滚动视图scroll-view组件的高度高度scrollLength: 0, //滚动距离},
在自定义组件的生命周期声明对象在组件视图布局完成后获得手机设备的屏幕可用高度,此代码中减去的83为在我本次项目中自定义组件的父组件导航的高度所以自定义组件在父组件中可用高度为屏幕可用高度减去父组件中导航的高度
/* 组件生命周期声明对象 */lifetimes: {//组件在视图层布局完成后执行attached: async function () {var {windowHeight} await wx.getSystemInfoSync();this.setData({scrollHeight: windowHeight - 83})}},
定义scroll-view组件的滚动事件监听监听滚动的距离长度if中的判断移动的距离长度大于200时才给赋值可根据实际需要调整
//获得滚动长度getScrollLength(e) {if (e.detail.scrollTop - this.data.scrollLength 200 || e.detail.scrollTop - this.data.scrollLength -200) {this.setData({scrollLength: e.detail.scrollTop, //获得滚动距离})//控制视频播放和暂停this.getVideo();}},
函数getVideo()控制自定义组件中可见范围内的视频的播放和暂停
//控制视频播放和暂停getVideo() {this.setData({videoList: []})//父组件在给自定义组件传值时都是传输的完整的新值所以在每次执行函数时清空初始数据的值this.data.articleList.forEach(item {if (item.WeiBoVideo) {this.setData({videoList: [...this.data.videoList, item]})}})//将父组件传输给自定义组件的的数据中找出存在item.WeiBoVideo的数据//将所有存在video组件的数据遍历并创建上下文 this.data.videoList.forEach(video {var id video.Id;const query this.createSelectorQuery();//创建组件上下文//依据视频组件的id通过boundingClientRect()方法获得当前视频组件的相对位置此方法为异步方法query.select(#video id).boundingClientRect(rect {//校验视频是否跑出范围rect.top意为距离滚轮组件顶部的距离每次滚轮滚动后此值都会发生变化if (rect.top 300rect.bottom100) {// 视频在可视范围内暂停它 this.playVideo(id);} else {// 视频在可视范围内暂停它 this.pauseVideo(id);}}).exec();})},
此段代码中需要留意的就是boundingClientRect()此函数为异步函数rect.top 、rect.bottom意为距离滚轮组件顶部的距离每次滚轮滚动后此值都会发生变化
视频播放函数及暂停函数在自定义组件中需要添加this参数不然无法控制自定义组件内部的播放和暂停 //视频播放playVideo(id) {const video wx.createVideoContext(video id,this);video.play();},//视频暂停pauseVideo(id) {const video wx.createVideoContext(video id,this);video.pause();},
