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

最新推荐文章于 2024-01-24 13:28:03 发布

chelse-o_O

最新推荐文章于 2024-01-24 13:28:03 发布

阅读量2.9k

点赞数 1

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/m0_46735106/article/details/122541277

版权

本文介绍了如何在微信小程序中创建自定义进度条并实现手动拖拽功能。通过在wxml中使用movable-area和movable-view组件来定义已播放部分和总长度，结合wxss设置样式，再在json配置文件中进行相应设置。在js部分，重点讲述了进度条的使用逻辑以及如何实现拖拽操作以调整进度。

摘要由CSDN通过智能技术生成

首先是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&#