简易的视频播放器的制作以及进度条

效果图如下

用到的组件是slider

属性名 作用 默认值
min 滑动器最小值 0
max 滑动器最大值 100
step 步长,取值必须大于 0,并且可被(max - min)整除 1
disabled 是否禁用 false
color 背景条的颜色(请使用 backgroundColor) #e9e9e9
selected-color 已选择的颜色(请使用 activeColor) #1aad19
activeColor 已选择的颜色 #1aad19
backgroundColor 背景条的颜色 #e9e9e9
show-value 是否显示当前 value true/false 默认false
bindchange 事件监听e.detail.value获取当前值
  • wxml界面实现
<view class='title-line'>
  slider
</view>
<view class="video">
  <image class="video" src="{{videoUrl}}"></image>
  <view class="row">
    <text>{{slideNum}}:00</text>
    <slider class="slider" 
            bindchange="sliderchange" 
            step="1" 
            min="0" 
            max="50"></slider>
    <text>50:00</text>
  </view>
</view>
<!-- min 设置视频最小进度值, max 设置视频最大进度值 -->
<!-- bindchange 事件监听设置 -->
  • wxss样式实现
/* pages/order/order.wxss */
.video
{
  width: 100%;
  background: #eee;
}
.slider
{
  width: 80%;
}
.title-line{
  line-height:60px;
  text-align:center;
  background:#eee;
}
  • js效果实现
Page({
  data: {
    videoUrl:"../../images/timg.jpeg",
    slideNum:0
     },
  sliderchange: function(e){
    console.log(e.detail.value);
    var num = e.detail.value;
    var url;
    if(num > 10){
      url = "../../images/timg3.jpeg"
    }else {
      url = "../../images/timg2.jpeg"
    }
    this.setData({
      videoUrl:url,
      slideNum:num
    })
  }
});

用到的组件是progress 进度条。组件属性的长度单位默认为px

属性名 作用 默认值
percent 百分比0~100
show-info 在进度条右侧显示百分比 false
border-radius 圆角大小 0
font-size 右侧百分比字体大小 16
stroke-width 进度条线的宽度 6
color 进度条颜色(请使用activeColor) #09BB07
activeColor 已选择的进度条的颜色 #09BB07
backgroundColor 未选择的进度条的颜色 #EBEBEB
active 进度条从左往右的动画 false
active-mode backwards: 动画从头播;forwards:动画从上次结束点接着播 backwards
bindactiveend 动画完成事件

进度条的效果图如下

<progress percent="100" active='true' stroke-width="4" />
<view class='title-line'>progress</view>
<view class='column'>
  <button class='button' type='primary' size='mini' bindtap='startDown'>开始下载</button>
  <text class="title">下载进度:</text>
  <progress percent="{{percent}}" show-info active='{{isDown}}' stroke-width="14" />
</view>

Page({
  data: {
    videoUrl:"../../images/timg.jpeg",
    slideNum:0,
    isDown: false,
    percent: 0
    },
  startDown: function (e) {
    this.setData({
      isDown: true,
      percent: 100,
    })
  },
});
发布了99 篇原创文章 · 获赞 22 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览