超炫网站,app在线制作平台有哪些,做预算兼职的网站,北京建设网站公司推荐实现样子 提示#xff1a;效果可以自己自定义#xff0c;自己将文字样式更改为自己项目属性即可 实现达到方法
1、左边为最低价#xff0c;右边为最高价格#xff0c;可以拖动左边最低价选择价格。拖动右边为最高价。
2、当两个价格重合时#xff0c;继续拖动#xff0…实现样子 提示效果可以自己自定义自己将文字样式更改为自己项目属性即可 实现达到方法
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 stylewidth:600rpxrange-slider width600 height100 block-size50 min0 max20 values{{rangeValues}} bind:rangechangeonRangeChangeview slotminBlock classrange-slider-block/viewview slotmaxBlock classrange-slider-block/view/range-slider/viewcss:
.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;
}小结
现在很多网上流行拖动来选择价格方便快捷高效的选择价格已经慢慢摒弃传统的固定选择价格。组件已经优化兼容小屏和大屏幕的手机或者平板
喜欢的小伙伴可以下载。资源下载
