欢迎您访问南京安优网络官方网站,本公司专注于:网站制作、小程序开发、网站推广。 24小时服务热线:400-8793-956
当前位置:南京网站制作公司 > 资讯中心 > 网站知识
南京小程序开发公司分享微信applet日历效果
来源:南京网站制作 时间:2019-05-22 08:25:36

在本文中,南京小程序开发公司安优网络我们将分享微信applet的日历效果的具体代码供您参考。详情如下所示。

 
来源下载地址
 
该项目需要日历功能。实施微信小程序日历花了一天时间。JS的大小只有几K.引导字体图标(文件图标.wxss,其中包含bootstrap字体图标所需的字体)似乎是80k,以及整个图标。wxss只有几K.如果您有任何疑问,请更正。
 
如图所示:

 
index.wxml 
 
<view>
 <view>
  <view>
   <view>
    <view bindtap="doDay" data-key='left'>
     <view></view>
    </view>
   </view>
   <view>
    <view>{{currentDate}}</view>
   </view>
   <view>
    <view bindtap="doDay" data-key="right">
     <view></view>
    </view>
   </view>
  </view>
  <view>
   <view>
    <view>1</view>
   </view>
   <view>
    <view>2</view>
   </view>
   <view>
    <view>3</view>
   </view>
   <view>
    <view>4</view>
   </view>
   <view>
    <view>5</view>
   </view>
   <view>
    <view>6</view>
   </view>
   <view>
    <view>day</view>
   </view>
  </view>
  <view>
   <view wx:for="{{currentDayList}}" wx:for-index='key' wx:for-item="vo" wx:key="{{key}}">
     <view wx:if="{{currentDay != vo}}">{{vo}}</view>
     <view wx:else>{{vo}}</view>
   </view>
  </view>
 </view>
</view>
index.wxss
 
 
@import '../../dist/css/icon.wxss';
page {
 background-color: #2a8cef;
 background:-webkit-gradient(linear, 0 0, 0 bottom, from(#2a8cef), to(#8A2BE2));
 display: flex;
 flex-direction: column;
 width: 100%;
 height: 100%;
 flex-wrap: nowrap;
 justify-content: flex-start;
 align-items: stretch;
 font-size: 14px;
}
 
.box {
 display: block;
 margin: 10px;
}
 
.box-flex {
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
}
 
.flex-item {
 flex-flow: nowrap;
 flex-grow: 1;
 flex-shrink: 1;
 width: 14.2%;
}
 
.item-content {
 margin: 5px;
 padding: 0 10px;
 text-align: center;
 background-color: #000;
 height: 2rem;
 line-height: 2rem;
 color: #fff;
}
 
.bk-color-day {
 background-color: #8A2BE2;
}
 
.item-content-current-day {
 flex-grow: 2;
}
index.js 
 
var app = getApp();
Page({
  data: {
    CurrtDate:'03 May 2017'.
    dayList: '',
    currentDayList: '',
    currentObj: '',
    currentDay: ''
  },
  onLoad: function (options) {
    var currentObj = this.getCurrentDayString()
    this.setData({
      CurrtDate: currentObj. getFullYear () +'year'+ (currentObj. getMonth () + 1) +'month' + currentObj. getDate () +'day',
      currentDay: currentObj.getDate(),
      currentObj: currentObj
    })
    this.setSchedule(currentObj)
  },
  doDay: function (e) {
    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({
      CurrtDate: currentObj. getFullYear () +'year'+ (currentObj. getMonth () + 1) +'month' + currentObj. getDate () +'day',
      currentObj: currentObj
    })
    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
    })
  }
})
以上是本文的全部内容。我希望它对每个人的学习都有所帮助,我希望你能更多地支持南京小程序开发公司。

本文地址:http://www.ccdiya.com/web/2505.html
Tag:
专业服务:南京网站制作,南京网站制作公司,南京网站建设公司
联系电话:025-65016872
上一篇: 南京小程序开发公司是如何通过微信小程序实现的复选框效果
下一篇: 返回列表
最新案例
泰杰赛
泰杰赛
苏派教育
苏派教育
全国大学生公共卫生大赛
全国大学生公共卫生大赛
南京德普筒仓建安工程宏图棋牌官网
南京德普筒仓建安工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
中国非金属材料南京矿山工程宏图棋牌官网
你可能感兴趣
2019年制定视频营销战略的7个步骤
2019年的营销趋势我们非常关注
您的电子商务商店可以从亚马逊学到什么?
了解SEO的WordPress博客标签
非营利网站的筹款技巧
SEO审核清单:您应该寻找什么?
如何为您的非营利组织创建更好的用户调查
4种方式内部链接构建SEO和转换潜在客户
最后更新
南京小程序开发公司分享微信applet日历效果 南京小程序开发公司是如何通过微信小程序实现的复选框效果 被遗忘的搜索引擎优化任务提升排名 什么是推荐的2019年页面加载时间? 使用面包屑导航改善用户体验的方法 南京小程序开发公司教你实现微信小程序星级评价效果 南京小程序开发说说微信小程序中时间控制选择器视图的详细用法 提高回访率的5种方法
服务项目
南京网站制作 营销型网站 微信营销 IDC网站 精品案例
河北快3走势图 汇丰彩票充值中心 河北快3 大象彩票充值中心 八马彩票官网 江苏快3 河北快3 江苏快3 江南娱乐充值 河北快3走势图