uniapp ----小程序上下滑动页面，视频自动播放（完整代码）

<template><view class="box"><f-navbar title="视频详情" navbarType='3'></f-navbar><!-- 注意：这是 H5、微信小程序界面，请勿和 new_index.nvue、index.nvue 混用1. new_index.nvue、index.nvue这两个是App页面2. 另外：data.js 是上一版本留下的假数据，这一版改成了 URL 请求了（如不需要可以删除，也可作为后端请求参考）3. 请各位大神多多留手，我已经把请求内存开到最大了4. 视频 id 切记是字符串类型 --><!-- #ifdef MP --><view class="bgx":style="{height:(windowHeight)+'px',background: 'linear-gradient(to top, rgba('+dataList[k].bkcolor.top+'), rgba('+dataList[k].bkcolor.bottom+'))'}"></view><swiper class="sv-swiper" :style="'width: '+ windowWidth +'px; height: '+ 89 +'%;'" :vertical="true"@animationfinish="animationfinish" @change="change" :current="current" :indicator-dots="false"@touchstart="mpTouchstart" @touchend="mpTouchend"><swiper-item v-for="(item,index) in dataList" :key="index"><view v-if="Math.abs(k-index)<=1" :class="item.font_color==0?'colorFFF':'color101010'"><view><!-- (windowHeight-statusbarH)1.v-if：用于控制视频在节点的渲染数2.muted的默认值是 false，代表默认是禁音视频的3.http-cache默认开启视频缓存4.poster（封面（方案一））：这里的封面默认处理存储在阿里云的视频5.show-loading：这里默认去掉播放转圈的标志v-if="Math.abs(k-index)<=1"--><video v-if="isShow" :id="item.id+''+index" loop autoplay :muted="item.isplay" controls:show-play-btn="false" :custom-cache="false" :http-cache="true" :show-fullscreen-btn="true":show-loading="false" :show-center-play-btn="false" enable-progress-gesture :src="item.path"@ended="ended" @click="tapVideoHover(item.state,$event)":style="'width: '+ windowWidth +'px; height: '+ vplayHei +'rpx;z-index: 9;'":poster="item.bkimg" @fullscreenchange.stop="fullscreenchange"></video><view class="contz  widP100" @click="tapVideoHover(item.state,$event)"><view class="widP100 paddingA20 paddB0 fontSize16 boxSize linHeight40 wordWarp ellipsis">{{item.title}}</view><view class="widP100 fontSize12 paddL20 paddT20 boxSize"><text user-select="auto">{{item.bv}}</text></view><view class="widP100 paddingA20  boxSize display linHeight40 wenzi":style="{height:descHeight+'rpx'}"><view class="fontSize12 texts widP100"><!-- <text :style="{lineHeight: '30rpx'}"class="paddB20">{{item.detail.length>detNum? item.detail.slice(0, (detNum-1)):item.detail}}</text>--><text :id="'getLinehei'+item.id" :style="{lineHeight: '30rpx'}"class="paddB20">{{lineCount>conAll?details:item.detail}}</text><span v-if="lineCount>conAll">{{item.fold ? details:'...'}}<span class="fontSize12 paddL10" @click.stop="foldBtn(item.id)"><span v-show="!item.fold">展开<textclass="iconfont icon-shixinjiantou-xia fontSize12"></text></span><span v-show="item.fold">收起<textclass="iconfont icon-shixinjiantou-shang fontSize12"></text></span></span></span></view></view><!-- item.relation_type 0未关联  1关联健身房  2关联商品(暂时没有) --><view class="kuai widP100 display  fontSize14 marT10":class="item.font_color==0?'colorW':'colorB'" v-if="!item.fold"><text class="FontCenter widP100" v-show="item.relation_type != 0 "@click.stop="goJsf(item.relation_detail.id,item.relation_detail.name,item.relation_type)"><text class="iconfont icon-charulianjie fontSize14"></text><text class="paddL20">{{item.relation_type==1?'运动':'购物'}}</text><textclass="paddL10">|</text><textclass="paddL10">{{item.relation_detail.name}}</text></text></view><view class="paddingA20 boxSize widP100 display" v-show="!item.fold"><image class="widHei36 " :src="item.avatar" @click.stop="goMueber(item.uid)"mode="aspectFill"></image><view class="widP60 marL20 FontLeft " @click.stop="goMueber(item.uid)"><view class="fontSize14 marT10 ">{{item.nickname}}</view><view class="fontSize10 ellipsis widP100">{{item.signature}}</view></view><view class="guanzhu fontSize12 marT10" :class="item.font_color==0?'':'guanzhu1 '"@click.stop="followBtn(item.uid,item.id)">{{item.is_follow==0?'关注':'已关注'}}</view></view><view class="followShare widP100 display " v-if="!item.fold":class="item.font_color==0?'colorW':'colorB'"><view class="" @click.stop="collectORNot(item.id)"><button hover-class="none" :class="item.font_color==0?'colorFFF':'color101010'"><text :class="item.is_collect?'icon-shoucang':'icon-shoucang1'"class="iconfont iconSize20 fontSize20"></text><text class="paddL10">{{item.collect_num}}</text></button></view><view class=""><button open-type="share" hover-class="none":class="item.font_color==0?'colorFFF':'color101010'"><text class="iconfont icon-fenxiang1 iconSize20 fontSize20"></text><text class="paddL10">{{item.share_num}}</text></button></view><view class="" @click.stop="clickComment(item.id)"><button hover-class="none" :class="item.font_color==0?'colorFFF':'color101010'"><text class="iconfont icon-xinxi1 iconSize20 fontSize20"></text><text class="paddL10">{{item.comments_num}}</text></button></view><view class="" @click.stop="likeORNotLike(item.id)"><button hover-class="none" :class="item.font_color==0?'colorFFF':'color101010'"><text :class="item.is_like?'icon-dianzan_kuai':'icon-dianzan'"class="iconfont  iconSize20 fontSize20"></text><text class="paddL10">{{item.like_num}}</text></button></view></view></view><view class="adz widP100 paddL20 paddR20  boxSize marB26 " :style="{height:adHeight+'rpx'}"v-if="!shouldShowAd && !item.fold"><image class="imgz" :src="dataList[k+1].bkimg" mode="aspectFill"></image></view><view class="widP100 paddL20 paddR20  boxSize marB20 adz" v-show="shouldShowAd && !item.fold ":style="{height:adHeight+'rpx'}"><advertising ref="advertising" :type='2'></advertising></view></view></view></swiper-item></swiper><view class="masks" v-if="isShowComment" @click.stop="clickComment(2)"></view><view class="commentBox" v-if="isShowComment"><hb-comment ref="hbComment" @submitComment="submitComment" @del="delVidoeComment" @like="likeBtn"@focusOn="focusOn" @inputOn="inputOn" :deleteTip="'确认删除此条评论吗？'" :vid="vid" :cmData="commentData"v-if="commentData"></hb-comment></view><!-- #endif --></view>
</template><script>// import userList from '../new_index/data.js'//这个是假数据let audo = uni.createInnerAudioContext()audo.loop = trueexport default {data() {return {authorid: '', //他人视频idwindowWidth: 0,windowHeight: 0, // 可视屏幕高度platform: "",model: "",deleteHeight: 0,dataList: [],k: 0,oldVideo: "",voice: "",timeout: "",current: 0,boxStyle: { //视频，图片封面样式												


											

