微信小程序自定义进度条及手动拖拽功能

首先是wxml部分


<view class="proess-box"><view class="time">{{currentTime}}</view><movable-area  catchtouchmove="voidMethod" catchtap="tap" class="progress-box" style="width:{{width}}px;height:10px"><view class="bg-box"><view style="width:{{value}}%" class="inner"></view></view><movable-view class="progress-dot" wx:if="{{showDot}}" x="{{(value/100)*width}}" bindtouchmove="touchmove" bindtouchend="touchend"  direction="horizontal" bindchange="getCgh"><view class="dot"></view></movable-view></movable-area><view class="end-time time" style="left: {{width+54+8}}px">{{duration}}</view>
</view>

使用movable-area 滑块组件定义已播放部分，movable-view 定义进度条总长度

wxss：定义样式

.proess-box{position: relative;bottom: 30rpx;
}.proess-box .time {line-height: 20rpx;color: #fff;font-size: 20rpx;position: absolute;left: 12rpx;
}
.progress-box{position: absolute;left: 54px;}.progress-dot{background: #ffffff00;height:40px;display: flex;justify-content: center;align-items: center;top: -15px;z-index: 10;   }.dot{background: #ffffff;width: 8px;height:8px;border-radius: 50%;}.bg-box{position: absolute;width: 100%;height: 2px;top: 4px;background-color: #ffffff22;}.bg-box .inner{background:linear-gradient(to bottom,#ffffff,#666);height: 100%;}

json：

{"component": true,"usingComponents": {}
}

js部分

Component({properties: {value:{type:Number,value:0,observer:function observe(){var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};}},showDot:{type:Boolean,value:false},duration:{type: String,value: '00:00'},currentTime: {type: String,value: '00:00:00'}},data: {width: wx.getSystemInfoSync().windowWidth*0.6,currX:0,touch:false,timer:0},methods: {//这是bindchange触发的函数getCgh(e){  let {x}=e.detaillet {width}=this.datalet pecent=x/width*100this.data.currX=pecent},tap(e){//点击区域的某处直接跳到那个进度console.log('tap e', e.detail)let {x}=e.detaillet {width}=this.datalet pecent=(x-54-8)/width*100this.data.currX=pecentthis.triggerEvent('change',{value:pecent})this.triggerEvent('changend',{value:pecent})},voidMethod(){},touchmove(e){this.triggerEvent('change',{value: this.data.currX})// console.log(this.data.currX)},touchend(e){this.triggerEvent('change',{value: this.data.currX})this.triggerEvent('changend',{value: this.data.currX})},}
});

进度条的使用

<progress value="{{progress}}" bindchanging="showTime" showDot="{{showDot}}" currentTime="{{currentTime}}" duration="{{duration}}" bindchange="changeProgress" bindchangend="progressChangend" ></progress>

手动拖拽功能

  data：{videoDuration: 0, // 视频总时长duration: '', // 视频总时长 00:00currentTime: '', // 播放时间 格式 00:00progress: 0, // 视频进度条progressState: true, //拖拽过程中，不允许更新进度条}/*** 拖动 视频 进度条*/changeProgress: function(e) {const {videoDuration} = this.dataconst {value} = e.detail // 百分比const time = this.formatSeconds((value/100)*videoDuration)this.setData({progress: value, progressState: false, currentTime: time})},/*** 视频 进度条 拖动停止*/progressChangend: function(e) {const {videoDuration} = this.dataconst {value} = e.detail // 百分比const time = (value/100)*videoDurationconst q = wx.createVideoContext(video, this)q.seek(time)this.setData({progressState: true})},bindtimeupdate: function (e) {const {currentTime, duration} = e.detailconst {progressState} = this.data// 进度条const progress =(currentTime/duration)*100// 拖动过程中不让进度条更新if(progressState) {this.setData({progress: progress})}},

微信小程序自定义进度条及手动拖拽功能相关推荐

微信小程序环形进度条_微信小程序实现圆形进度条动画
本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varNa ...
微信小程序环形进度条_微信小程序实现圆形进度条实例分享
本文主要和大家分享微信小程序实现圆形进度条实例,希望能帮助到大家. 小程序中使用圆形倒计时,效果图: 思路使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环 ...
微信小程序实现最简单的组件拖拽
背景最近在自主学习微信小程序的开发:对于零基础入门(没有学习过前端)的我,查阅了许多微信小程序拖拽的实现,大部分要么实现起来太复杂了,要么封装组件太复杂了,附带了拖拽之后排序等功能:因此写下这篇个人 ...
微信小程序环形进度条_Web微信小程序圆环形进度条组件CSS实现
首先理解小程序的自定义组件. 原理看了网上的一些教程,实现圆环用的是两个半圆的旋转,通过overflow: hidden来控制的. 首先绘制底层容器,一个正方形,通过圆角变圆,用来作为未读进度的圆环 ...
微信小程序 27 进度条的动态实现和搜索框、热搜榜的静态搭建
27.1 进度条的动态实现 // 音乐管理者实时播放的进度appInstance.globalData.backgroundAudioManager.onTimeUpdate(() => {le ...
微信小程序进度条样式_微信小程序—progress(进度条)
设置进度条颜色(请使用十六进制颜色值,例如:#ff00ff) 未选择的进度条的颜色(请使用十六进制颜色值,例如:#ff00ff) 设置/取消进度条从左往右的动画设置/取消进度条右侧显示百分比 //获 ...
微信小程序 - 答题进度条
关于进度条的话,我是使用官方原生的progress的. 关于进度progress接受保留2位小数(从后端获取到平均值,再item循环出来) js wxml
微信小程序自定义弹框+生成二维码功能
最近在做小程序的功能,需求是弹框生成二维码功能,所以根据需求自定义了一个弹框组件,后续其他地方也可以用到. 最后效果图如下 dialog部分 <!--components/dialog/dial ...
微信小程序环形进度条_微信小程序：实时圆形进度条实现
//获取应用实例var app = getApp()var interval;var varName;var ctx = wx.createCanvasContext('canvasArcCir'); ...

微信小程序自定义进度条及手动拖拽功能

微信小程序自定义进度条及手动拖拽功能相关推荐

最新文章

热门文章