seekbar

首次使用请先weexplus plugin add https://github.com/farwolf2010/seekbar 进度条,可以拖拽,因为weex对手势支持的不好,特此搬了一个原生的过来

属性

属性 作用
color 颜色
progress 进度
max 最大值
min 最小值

事件

名称 触发时机
start 开始执行拖拽时触发
stop 结束执行拖拽时触发
change 进度发生改变触发

demo

<template>
    <div style="align-items: center">
        <head></head>
        <button text="ok" @click="show"></button>
        <seekbar @click="onstop" @start="onstart" @stop="onstop" @change="change" :max="total" :progress="progress"  style="width:600px;height: 100px;"  color="#238FFF"></seekbar>
        <text>{{v.value}}--{{total}}</text>
        <button text="seek" @click="seek"></button>
    </div>
</template>
<script>
    export default{
        props: {},
        data(){
            return {
                v:{},
                min:0,
                total:10000,
                progress:0,
                isPlaying:false,
            }
        },
        methods: {
            onstart(){
                let audio=weex.requireModule('audio')
                audio.pause()
                this.isPlaying=false
            },
            onstop(){
//                let audio=weex.requireModule('audio')
////                audio.play('https://sur.nhc55555.com/uploads/2019-04/10/00b38343269dd25980bfa9a77f1a1584.mp3')
////                audio.seek(this.v.value)
//                audio.seek(12000)
//                this.log('stop')
//                this.isPlaying=true
                this.seek()
            },
            seek(){
                let audio=weex.requireModule('audio')
                audio.seek(12000)
            },
            change(m){
                this.v=m
//                this.log(this.v)
//                this.progress=m.value

            },
            show(){
//              let pro=weex.requireModule('progress')
                this.isPlaying=true
              let audio=weex.requireModule('audio')
                audio.play('http://59.110.169.246/img/1.mp3')
                audio.setOnPlaying((res)=>{
                    this.total=res.total
//                    this.log(res)
                    if(this.isPlaying){
                        this.progress=res.current
                    }


                })
//                pro.show()
            },
            onLoad(p){

            }
        },
        created(){

        }
    }
</script>
<style scoped>

</style>

results matching ""

    No results matching ""