社会喵

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

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

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