微信小程序实现双向滑动快捷选择价格（价格区间）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

实现样子

提示效果可以自己自定义自己将文字样式更改为自己项目属性即可

实现达到方法

1、左边为最低价右边为最高价格可以拖动左边最低价选择价格。拖动右边为最高价。

2、当两个价格重合时继续拖动向左边左边最低价会跟着变低直到为边端反之右边最高价会跟着变高。

3、输入相应的标尺会显示不同价格尺度

4、颜色、拖动模块都可以自定义

5、价格拖动已经封装成组件简单调用即可实现相应的方法

建议建议不在组件拖动频繁调用setdata赋值会导致性能增高

实现步骤

步骤一下载资源在组件引用组件不作过多介绍,资源在结尾下载

步骤二在页面调用组件

json

{
  "usingComponents": {
    "range-slider": "/components/range/range-slider"
  }
}

js
const app = getApp()
Page({
  data: {
    minValue: 0,
    maxValue: 20,
    rangeValues: [0, 20]
  },
  onLoad: function() {},
  onRangeChange: function(e) {
    this.setData({
      rangeValues: [Math.round(e.detail.minValue), Math.round(e.detail.maxValue)],
    });
  },
  onTest: function() {
    this.setData({
      rangeValues: [0, 20]
    });
  }
})


wxml
<view style="width:600rpx">
    <range-slider width='600' height='100' block-size='50' min='0' max='20' values='{{rangeValues}}' bind:rangechange='onRangeChange'>
      <view slot='minBlock' class='range-slider-block'></view>
      <view slot='maxBlock' class='range-slider-block'></view>
    </range-slider>
  </view>

css:
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 230rpx;
}

.range-slider-block {
  border-radius: 15rpx;
  width: 100%;
  height: 100%;
  background-color: #fc4029;
  box-shadow: 0px 2rpx 14rpx 0px rgba(72,126,255,0.35);
  color:#fff;
  font-size: 17rpx;
  text-align: center;
  line-height: 29rpx;
}

.range-text {
  font-size: 18px;
}