您现在的位置是:首页 > 正文

2021-09-29

2024-01-30 21:25:54阅读 0

小程序时间刻度尺组件库(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)

  },




})

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

网站文章

  • 如何设计更优的分布式锁?

    如何设计更优的分布式锁?

    如何设计更优的分布式锁?

    2024-01-30 21:25:19
  • Android JNI学习-异常处理

    异常我们已经很熟悉了,空指针、数组越界等等,在Java中,当抛出一个异常,虚拟机会停止执行代码块并进入调用栈反向检查能处理特定异常的异常处理程序代码块,虚拟机清除异常并将控制权交给异常处理程序。而JN...

    2024-01-30 21:25:12
  • Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    Kafka学习笔记之K8S内filebeat传输到kafka报错带解决方案

    0x00 概述filebeat非常轻量级,正常情况下占用的资源几乎都能忽略不计,但是部署后发现资源占用很大,所以怀疑是filebeat本身出了问题。第一时间查看filebeat日志(默认路径/var/log/filebeat/filebeat,K8S需要在控制台实时查看pod的日志),发现有大量内容输出:2019-03-20T08:55:02.198+0800 IN...

    2024-01-30 21:25:07
  • PgSQL · 追根究底 · WAL日志空间的意外增长

    PgSQL · 追根究底 · WAL日志空间的意外增长

    问题出现我们在线上巡检中发现,一个实例的pg_xlog目录,增长到4G,很是疑惑。刚开始怀疑是日志归档过慢,日志堆积在pg_xlog目录下面,未被清除导致。于是检查归档目录下的文件,内容如下。但发现新近完成写入的日志文件都被归档成功了(即在pg_xlog/archive_status里面,有对应的xxx.done文件)。ls -lrt pg_xlog...-rw------- ...

    2024-01-30 21:24:38
  • 第七节:元组&amp;字典

    元组和字典for循环range函数元组字典的简介字典的增删改查作业 for循环 range函数 元组 字典的简介 字典的增删改查 作业

    2024-01-30 21:24:32
  • java构造一个银行账户类

    java构造一个银行账户类

    (1)思路数据成员用户的账户名称、用户的账户余额(private数据类型)方法包括开户(设置账户名称及余额),利用构造方法完成查询余额。取款存款(2)代码实现package p1;import jav...

    2024-01-30 21:24:25
  • JDK和Maven在Windows下安装和配置

    JDK和Maven在Windows下安装和配置

    文章目录1.JDK1.1 下载安装1.2 配置环境变量1.3 验证安装2.Maven2.1 下载安装2.2 配置环境变量2.3 修改本地仓库位置2.4 配置阿里云的中央仓库2.5 验证和测试1.JDK...

    2024-01-30 21:23:55
  • bzoj2242

    2242: [SDOI2011]计算器 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 3179 Solved: 1248 [Submit][Status][Discuss] Description 你被要求设计一个计算器完成以下三项任务: 1、给定y,z,p,计算Y^Z Mod P 的值; 2、给定y,z,p,计算满足xy≡

    2024-01-30 21:23:48
  • JS逆向混淆加密参数分析,反调试分析

    JS逆向混淆加密参数分析,反调试分析

    闲逛github看到issues别人发的一个网站,网址:http://ys.fgj.taiyuan.gov.cn/Firsthand/tyfc/publish/p/ProjectList.do 随便勾选菜单查询,上抓包 如下图requestbody 分析一下requestbody的生成过程,老规矩F12 匿名函数的无限debugger,直接删掉debugger代码即可,有2个debugger...

    2024-01-30 21:23:40
  • 实现每日早安推送

    实现每日早安推送

    做一个程序员给女朋友的浪漫礼物吧,微信推送每日早安。

    2024-01-30 21:23:10