当前位置：首页 > news >正文

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

news 2025/7/27 0:57:44

实现样子

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

实现达到方法

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;
}