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

叁歲伎倆 2024-04-18 03:57 58阅读 0赞

![滑动选择示例图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
先放上界面的示例图，可以进行滑动选择，下面是代码

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;
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b7782dd755bd4ed3b61755774646271a.png