zoukankan      html  css  js  c++  java
  • 小程序日历状态圆点

    js

    Page({
      data: {
      currentDayList: '',
      currentObj:'',
      arr: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
      currentDate:'',
      currentDay:'',
      year:'',
      month:'',
      currentClickKey:'',
      remindlist:[1,2,3]
      },
      onLoad: function (options) {
      var currentObj = this.getCurrentDayString()
      this.setData({
       currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
       currentDay: currentObj.getDate(),
       currentObj: currentObj,
       year: currentObj.getFullYear(),
       month: currentObj.getMonth() + 1
      })
      this.setSchedule(currentObj);
      },
      doDay: function (e) {
      this.setData({
       currentClickKey:''
      })
      var arr = this.data.arr;
      for (let i in arr) {
       var newarr = 'arr[' + i + ']';
       this.setData({
       [newarr]: ''
       })
      }
      var that = this
      var currentObj = that.data.currentObj
      var Y = currentObj.getFullYear();
      var m = currentObj.getMonth() + 1;
      var d = currentObj.getDate();
      var str = ''
      if (e.currentTarget.dataset.key == 'left') {
       m -= 1
       if (m <= 0) {
       str = (Y - 1) + '/' + 12 + '/' + d
       } else {
       str = Y + '/' + m + '/' + d
       }
      } else {
       m += 1
       if (m <= 12) {
       str = Y + '/' + m + '/' + d
       } else {
       str = (Y + 1) + '/' + 1 + '/' + d
       }
      }
      currentObj = new Date(str)
      this.setData({
       currentDate: currentObj.getFullYear() + '年' + (currentObj.getMonth() + 1) + '月',
       currentObj: currentObj,
       year: currentObj.getFullYear(),
       month: (currentObj.getMonth() + 1),
       day: ''
      })
      this.setSchedule(currentObj);
      },
      getCurrentDayString: function () {
      var objDate = this.data.currentObj
      if (objDate != '') {
       return objDate
      } else {
       var c_obj = new Date()
       var a = c_obj.getFullYear() + '/' + (c_obj.getMonth() + 1) + '/' + c_obj.getDate()
       return new Date(a)
      }
      },
      setSchedule: function (currentObj) {
      var that = this
      var m = currentObj.getMonth() + 1
      var Y = currentObj.getFullYear()
      var d = currentObj.getDate();
      var dayString = Y + '/' + m + '/' + currentObj.getDate()
      var currentDayNum = new Date(Y, m, 0).getDate()
      var currentDayWeek = currentObj.getUTCDay() + 1
      var result = currentDayWeek - (d % 7 - 1);
      var firstKey = result <= 0 ? 7 + result : result;
      var currentDayList = []
      var f = 0
      for (var i = 0; i < 42; i++) {
       let data = []
       if (i < firstKey - 1) {
       currentDayList[i] = ''
       } else {
       if (f < currentDayNum) {
        currentDayList[i] = f + 1
        f = currentDayList[i]
       } else if (f >= currentDayNum) {
        currentDayList[i] = ''
       }
       }
      }
      that.setData({
       currentDayList: currentDayList
      })
      },
      // 设置点击事件
      onClickItem: function (e) {
      // console.log(JSON.stringify(e));
      // console.log(JSON.stringify(e.currentTarget));
      this.setData({
       currentClickKey: e.currentTarget.id
      });
      },
     })
    html
    <!-- 日历 -->
    <view class="gradient">
        <view class="box">
            <view class="spaceAroundCenter flex_align_justify_b">
                <view class="flex-item">
                    <view class="item-content flex_align_justify_c" bindtap="doDay" data-key='left'>
                        <view class="glyphicon glyphicon-triangle-left">
                            <van-icon name="arrow-left" class="flex_align" />
                        </view>
                    </view>
                </view>
                <view class="flex-item item-content-current-day">
                    <view class="item-content flex_align_justify_c">{{currentDate}}</view>
                </view>
                <view class="flex-item">
                    <view class="item-content flex_align_justify_c" bindtap="doDay" data-key="right">
                        <view class="glyphicon glyphicon-triangle-right">
                            <van-icon name="arrow" class="flex_align" />
                        </view>
                    </view>
                </view>
            </view>

            <view class="spaceAroundCenter">
                <view class="spaceAroundCenter_date">一</view>
                <view class="spaceAroundCenter_date">二</view>
                <view class="spaceAroundCenter_date">三</view>
                <view class="spaceAroundCenter_date">四</view>
                <view class="spaceAroundCenter_date">五</view>
                <view class="spaceAroundCenter_date">六</view>
                <view class="spaceAroundCenter_date">日</view>
            </view>

            <view class="spaceAroundCenter">
                <view class="flex-item day_item" wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="item">
                    <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-day" wx:if="{{vo == currentDay}}" bindtap='onClickItem'>{{vo}}</view>
                    <view id='{{vo}}' class="item-content flex_align_justify_c bk-color-dayClick" wx:elif="{{vo == currentClickKey && currentClickKey != '' && vo != ''}}" bindtap='onClickItem'>{{vo}}</view>
                    <view id='{{vo}}' class="item-content flex_align_justify_c" bindtap='onClickItem' wx:else>{{vo}}</view>
                    <view class="day_item_circle" wx:if="{{currentClickKey!=''&&currentClickKey==vo&&remindlist.length>=1}}"></view>
                </view>
            </view>
        </view>
    </view>
    css
    /* 日历 */
    .gradient{
      background: #fff;
      margin-bottom: 16rpx;
      overflow: hidden;
      border-bottom: 1rpx solid #f1f1f1;
     }
     .gradient .box{
      padding: 0 24rpx;
     }
     .glyphicon .iconfont{
      font-size: 46rpx;
     }
     .spaceAroundCenter {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      justify-content: space-around;
     }
     .spaceAroundCenter_date{
      font-size: 28rpx;
     }
     .flex-item {
      /* flex-flow: nowrap;
      flex-grow: 1;
      flex-shrink: 1; */
       14.2%;
      /* padding: 10rpx 0; */
      height: 85rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 51rpx;
     }
      
     .item-content {
      font-size: 28rpx;
      80%;
      height: 60%;
     }
      /* 当前日期 */
     .bk-color-day {
      color: #fff;
      border-radius: 50%;
      background-color: #dd5923;

     }
     
     /* 当前选中日期 */
     .bk-color-dayClick {
      color: #fff;
      border-radius: 50%;
      background-color: #30318b;
     }
      
     .item-content-current-day {
      flex-grow: 2;
     }
     .day_item{
      position: relative;
     }
     .day_item_circle{
       10rpx;
      height: 10rpx;
      background: #dd5923;
      position: absolute;
      bottom: 0;
      border-radius: 50%;
     }
     .product-list {
       30%;
      box-sizing: border-box;
      
     }
      
      
     .choice-bar {
      position: fixed;
      display: flex;
       30%;
      font-size: 14px;
      background-color: #fff;
      /**z-index: 0;**/
     }
     .chioce-item {
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
       100%;
      height: 80rpx;
      border-top: 1rpx solid #ddd;
      border-bottom: 1rpx solid #ddd;
      border-left: 1rpx solid #ddd;
      /*border-right: 1rpx solid #ddd;*/
     }
      
     .icon-chioce {
      height: 30rpx;
       30rpx;
     }
     .district-list,.sorting-list,.filter-list {
      margin-top: 2rpx;
      position: absolute;
      top: 80rpx;
      left: 0;
       100%;
      background-color: #fff;
      z-index: -1;
      font-size: 14px;
      border-bottom: 1rpx solid #ddd;
     }
     .chioce-list-hide {
      display: none !important;
     }
     .chioce-list-show {
      /**top: 80rpx;**/
      animation: slide 500ms;
     }
      
     .sorting-item {
      height: 80rpx;
      line-height: 80rpx;
      padding: 0 40rpx;
      border-bottom: 1rpx solid #ddd;
     }
    正道的光终将来临,当太阳升起的时候,光芒总会普照大地温暖人间。些许的阴霾也终会有被阳光洒满的一天
  • 相关阅读:
    java设计模式简介
    java设计模式--单例模式
    判断整形回文数
    常用正则表达式 捕获组(分组)
    [转]十分钟搞定Vue搭建
    ActiveX界面已显示,调用方法报undefined的处理办法
    [转]纯js导出json到excel(支持chrome)
    webapi 开启gzip压缩
    webapi下载文件
    iis添加共享目录为虚拟目录
  • 原文地址:https://www.cnblogs.com/sjruxe/p/14948658.html
Copyright © 2011-2022 走看看