微信小程序日历（下拉、收起、点击、小圆点、月份切换）

项目开发中应用的一个小日历功能，写的时候挺复杂但是写出来整理还是觉得挺简单的，整理完以后没有在实际页面中去跑，有问题大家留言或者自己解决(本人样式布局巨好看希望大家喜欢芜湖~)！

html

<view class="ban-all"><view class="date_week"><image class="left" src="../../images/left1.png" bindtap="leftime" style="margin-left: 25rpx;"></image><view class="date">{{year}}年{{month}}月</view><image class="right" src="../../images/right1.png" bindtap="rightime"></image></view><view class="calendar"><view class="calendar-weeks"><view style="color: rgba(234, 128, 87, 1);">日</view><view>一</view><view>二</view><view>三</view><view>四</view><view>五</view><view style="color: rgba(234, 128, 87, 1);">六</view></view><view class="calendar-days"><view wx:for="{{ lineflag?dayf:days }}" class="{{ item.currmonth ? 'currmonth1' : '' }}"><view data-id="{{item.date}}" bindtap="getdaylist" class="{{ item.currmonth ? 'currmonth' : '' }}">{{ item.day }}</view><!-- 小圆点的添加 --><!-- <view wx:if="{{item.show}}" class="one"></view> --></view><view style="width: 670rpx;height: 36rpx;" bindtap="chanline"><image src="{{lineflag?'../../images/morebot.png':'../../images/moretop.png'}}"style="width: 28rpx;height: 36rpx;margin-top: -20rpx;"></image></view></view></view>
</view>

css


