這個標題起的可能有點大,因為要完成一個視頻播放器的制作,不是一兩篇教程就可以完成的,今天代碼君教大家的只是個建議的視屏播放器,供大家學習參考吧,其實借此要講解的控件是slide,滑動選著器
slide.gif
屬性介紹
屬性名 | 作用 | 參數值 |
---|---|---|
min | 滑動器最小值 | 0 |
max | 滑動器最小值 | 0 |
step | 步長,取值必須大于 0,并且可被(max - min)整除 | 1 |
disabled | 是否禁用 | true/false 默認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' />
<text>50:00</text>
</view>
</view>
- min 設置視頻最小進度值, max 設置視頻最大進度值
- bindchange 事件監聽設置
二、xxx.js
Page({
data: {
videoUrl: "http://7xnmrr.com1.z0.glb.clouddn.com/video1.jpeg",
slideNum: 0,
},
sliderchange: function (e) {
var num = e.detail.value;
var url;
if (num > 10) {
url = "http://7xnmrr.com1.z0.glb.clouddn.com/video2.jpeg"
}
else {
url = "http://7xnmrr.com1.z0.glb.clouddn.com/video1.jpeg"
}
this.setData({
videoUrl: url,
slideNum: num,
})
}
})
- videoUrl 用于模擬視頻切換時,顯示相對應的圖片
- slideNum 滑動的值
三、wxss樣式
.video
{
width: 100%;
background: rebeccapurple;
}
.slider
{
width: 80%;
}
這里的樣式沒什么可以學習的,貼出了是方便讀者可以直接拷貝,完成項目的運行
總結
今天的教程是不是覺得灰常簡單,本來是打算和之前的文章合并成一個的,但是又想每篇文章都是一個獨立的知識點,所以就沒合并,大家就湊合著看,如果簡單就一帶而過,難得知識點,就多看幾遍鞏固一下~