uniapp ----小程序上下滑动页面，视频自动播放（完整代码）相关推荐
	

    
								
  1. uni-app 小程序上下滑动问题的解决
		
    uni-app 小程序上下滑动问题的解决 swiper套用swiper-item,可以进行横向滑动切换tab,但是每一个swiper-item里无法上下滑动 问题分析 <原版结构图片> 数 ...
    
		
    2. 
						
  2. uniapp 小程序左右滑动切换不同图片序列帧，实现3d效果
		
    uniapp 小程序左右滑动切换不同图片序列帧,实现3d效果 最近接了个新的需求,将多张序列帧图片,通过程序滑动加载不同的序列帧,给用户看到的效果就好像3d那样,360度顺逆时针旋转,一开始尝试了两种 ...
    
		
    3. 
						
  3. 微信小程序实现上传视频功能（后端代码是java）
		
    微信小程序实现上传视频功能(后端代码是java) 1.前端 ​ wxml文件 <image bindtap="uploadVideo" length="3" ...
    
		
    4. 
						
  4. 【微信小程序】自定义弹窗蒙版输入框效果图完整代码
		
    [微信小程序]自定义弹窗文本输入框效果图&完整代码 效果图 在输入框中进行内容的输入 点击确认后在姓名一栏进行更新修改 点击返回后姓名一栏不做任何修改 在这个的基础上你可以自定义任何弹窗 wx ...
    
		
    5. 
						
  5. [微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
		
    相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
    
		
    6. 
						
  6. uniapp小程序腾讯云视频调用实现1V1会话和踩坑分享
		
    第一步:下载官方demo,附地址:https://github.com/undefineders/WXMiniByUniapp-TRTC,然后导入本地HbuilderX中,运行到小程序,如果运行成功进 ...
    
		
    7. 
						
  7. uni-app中，小程序或h5页面背景音乐的播放与暂停
		
    在uni-app中写小程序或h5页面时,用到背景音乐,以及图标的旋转动画 一.创建music.js 放在static或新建文件夹 const bgm = uni.createInnerAudioCon ...
    
		
    8. 
						
  8. 微信小程序禁止页面上下滑动；uni-app微信小程序禁止页面上下滑动；uni-app小程序上下滑动；
		
    阻止小程序某个页面上下滑动,最简单有效方法:直接对小程序当前页的最外层标签盒子,设置固定定位即可! 设置固定定位后,页面的最大盒子宽度可能不是自动撑满的,那就自己在calc计算下宽度即可 .box { ...
    
		
    9. 
						
  9. uni-app小程序加载页面出现图片拉长再变正常的原因
		
    在使用uniapp写微信小程序的页面样式的时候,你会发现一个现象就是加载图片的时候回先变长然后在正常显示,在pc端和app端没有问题. 这个原因是因为图片高度是自适应的,没有给固定高度. 解决方案就是 ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. Github 代码上边的Raw、Blame、History是啥意思？
		
    2. 
						
  2. 用Ghostscript API将PDF格式转换为图像格式(C#)
		
    3. 
						
  3. 【Java面试题视频讲解】提取不重复的整数
		
    4. 
						
  4. mysql command为sleep时项目可以连接_Mysql中Sleep进程连接数过多问题解决
		
    5. 
						
  5. html图片标签和语义化标签和音频
		
    6. 
						
  6. 普通调幅（AM）与包络检波（matlab实现）
		
    7. 
						
  7. 困难是成功路上的垫脚石_Java是开发的垫脚石。 学习吧！
		
    8. 
						
  8. 3-5 单链表分段逆转 (20 分)
		
    9. 
						
  9. Java异常处理001：Maven clean package时Failed to clean project: Failed to delete
		
    10. 
						
  10. Scala下载及安装（Windows）以及Idea中Scala项目的创建
		
    11. 
						
  11. 知识总结2：Django常见面试题总结（持续更新）
		
    12. 
						
  12. cubic算法优化_CUBIC拥塞拥塞控制算法
		
    13. 
						
  13. USDP使用笔记（二） 部署免费的USDP大数据双集群替代CDH CDP与HDP
		
    14. 
						
  14. [小白入门]SEO优化是什么意思?4步骤掌握SEO网站优
		
    15. 
						
  15. 内存超频trfc_P55平台内存超频实战
		
    16. 
						
  16. 计算机系统用户登录密码错误,电脑开机密码正确却进不去,老提示密码错误
		
    17. 
						
  17. 孤单是对你最好的惩罚
		
    18. 
						
  18. Android 记事本
		
    19. 
						
  19. Spring Cloud 系列之 ZooKeeper 注册中心
		
    20. 
						
  20. Online Learning and Pricing with Reusable Resources: Linear Bandits with Sub-Exponential Rewards: Li
		
    21. 
		

	


热门文章
	

    
									
  1. ARM工控主板LS1012A
			
    2. 
						
  2. HINSTANCE/HWND/CWnd/HANDLE 的区别
			
    3. 
						
  3. Java开源 ERP与客户管理－Sequoia ERP
			
    4. 
						
  4. 大公司，一般都怎么开会？
			
    5. 
						
  5. 无人驾驶模型预测控制（五）-基于动力学模型的无人驾驶车辆主动转向控制
			
    6. 
						
  6. 物理层技术前沿_西安交通大学：通信网络安全先进技术研讨会：密码安全专场...
			
    7. 
						
  7. 【STM32F411RE和L610物联网入门学习笔记】
			
    8. 
						
  8. 【硬刚Hive】HIVE高级(8):优化(8) Explain 查看执行计划（二）
			
    9. 
						
  9. 居上无宦乐，达人不折腰
			
    10. 
						
  10. 国自然php代码,2020国自然单细胞项目申请——你的学科代码申请对了吗? | 单细胞专题之国基金...
			
    11.