Page({/*** 页面的初始数据*/data: {day: [], //日历years: '',lineflag: true},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {this.calendar()this.getDays(this.data.y, this.data.m)},// 传参// 日期加传参calendar() {let now = new Date();let y = now.getFullYear()let m = now.getMonth()this.setData({y,m,})},// 日历getDays(ye, mo) {let that = thislet date = new Date(ye, mo)const y = date.getFullYear()const m = date.getMonth()let curYear = ylet curMonth = m//获取当前月份天数let curDays = new Date(curYear, curMonth + 1, 0).getDate()//获取上个月天数let preDays = new Date(curYear, curMonth, 0).getDate()//这个月第一天星期几let monWeek = new Date(curYear, curMonth, 1).getDay()//这个月最后一天星期几let lastWeek = new Date(curYear, curMonth + 1, 0).getDay()let allDays = []// 上个月let mgo = mlet mmgo = mgo < 10 ? ('0' + mgo) : mgo;for (let i = 0; i < monWeek; i++, preDays--) {let obj = {currmonth: false,day: preDays,date: y + '-' + mmgo + '-' + `${preDays < 10 ? ('0' + preDays) : preDays}`}allDays.unshift(obj)}// 这个月let mone = m + 1let mm = mone < 10 ? ('0' + mone) : mone;for (let i = 1; i <= curDays; i++) {let obj = {currmonth: false,day: i,date: y + '-' + mm + '-' + `${i < 10 ? ('0' + i) : i}`}// if (i == toDay) {//   obj['today'] = true// }allDays.push(obj)}// 下个月let mdo = m + 2let mmdo = mdo < 10 ? ('0' + mdo) : mdo;for (let i = 1; i < 7 - lastWeek; i++) {let obj = {currmonth: false,day: i,date: y + '-' + mmdo + '-' + `${i < 10 ? ('0' + i) : i}`}allDays.push(obj)}that.setData({days: allDays,dayf: allDays.slice(0,14),year: y,month: m + 1,})// 想设置日期下方的小圆点可以在这边循环allDays添加一个控制小圆点的true false，我加的key是show},// 上个月leftime() {this.setData({m: this.data.m - 1})this.getDays(this.data.y, this.data.m)},// 下个月rightime() {this.setData({m: this.data.m + 1})this.getDays(this.data.y, this.data.m)},//获取当天   getdaylist(e) {let that = thisif (that.data.lineflag) {that.data.days.forEach((item, index) => {let b = "days[" + index + "].currmonth"that.setData({[b]: false})})that.data.dayf.forEach((item, index) => {let b = "dayf[" + index + "].currmonth"that.setData({[b]: false})if (item.date == e.currentTarget.dataset.id) {let a = "dayf[" + index + "].currmonth"that.setData({[a]: true,})}})} else {that.data.dayf.forEach((item, index) => {let b = "dayf[" + index + "].currmonth"that.setData({[b]: false})})that.data.days.forEach((item, index) => {let b = "days[" + index + "].currmonth"that.setData({[b]: false})if (item.date == e.currentTarget.dataset.id) {let a = "days[" + index + "].currmonth"that.setData({[a]: true,})}})}},// 改变行数chanline(){this.setData({lineflag:!this.data.lineflag})},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

css

/* pagesStudy/Tobecompleted/Tobecompleted.wxss */
page {background: rgba(249.9, 249.9, 249.9, 1);}.ban-all{width: 670rpx;margin: 20rpx auto;border-radius: 16rpx;background: rgba(255, 255, 255, 1);box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(144, 144, 144, 0.1);}.calendar {width: 670rpx;margin: 20rpx auto;display: flex;flex-flow: column nowrap;}.calendar-weeks {display: flex;flex-flow: row nowrap;justify-content: space-between;align-items: center;}.calendar-weeks view {box-sizing: border-box;width: 14.28%;padding: 5%;display: flex;justify-content: center;font-size: 28rpx;font-weight: 500;color: rgba(53, 59, 80, 1);}.calendar-days {display: flex;flex-flow: row wrap;justify-content: space-between;align-items: center;}.calendar-days view {box-sizing: border-box;width: 14.28%;padding: 4%;display: flex;justify-content: center;font-size: 28rpx;font-weight: 500;}.calendar-days view:not(.currmonth) {color: rgba(21, 35, 46, 1);}.currmonth1 {background: rgba(31, 104, 194, 1);color: rgba(255, 255, 255, 1);border-radius: 25rpx;height: 50rpx;text-align: center;line-height: 5rpx;width: 80%;}.currmonth {color: rgba(255, 255, 255, 1);}.date_week {width: 670rpx;margin: 20rpx auto;height: 86rpx;border-bottom: 1rpx solid rgba(247, 247, 247, 1);display: flex;align-items: center;color: rgba(21, 35, 46, 1);font-size: 32rpx;line-height: 32rpx;}.date_week .date {font-size: 32rpx;font-weight: 600;color: rgba(21, 35, 46, 1);}.right {width: 28rpx;height: 28rpx;}.left {width: 28rpx;height: 28rpx;}/* 小圆点样式 *//* .one {background: rgba(31, 104, 194, 1);width: 8rpx;height: 8rpx;border-radius: 50%;position: relative;top: 54rpx;left: -8rpx;} */

微信小程序日历（下拉、收起、点击、小圆点、月份切换）相关推荐

安卓小程序自定义下拉刷新_支付宝小程序设计设计指南
本篇<设计指南>从7个维度分析: 导航(架构清晰,指引明确).界面(明辨主次,重点明确).流程(流程明确,避免打扰).引导(操作向导,降低成本).反馈(反馈及时,减少焦虑).容错(用户可控 ...
php 类似微信下拉菜单,微信小程序模拟下拉菜单开发实例
本文主要和大家分享微信小程序模拟下拉菜单开发实例,希望能帮助到大家. 一.知识点 1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function() ...
微信小程序实现下拉刷新
微信小程序实现下拉刷新配置json文件在js文件中写下拉刷新方法注意配置json文件如果需要全局使用下拉刷新就在app.json中设置如果为单页面使用则在页面json设置即可 " ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序搜索下拉框排名原理及使用方法「干货」
自从2017年1月份微信推出小程序以来,小程序的火热程度大家是有目共睹的,从一开始的精确搜索,到后面的模糊搜索,小程序的更新速度远远超过了外界的期待!虽然小程序目前已经有五十几个入口,但是关键词搜索这 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
小程序picker下拉框选择时间，只需要年和月
小程序picker下拉框选择时间,只需要年和月官方提供的组件可以选择到日我们现需要选择到月,只需要在代码里加上fields="month" <view class=&qu ...
微信小程序五下拉刷新
微信小程序提供了原声的下拉刷新,三个小点的下拉刷新. 在.json 中写 {"enablePullDownRefresh": true, //开启下拉刷新"backgro ...
微信小程序界面下拉刷新实现方法
微信小程序中,通过下拉刷新页面是基本操作,在当前页面排满的情况下继续下拉加载更多内容.小程序和网页都可以实现这一功能,不同的是小程序界面有能实现下拉刷新功能的API,只需从系统调用即可. 通过查看微信 ...
php 类似微信下拉菜单,微信小程序实现下拉框（附代码）
微信小程序里没有和HTML里的下拉框一样的组件,想要相同的效果只能自己写一个,先看效果下面来看一下代码: 首先WXML {{selectData[index]}} {{item}} 然后WXSS(如 ...

微信小程序日历（下拉、收起、点击、小圆点、月份切换）

html

css

css

微信小程序日历（下拉、收起、点击、小圆点、月份切换）相关推荐

最新文章

热门文章