微信小程序实现带滑块的进度条

微信小程序项目需求，要实现一个带滑块并可左右滑动的进度条，看了小程序的文档，发现上面的progress组件无法满足需求，所以我自己写了一个，在这里总结一下。

一、效果图

二、实现逻辑

功能实现的逻辑比较简单，这里简单说明一下：

1、首先用一个标签将相关代码包裹起来，加上静态定位；
2、画两条一模一样的线条，其中一条加上相对定位改变线条的颜色，动态设置它的宽度；
3、画一个滑块，使用相对定位定到线条上面，给它加bindtouchmove事件，获取它距离左边的宽度，然后对应设置上去即可。

三、相关代码

1、wxml文件

<view class="process_wrap">
  <view class="line" bindtap="moveTo"></view>
  <!-- 这里的宽度和left值也可以改成百分比，效果是一样的 -->
  <view class="active_line" style="width:{{2*progress}}rpx;" bindtap="moveTo"></view>
  <view class="spot" style="left:{{2*progress}}rpx" bindtouchmove="moveTo"  catchtouchstart="buttonStart"></view>
  <view style="margin-top:50rpx;">{{precent}}%</view>
</view>

2、js文件

var startPoint;
const min = 0; // 最小宽度 单位px
const max = 200; // 最大宽度  单位px

Page({
  /**
   * 页面的初始数据
   */
  data: {
    buttonLeft: 0,
    progress: 0, // 进度条的宽度，这里的单位是px，所以在wxml文件中要改为rpx
    precent:0 // 这个是百分比
  },
  buttonStart: function (e) {
    startPoint = e.touches[0]
  },
  moveTo(e) {
    var endPoint = e.touches[e.touches.length - 1]
    var translateX = endPoint.clientX - startPoint.clientX
    startPoint = endPoint;
    var buttonLeft = this.data.buttonLeft + translateX;
    if (buttonLeft > max) {
      // 滑动位置大于进度条最大宽度的时候让它为最大宽度
      buttonLeft = max
    }
    if (buttonLeft < min) {
      // 滑动位置小于进度条最大宽度的时候让它为最小宽度
      buttonLeft = min
    }
    this.setData({
      buttonLeft: buttonLeft,
      progress: buttonLeft,
      precent:parseInt((buttonLeft/max)*100)
    })
  }
})

3、wxss文件

.process_wrap {
  position: relative;
  width: 400rpx;
  margin-left: 60rpx;
}
.process_wrap .line {
  width: 400rpx;
  height: 2rpx;
  background: #B5B8C2;
}

.process_wrap .active_line {
  position: absolute;
  top: -4rpx;
  left: 0;
  max-width: 400rpx;
  height: 8rpx;
  background: linear-gradient(83deg, #84B3FF 0%, #116DF6 100%);
}

.process_wrap .spot {
  position: absolute;
  top: -20rpx;
  left: 0;
  width: 40rpx;
  height: 40rpx;
  background: #1A73FF;
  box-shadow: 0px 2px 10px 0px rgba(196, 200, 204, 0.5);
  border: 2px solid #FFFFFF;
  border-radius: 100%;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序之圆形进度条实现思路

    微信小程序之圆形进度条实现思路

    需求概要 小程序中使用圆形倒计时,效果图: 思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval让彩色圆环逐步绘制. 解决方案 第一步先写结构 一个盒子包裹2个canvas以及文字盒子: 盒子使用相对定位作为父级,flex布局,设置居中: 一个canvas,使用绝对定位作为背景,canvas-id="canvasProgressbg" 另一个canvas,使用相对定位作为进度条,canvas-id="canvasProgress"

  • 微信小程序实现环形进度条

    微信小程序实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 index.wxss .circle {   position: absolute;   left: 0;   right: 0;   margin: auto; } index.wxml <canvas class="circle" style="z-index: 1;" canvas-id="canvasArcCir"></canvas>

  • 微信小程序绘制半圆（弧形）进度条

    本文实例为大家分享了微信小程序绘制半圆进度条的具体代码,供大家参考,具体内容如下 wxml: <view class="progress"> <canvas canvas-id="canvasProgress" style="width: {{canvasWidth}}rpx; height: {{canvasHeitht}}rpx;"></canvas> </view> <view clas

  • 微信小程序实现下载进度条的方法

    微信小程序实现下载进度条的方法

    我们经常会在APP下载中看到下载进度条,这个进度条是为了和用户交互,告知用户当前的进度,不然让用户一直处于等待,用户等超过1分钟就会崩溃的,今天代码君就教大家如何在小程序中也制作下载进度条 progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress属性介绍 属性名 作用 参数值 percent 进度百分比0~100 show-info 在进度条右侧显示百分比 true/false 默认false active 进度条从左往右的动画 true/false

  • 微信小程序用canvas实现圆形进度条

    微信小程序用canvas实现圆形进度条

    本文实例为大家分享了微信小程序用canvas实现圆形进度条的具体代码,供大家参考,具体内容如下 先放效果图,如下: 1. wxml文件代码如下 对于圆形进度条中间的文字,如果是简单的,可以用它自带的属性去填充. 比较复杂的,就可以像下面,通过样式将文字定位到圆形进度条中间合适位置. <view class='circlePage'>   <view class='wrap'>     <!-- 圆形中间的文字 -->     <view class="c

  • 微信小程序实现时间进度条功能

    微信小程序实现时间进度条功能

    关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text

  • 微信小程序多音频播放进度条问题

    微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • 微信小程序自定义组件实现环形进度条

    微信小程序自定义组件实现环形进度条

    本文实例为大家分享了微信小程序实现环形进度条的具体代码,供大家参考,具体内容如下 微信小程序自定义组件官方教程 环形进度条的组件已经放在github上 环形进度条效果图 创建步骤 1.在根目录创建名为components的文件夹,用来放需要引用的自定义组件. 2.创建名为canvas-ring的文件夹,用来放环形进度条自定义组件. 3.鼠标指着canvas-ring的文件夹 鼠标右键 "新建 Component" 取名canvas-ring. 结构图: 环形进度条组件的代码 canva

  • 微信小程序画布圆形进度条显示效果

    微信小程序画布圆形进度条显示效果

    本文实例为大家分享了微信小程序画布圆形进度条展示的具体代码,供大家参考,具体内容如下 效果图: 代码: wxml <!--pages/test/test.wxml--> <canvas style="width: 300px; height: 200px;" canvas-id="canvasid"></canvas> js // pages/test/test.js var context = new wx.createCanv

  • 微信小程序实现圆形进度条动画

    微信小程序实现圆形进度条动画

    本文实例为大家分享了微信小程序动画之圆形进度条,供大家参考,具体内容如下 上图: 代码: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx

随机推荐