加载中...
PAGE

微信小程序 简易的滑动选择框

Post on 2021-10-27 26 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; }

快拿去复制粘贴看看效果吧

mysql主从同步配置

mysql主从同步配置

阅读更多
mybatis case when 报错

mybatis case when 报错

阅读更多
mysql INSERT SELECT FROM 语句的使用

mysql INSERT SELECT FROM 语句的使用

阅读更多

暂无评论

    发表评论
    返回顶部
    X