<template>
<view class="page">
<video class="video" @timeupdate='timeupdate' id="demoVideo" ref='video' :controls='false' :enable-progress-gesture="false" :show-center-play-btn='false' src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v">
<cover-view class="cover-container" @click="clickHandler">
<cover-image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590379274563&di=a7e5b73d097d16b14eebdb3d639bd06c&imgtype=0&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D213623723%2C2520951995%26fm%3D214%26gp%3D0.jpg" ></cover-image>
<cover-image class="controls-play img" @click.stop="play" src="/static/play.png" v-if="status==='pause'"></cover-image>
<cover-image class="controls-pause img" @click.stop="pause" src="/static/pause.png" v-if="status==='play'"></cover-image>
<cover-view class="controls-container flex row" >
<!-- #ifndef APP-NVUE -->
<cover-view class="time">{{time|formateTime}}</cover-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<cover-view class="time"><text class="time-text">{{time|formateTime}}</text></cover-view>
<!-- #endif -->
<cover-view style="flex: 1;" class="progress-container">
<slider value="10" @change="sliderChange" min="0" max="100" block-size='10' activeColor="#f7662d" block-color='#f7662d'/>
</cover-view>
<!-- #ifndef APP-NVUE -->
<cover-view class="time">{{duration|formateTime}}</cover-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
<cover-view class="time"><text class="time-text">{{duration|formateTime}}</text></cover-view>
<!-- #endif -->
</cover-view>
</cover-view>
<!-- <view style="width: 200upx;height: 300upx;background-color: #007AFF;" >
222
</view> -->
</video>
</view>
</template>
<script>
export default {
data() {
return {
status:'pause',
time:26,
duration:3800
}
},
mounted() {
this.videoCtx = uni.createVideoContext('demoVideo')
const query=uni.createSelectorQuery().in(this)
console.log(query.select('#demoVideo'))
},
filters:{
formateTime(time){
let h=Math.floor(time/3600).toString().padStart(2,'0')
let m=Math.floor((time%3600)/60).toString().padStart(2,'0')
let s=Math.floor(time%60).toString().padStart(2,'0')
return `${m}:${s}`
}
},
methods: {
play(event) {
this.videoCtx.play();
uni.showToast({
title: '开始播放',
icon: 'none'
});
this.status='play'
},
pause(event) {
this.videoCtx.pause();
uni.showToast({
title: '暂停播放',
icon: 'none'
});
this.status='pause'
},
clickHandler(){
console.log('点击')
},
timeupdate(e)
{
console.log(e)
},
sliderChange(){
}
}
}
</script>
<style>
@font-face {
font-family: 'iconfont'; /* project id 1837686 */
src: url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.eot');
src: url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.woff') format('woff'),
url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1837686_mqomj8xlsi.svg#iconfont') format('svg');
}
.flex{
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
}
.row{
flex-direction: row;
}
.column{
flex-direction: column;
}
.video {
position: relative;
width: 750upx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.img {
position: absolute;
top: 220upx;
left: 375upx;
transform: translate(-50%,-50%);
width: 100rpx;
height: 100rpx;
/* margin-top: -50rpx; */
}
.controls-play {
/* left: 50rpx; */
}
.controls-pause {
/* right: 50rpx; */
}
.controls-container {
width: 750upx;
bottom: 0;
position: absolute;
/* padding: 20upx 0; */
background-color: rgba(0, 0, 0, 0.5);
}
.cover-container{
width: 750upx;
height: 100%;
flex: 1;
position: relative;
}
.time{
color: #FFFFFF;
margin-left: 10upx;
margin-right: 10upx;
font-size: 22upx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.time-text{
color: #FFFFFF;
font-size: 22upx;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.progress-container{
position: relative;
/* margin: 0 20upx; */
}
</style>

- 发布:2020-05-25 09:32
- 更新:2020-05-25 09:32
- 阅读:995
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 2.7.7
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: 荣耀20
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
使用nvue运行上面代码
使用nvue运行上面代码
预期结果:
slider组件的滑块在nvue中位置渲染正确
slider组件的滑块在nvue中位置渲染正确
实际结果:
slider组件的滑块在nvue中位置渲染不正确
slider组件的滑块在nvue中位置渲染不正确
bug描述:
slider组件的滑块在nvue中位置渲染不正确
