2021-09-29

小程序时间刻度尺组件库(vue通用)
实现效果：页面进来的时间 刻度尺当前时间点 以前表示不可预约 样式为红色 时间点之后的样式为蓝色
Demo效果：

实现思路：刻度尺上面的小刻度数用循环遍历出来的 css交互判断刻度的长度 分为 长 中 短 3个样式
最长的时间刻度是俩个小时的时间间隔 中长度的代表的是一个小时的时间间隔 小刻度的就是代表一个刻度几分钟
最关键的核心要点是在于js计算每个小刻度尺代表的时间 分析 中刻度和长刻度代表的时间段
实现vue:
scaleonce.HTML

<view class="scale_start">
    <view class="scale_content">
        <view class="scale_kedu">
            <view class="scale_grip_item" wx:for="{{61}}" wx:key="{{index}}" wx:for-item="on" data-index="{{index}}">
                <view  style="background:  {{ index<=flewid? 'red!important' :  '' }}" class="scale_grip_small {{(index)%10 == 0 || index==0 ?'scale_grip': (index%5==0&&index%2!==0?'scale_grip_middle':'')}}" ></view>
            </view>
        </view>
    </view>
    <!-- 刻度尺对应的数字 -->
    <view class="scale_number" bindtap="onnum">
        <view class="number_item" wx:for="{{numberdate}}">{{item}}</view>
    </view>
</view>

scaleonce.WXSS

/* 说明  
 scale_grip代表的是最长的时间刻度 代替的是俩个小时间隔 
 scale_grip_middle  代表的是中间的时间刻度 代表的是一个小时
 scale_grip_small 代表的是一小刻度几分钟
 ------scale_grip_item代表平均时间差
*/
.scale_strat{
    width: 100%
}
.scale_content{
    width: 613rpx;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.scale_kedu{
    width: 613rpx;  
    display: flex;
}
.scale_grip_item{
    display: flex;
    width: 100%;
     justify-content: space-between;
   

}
.scale_grip{
    width: 2rpx!important;
    height: 22rpx!important;
    background: #1782F8!important;
} 
.scale_grip_small{
width: 2rpx;
height: 10rpx;
background: #9DA3B4;
}
.mr{
    margin-right: 9.6rpx;
}
.scale_grip_middle{
width: 2rpx;
height: 14rpx;
background: #1782F8;
}
.warn{
  background-color: orangered!important;   

}
.scale_number{
    /* border: 1px solid gold; */
    width: 700rpx;
    display: flex;
    padding-top: 9rpx;
   
    box-sizing: border-box;
    /* justify-content: flex-start; */
}
.number_item{
    width: 102rpx;
    height: 20rpx;
    text-align: center;
    font-family: PingFangSC-Regular;
font-size: 22rpx;
color: #1782F8;
letter-spacing: 0;
font-weight: 400;
    /* border: 1px solid blue; */
    /* padding: 30rpx 0; */
    /* transform: translateX(-50%); */
}

scaleonce js文件

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    systime: {
      type: String,
      value: "white"
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    flewid: -3,
    corid: '',
    coryu: '',
    value: "",
    timedate: [],
    numberdate: ["9:00", "11:00", "13:00", "15:00", "17:00", "19:00", "21:00"],

  },
  onLoad: function () {

  },
  onshow() {


  },

  /**
   * 组件的方法列表
   */
  methods: {

    //计算时间差（相差分钟）
    timeDifference(startTime, endTime) {
      console.log("开始时间", startTime)
      console.log("开始时间2", endTime)
      var start1 = startTime.split(":");
      console.log(start1)
      var startAll = parseInt(start1[0] * 60) + parseInt(start1[1]);
      var end1 = endTime.split(":");
      var endAll = parseInt(end1[0] * 60) + parseInt(end1[1]);
      let endline = Math.abs(endAll - startAll);  
      console.log("时间差===" + endline);
      //五个间距 一个间距12分钟 
      var few = Math.floor(endline / 12)
      // console.log(Math.floor(few));
      this.setData({
        flewid: few
      })


    }

  },
  ready: function () {
    console.log("this.data.grade====", this.data.systime);
    var inTime = this.data.systime;
    var startTime = "9:00"
    this.timeDifference(inTime, startTime)

  },




})

收藏可用 第一次写 不好的请多多指教哦