微信小程序-双滑块组件

汉武大帝·

已于 2022-11-28 17:05:18 修改

阅读量857

点赞数 3

分类专栏：微信小程序文章标签：微信小程序前端 javascript

于 2022-11-15 13:06:04 首次发布

本文链接：https://blog.csdn.net/yinge0508/article/details/127830060

版权

微信小程序专栏收录该内容

17 篇文章 0 订阅

订阅专栏

先看效果：

组件 range-slider.wxml

 <view class='range-slider' style='width:{{width}}rpx;height:{{height}}rpx'>
  <view class='range-bar' style='width:100%;height:{{barHeight}}rpx'>
    <view class='range-bar-bg' style='background-color:{{backgroundColor}}'></view>
    <view class='range-bar-progress' style='margin-left:{{progressBarLeft}}rpx;width:{{progressBarWidth}}rpx;background-color:{{activeColor}}'></view>
  </view>
  <view class='block' style='width:{{blockSize}}rpx;height:{{blockSize}}rpx;margin-left:{{minBlockLeft}}rpx;' catch:touchstart='_onBlockTouchStart' catch:touchmove='_onBlockTouchMove' catch:touchend='_onBlockTouchEnd' data-left='{{minBlockLeft}}' data-tag='minBlock'>
    <slot name='minBlock'></slot>
  </view>
  <view class='block' style='width:{{blockSize}}rpx;height:{{blockSize}}rpx;margin-left:{{maxBlockLeft}}rpx;' catch:touchstart='_onBlockTouchStart' catch:touchmove='_onBlockTouchMove' catch:touchend='_onBlockTouchEnd' data-left='{{maxBlockLeft}}'
    data-tag='maxBlock'>
    <slot name='maxBlock'></slot>
  </view>
</view>

组件range-slider.js

代码地址：https://gitee.com/yin_dong/weixinshuanghuakuai/tree/master/wechat-rangeslider-master

乐于分享，有需要的随便用，不像是某些***，不让看