微信小程序 简易的滑动选择框
Post on 2021-10-27
144
0
先放上界面的示例图,可以进行滑动选择,下面是代码
wxml:
<view class='body'>
<view class='time'>
<view class='time_cont'>
<view class='time_left'>
<view class='time_left_text' style='font-size:14px;color:#666'>时</view>
</view>
<view class='time_right'>
<view class='time_right_text' style='font-size:14px;color:#666'>分</view>
</view>
</view>
<view class='time_model'>
<view class='time_middle'>:</view>
<view class='time_modle_background'></view>
<view class='time_models' bind:touchstart="touchstartTrigger" bind:touchmove="touchmoveTrigger" touchcancel="endTrigger" touchend="endTrigger" tap="endTrigger" bindtouchend="endTrigger" style="margin-top:-{{scrollTop}}px">
<view class='time_cont' wx:for="{{hourList}}">
<view class='time_left'>
<view class='time_left_text'>{{item.hour}}</view>
</view>
</view>
</view>
<view class='time_models' bind:touchstart="touchstartTriggers" bind:touchmove="touchmoveTriggers" touchcancel="endTriggers" touchend="endTriggers" tap="endTriggers" bindtouchend="endTriggers" style="margin-top:-{{scrollTopes}}px">
<view class='time_cont' wx:for="{{minuteList}}">
<view class='time_right'>
<view class='time_right_text'>{{item.minute}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
js:
Page({
/**
* 页面的初始数据
*/
data: {
hourList:[
{ hour: "00" },
{ hour: "01" },
{ hour: "02" },
{ hour: "03" },
{ hour: "04" },
{ hour: "05" },
{ hour: "06" },
{ hour: "07" },
{ hour: "08" },
{ hour: "09" },
{ hour: "10" },
{ hour: "11" },
{ hour: "12" },
{ hour: "13" },
{ hour: "14" },
{ hour: "15" },
{ hour: "16" },
{ hour: "17" },
{ hour: "18" },
{ hour: "19" },
{ hour: "20" },
{ hour: "21" },
{ hour: "22" },
{ hour: "23" }
],
minuteList: [
{ minute: "01" },
{ minute: "02" },
{ minute: "03" },
{ minute: "04" },
{ minute: "05" },
{ minute: "06" },
{ minute: "07" },
{ minute: "08" },
{ minute: "09" },
{ minute: "10" },
{ minute: "11" },
{ minute: "12" },
{ minute: "13" },
{ minute: "14" },
{ minute: "15" },
{ minute: "16" },
{ minute: "17" },
{ minute: "18" },
{ minute: "19" },
{ minute: "20" },
{ minute: "21" },
{ minute: "22" },
{ minute: "23" },
{ minute: "24" },
{ minute: "25" },
{ minute: "26" },
{ minute: "27" },
{ minute: "28" },
{ minute: "29" },
{ minute: "30" },
{ minute: "31" },
{ minute: "32" },
{ minute: "33" },
{ minute: "34" },
{ minute: "35" },
{ minute: "36" },
{ minute: "37" },
{ minute: "38" },
{ minute: "39" },
{ minute: "40" },
{ minute: "41" },
{ minute: "42" },
{ minute: "43" },
{ minute: "44" },
{ minute: "45" },
{ minute: "46" },
{ minute: "47" },
{ minute: "48" },
{ minute: "49" },
{ minute: "50" },
{ minute: "51" },
{ minute: "52" },
{ minute: "53" },
{ minute: "54" },
{ minute: "55" },
{ minute: "56" },
{ minute: "57" },
{ minute: "58" },
{ minute: "59" },
{ minute: "60" },
],
toView: 'red',
scrollTop: 0,
scrollTops: 0,
num: 46,
yyy: 0,
scrollTopes: 0,
scrollTopess: 0,
yyys: 0,
},
touchstartTrigger: function(e){
// console.log(e)
this.data.yyy = e.changedTouches[0].pageY
this.data.scrollTops = this.data.scrollTop
},
touchmoveTrigger: function (e) {
// console.log(e)
if (this.data.scrollTop<0){
return
}
let y = Math.abs(this.data.yyy - e.changedTouches[0].pageY);
if (this.data.yyy >= e.changedTouches[0].pageY) {
if (this.data.scrollTop >= (this.data.hourList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTop: this.data.hourList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTop: this.data.scrollTops + y
})
}else{
if (this.data.scrollTop <= 0) {
this.setData({
scrollTop: 0
})
return
}
this.setData({
scrollTop: this.data.scrollTops - y
})
}
},
endTrigger: function (e) {
// console.log(e)
let y = Math.abs(this.data.yyy - e.changedTouches[0].pageY);
if (this.data.yyy >= e.changedTouches[0].pageY) {
let number = parseInt(y / this.data.num)
let remainder = y % this.data.num
if (remainder >= this.data.num / 2) {
number++
}
if (this.data.scrollTop <= 0) {
this.setData({
scrollTop: 0
})
return
}
if (this.data.scrollTop >= (this.data.hourList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTop: this.data.hourList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTop: this.data.scrollTops + number * this.data.num
})
} else {
let number = parseInt(y / this.data.num)
let remainder = y % this.data.num
if (remainder >= this.data.num / 2) {
number++
}
if (this.data.scrollTop <= 0) {
this.setData({
scrollTop: 0
})
return
}
if (this.data.scrollTop >= (this.data.hourList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTop: this.data.hourList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTop: this.data.scrollTops - number * this.data.num
})
}
},
touchstartTriggers: function (e) {
// console.log(e)
this.data.yyys = e.changedTouches[0].pageY
this.data.scrollTopess = this.data.scrollTopes
},
touchmoveTriggers: function (e) {
// console.log(e)
if (this.data.scrollTopes < 0) {
return
}
let y = Math.abs(this.data.yyys - e.changedTouches[0].pageY);
if (this.data.yyys >= e.changedTouches[0].pageY) {
if (this.data.scrollTopes >= (this.data.minuteList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTopes: this.data.minuteList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTopes: this.data.scrollTopess + y
})
} else {
this.setData({
scrollTopes: this.data.scrollTopess - y
})
}
},
endTriggers: function (e) {
// console.log(e)
let y = Math.abs(this.data.yyys - e.changedTouches[0].pageY);
if (this.data.yyys >= e.changedTouches[0].pageY) {
let number = parseInt(y / this.data.num)
let remainder = y % this.data.num
if (remainder >= this.data.num / 2) {
number++
}
if (this.data.scrollTopes <= 0) {
this.setData({
scrollTopes: 0
})
return
}
if (this.data.scrollTopes >= (this.data.minuteList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTopes: this.data.minuteList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTopes: this.data.scrollTopess + number * this.data.num
})
} else {
let number = parseInt(y / this.data.num)
let remainder = y % this.data.num
if (remainder >= this.data.num / 2) {
number++
}
if (this.data.scrollTopes <= 0) {
this.setData({
scrollTopes: 0
})
return
}
if (this.data.scrollTopes >= (this.data.minuteList.length * this.data.num) - (this.data.num * 3)) {
this.setData({
scrollTopes: this.data.minuteList.length * this.data.num - (this.data.num * 3)
})
return
}
this.setData({
scrollTopes: this.data.scrollTopess - number * this.data.num
})
}
},
//获取选择的是数据
getScrollTop: function () {
console.log(this.data.hourList[this.data.scrollTop / this.data.num])
},
getScrollTopes: function () {
console.log(this.data.minuteList[this.data.scrollTopes / this.data.num])
},
})
wxss
.body{
background-color: #fff;
height: 100vh;
width: 100vw;
}
.time{
width:100%;
height:50vh;
position: relative;
}
.time_cont{
height: 46px;
z-index: 3;
position: relative;
}
.time_left{
width:48vw;
float:left;
}
.time_right{
width:48vw;
float:right;
}
.time_middle{
width:4vw;
text-align: center;
line-height: 46px;
font-size: 20px;
position: absolute;
top: 0px;
z-index: 3;
left: 48vw;
}
.time_left_text{
float:right;
width:100px;
height: 46px;
line-height: 46px;
text-align: center;
font-size: 26px;
}
.time_right_text{
width:100px;
height: 46px;
line-height: 46px;
text-align: center;
font-size: 26px;
}
.time_model{
width:100%;
position: relative;
height: 135px;
overflow: hidden;
}
.time_models{
width:50%;
position: relative;
float: left;
}
.time_modle_background{
width:100%;
background-color: #EffBff;
height: 46px;
position: absolute;
top:0px;
z-index: 1;
}
.time_modle_background2{
width:100%;
background-color: #fff;
opacity: 0.4;
height: 46px;
position: fixed;
top:46px;
z-index: 8;
}
.time_modle_background3{
width:100%;
background-color: #fff;
opacity: 0.8;
height: 46px;
position: fixed;
top:90px;
z-index: 8;
}
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
快拿去复制粘贴看看效果吧
暂无评论