【JS】小程序自定义滑块movable-area

• Z时代
• 2024-01-10
• 分类：技术分享

css=====================================

movable-view {
display: flex;
align-items: center;
justify-content: center;
height: 100rpx;
width: 1rpx;
background: transparent;
color: #fff;
position: relative;
}
movable-view view {
position: absolute;
top: -40rpx;
background: #799AF4;
z-index: 10;
/* height: 100%; */
width: 150rpx;
text-align: center;
}
movable-area {
height: 30rpx;
width: 500rpx;
margin: 50rpx;
background: linear-gradient(to right,#FFC025 33%, #56DBBD 33%, #56DBBD 66%,#FB8D82 66%,#FB8D82);
/* overflow: hidden; */
}
input {
margin: 0 auto;
border: 1rpx solid #000;
width: 150rpx;
height: 50rpx;
text-align: center;
}
.max {
width: 600rpx;
height: 600rpx;
}
.page-section{
width: 100%;
margin-bottom: 60rpx;
}
.page-section:last-child{
margin-bottom: 0;
}
.page-section-title{
font-size: 28rpx;
color: #999999;
margin-bottom: 10rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}

html========================================

<view class="container">
<view class="page-body">
<view class="page-section">
<view class="page-section-title first">movable-view区域小于movable-area</view>
<input type="text" value="{{val}}" bindblur="onBlur"></input>
<movable-area id="area">
<movable-view id="areaView" x="{{x}}" y="{{y}}" direction="horizontal" bindchange="onChange"><view>莫挨老子</view></movable-view>
</movable-area>
</view>
<view bindtap="onAdd">加1</view>
<view bindtap="onSub">减1</view>
</view>
</view>

js===================================

Page({
onShareAppMessage() {
return {
title: 'movable-view',
path: 'page/component/pages/movable-view/movable-view'
}
},
onLoad() {
this.initDomX();
},
data: {
x: 0, // x轴
y: 0, // y轴
val:60, // 输入框值
min: 60, // 最小值
max: 150, // 最大值
areaVal: 90, // max - min
domX:0, // 砝码的总长
},
initDomX() {
let _this = this;
const query = wx.createSelectorQuery();
query.select('#area').boundingClientRect();
query.select('#areaView').boundingClientRect();
query.exec((res) => {
_this.setData({
domX: res[0].width - res[1].width
})
})
},
onChange(e) {
let _this = this;
this.setData({
// 取整
// val: Math.round(_this.data.min + (_this.data.areaVal * ((Math.round(e.detail.x / _this.data.domX * 10000) / 100)/100)))
// 保留两位小数
val: (_this.data.min + (_this.data.areaVal * ((e.detail.x / _this.data.domX * 10000) / 100) / 100)).toFixed(1)
})
},
onBlur(e) {
let _this = this;
let val = e.detail.value - 0;
this.setData({
x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
// val: val.toFixed(2)
})
console.log((_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)));
// this.setData({
// 取整
// val: Math.round(e.detail.value),
// x: Math.round(_this.data.domX * ((val - _this.data.min) / _this.data.areaVal))
// 保留两位小数
// val: val.toFixed(2),
// x: _this.data.domX * ((val - _this.data.min) / _this.data.areaVal)
// })
},
onAdd(e) {
let _this = this;
let val = (_this.data.val-0) + 1;
console.log(val);
this.setData({
// val: val,
x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
})
},
onSub(e) {
let _this = this;
let val = (_this.data.val-0) - 1;
this.setData({
// val: val,
x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
})
console.log(this.data.x);
}
})

效果：莫挨老子是拖动的节点，样式随便写的

以上是 【JS】小程序自定义滑块movable-area 的全部内容， 来源链接： utcz.com/a/92400.html