实现样子
提示:效果可以自己自定义,自己将文字样式更改为自己项目属性即可
实现达到方法
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;
}
小结
现在很多网上流行拖动来选择价格,方便快捷高效的选择价格,已经慢慢摒弃传统的固定选择价格。组件已经优化,兼容小屏和大屏幕的手机或者平板
文章来源:https://www.toymoban.com/news/detail-651510.html
喜欢的小伙伴可以下载。资源下载
文章来源地址https://www.toymoban.com/news/detail-651510.html
到了这里,关于微信小程序实现双向滑动快捷选择价格(价格区间)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!