위 챗 애플 릿 단추 가 미 끄 러 지 는 실현 방법
물건 을 먼저 보다
미끄럼 전
미끄럼 후
코드
index.wxml
<view class="content">
<view class="sliderContent">
<input placeholder=" " placeholder-class="input-placeholder" disabled="{{disabled}}" />
<view class="slider" bindtouchstart="moveSendBtnStart" bindtouchend="moveSendBtnEnd" bindtouchmove="moveSendBtn" style="left:{{moveSendBtnLeft}}rpx;background-color:{{SendBtnColor}}"> </view>
</view>
</view>
index.wxss
.content {
margin-top: 100rpx;
font-size: 24rpx;
}
.sliderContent{
position: relative;
margin: 0 auto;
margin-bottom: 50rpx;
padding-left: 60rpx;
width: 425rpx;
box-sizing: border-box;
height: 70rpx;
line-height: 70rpx;
border-radius: 60rpx;
background-color: #fff;
color: #289adc;
box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
}
.sliderContent input {
line-height: 70rpx;
height: 70rpx;
box-sizing: border-box;
padding-left: 40rpx;
width: 250rpx;
}
.input-placeholder {
text-align: center;
color: #289adc;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 150rpx;
border-radius: 60rpx;
text-align: center;
background-color: #7f7f7f;
color: #fff;
box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
}
index.js
Page({
data: {
moveStartX: 0, //
moveSendBtnLeft: 0, // left
moveEndX: 0, //
screenWidth: 0, //
moveable: true, //
disabled: true,// ,
SendBtnColor: "#7f7f7f" //
},
onLoad: function () {
var that = this;
//
wx.getSystemInfo({
success: function (res) {
that.setData({
screenWidth: res.screenWidth
})
},
})
},
//
moveSendBtnStart: function (e) {
if (!this.data.moveable) {
return;
}
console.log("start");
console.log(e);
this.setData({
moveStartX: e.changedTouches["0"].clientX
})
},
//
moveSendBtn: function (e) {
if (!this.data.moveable) {
return;
}
var that = this;
// console.log(e.touches[0]);
var left = ((e.touches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
console.log(left)
if (left <= 275.5) {
this.setData({
moveSendBtnLeft: left
})
} else {
this.setData({
moveSendBtnLeft: 275.5
})
}
},
//
moveSendBtnEnd: function (e) {
console.log("end");
var that = this;
var left = ((e.changedTouches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
console.log(left);
if (left < 275.5) {
for (let i = left; i >= 0; i--) {
that.setData({
moveSendBtnLeft: i
})
}
} else {
that.setData({
moveEndX: e.changedTouches[0].clientX,
moveable: false,
disabled: false,
SendBtnColor: "#289adc"
})
}
}
})
말 나 온 김 에1.버튼 슬라이딩 이벤트
bindtouchstart//단추 가 미 끄 러 지기 시작 합 니 다.
bindtoughend//단추 끝 미끄럼
bindtouchmove//단추 가 미 끄 러 지고 있 습 니 다.
버튼 이 미 끄 러 지기 시작 하 는 것 은 시작 을 기록 하 는 위치 입 니 다.
미끄럼 이 끝 났 을 때 버튼 이 가장 오른쪽 까지 미 끄 러 졌 는 지 판단 하고 중간 까지 만 미 끄 러 지면 튕 겨 나 옵 니 다.
미끄럼 과정 에서 초기 위치 와 의 거 리 를 계산 한 다음 button 의 left 속성 값 을 계산 하고 변경 해 야 합 니 다.
2.버튼 이 미 끄 러 지 는 거리 계산
미끄럼 이벤트 가 되 돌아 오 는 수 치 는 모두 px 단위 이기 때문에 우 리 는 인터페이스 디자인 을 할 때 rpx 를 사용 합 니 다.여기 서 우 리 는 수치 계산 을 해 야 합 니 다.onLoad 에서 우 리 는 현재 장치 의 너비,rpx 를 단위 로 할 때 현재 장치 의 논리 적 폭 은 750 rpx 라 고 생각 합 니 다.화면의 실제 폭 이 400 px 라 고 가정 하면 1px=400/750 rpx 입 니 다.그러면 미 끄 러 지 는 거리=실제 상호작용 거리/(400/750)rpx
환산 을 거 친 후에 우 리 는 rpx 단위 의 미끄럼 거 리 를 얻 을 수 있다.
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
OpenSSL 생 성 ssl 인증서텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.