最近在做微信小程序，我想做一个日历，想要实现点击箭头展开日历，并且箭头方向也随之变化。经过学习终于掌握了，下来大家讲解一下。
直接堆代码了：
wxml：
<view class='viewDa'> <text class='rword2'>{{month}}月{{year}}</text> <view class='viewon' bindtap='onChangeShowState'> <image class='iamg' src="{{isFold?'../../image/向下箭头.png':'../../image/向上箭头.png'}}"></image> </view> </view> <view class="bright789_view_hide{{showView?'bright789_view_show':''}}"> <view class='wrap'> <view class='date-show'> <view class='lt-arrow' bindtap='lastMonth'> <image src='/image/左箭头.png' mode='aspectFit'></image> </view> {{year}}年{{month}}月 <view class='rt-arrow' bindtap='nextMonth'> <image src='/image/右箭头.png' mode='aspectFit'></image> </view> </view> <view class='header'> <view wx:for='{{date}}' wx:key="unique" class='{{(index == todayIndex) && isTodayWeek ? "weekMark" : ""}}'>{{item}} </view> </view> <view class='date-box'> <view wx:for='{{dateArr}}' wx:key="unique" class='{{isToday == item.isToday ? "nowDay":""}}'data-date='{{item.isToday}}'> <view class='date-head'> <view>{{item.dateNum}}</view> </view> </view> </view> </view> </view>wxss：
.viewDa{ display: flex; flex-direction: row; justify-content: flex-start; } .viewon{ margin-left: 5px; } .iamg{ margin-top:45px; width: 20px; height:20px; } .logo{ height: 5%; width: 40%; } .rword2{ margin-left: 110px; margin-top:40px; display: flex; font-size:30px; font-family:"楷体"; background: white; } .weather{ padding: 50rpx; height: 5%; } .plan{ padding: 50rpx; height: 5%; } .tutorial{ padding: 50rpx; height: 5%; } .bright789_view_hide{ display: none; } .bright789_view_show{ display: block; } .date-show{ position: relative; width: 250rpx; font-family: PingFang-SC-Regular; font-size: 40rpx; color: #43d4d4; /* 年月的颜色*/ text-align: center; margin: 59rpx auto 10rpx; } .lt-arrow,.rt-arrow{ position: absolute; top: 1rpx; width: 60rpx; height: 60rpx; padding-right: 0.6rem; } .lt-arrow image,.rt-arrow image{ width: 40rpx; height: 40rpx; } .lt-arrow{ left: -110rpx; /* transform: rotate(180deg); */ } .rt-arrow{ right: -100rpx; } .header{ font-size: 0; padding: 0 24rpx; } .header>view{ display: inline-block; width: 14.285%; color: #43d4d4; font-size: 30rpx; text-align: center; border-bottom: 1px solid rgb(208, 208, 208); padding: 39rpx 0; } .weekMark{ position: relative; } .weekMark view{ position: absolute; bottom: 0; left: 0; width: 100%; border-bottom: 1px solid #43d4d4; /*星期下划线*/ } .date-box{ font-size: 0; padding: 10rpx 0; } .date-box>view{ position: relative; display: inline-block; width: 14.285%; color: #43d4d4; font-size: 40rpx; text-align: center; vertical-align: middle; margin: 15rpx 0; } .date-head{ height: 60rpx; line-height: 60rpx; font-size: 26rpx; } .nowDay .date-head{ width: 60rpx; border-radius: 50%; text-align: center; color: #fff; background-color: #43d4d4; margin: 0 auto; } .nowDay .date-weight{ color: #22A7F6; }js:
const app = getApp() Page({ /** * 页面的初始数据 */ data: { year: 0, month: 0, date: ['日', '一', '二', '三', '四', '五', '六'], dateArr: [], isToday: 0, isTodayWeek: false, todayIndex: 0, isFold:false, showView: false, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { wx.showLoading({ title: '加载中', }); setTimeout(function () { wx.hideLoading() }, 500); var TIME = util.formatTime(new Date()); this.setData({ time: TIME }); //console.log(options) //console.log(this.data.time) }, onLoad: function () { /****日历函数*/ let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; this.dateInit(); this.setData({ year: year, month: month, isToday: '' + year + month + now.getDate() }) }, dateInit: function (setYear, setMonth) { //全部时间的月份都是按0~11基准，显示月份才+1 let dateArr = []; //需要遍历的日历数组数据 let arrLen = 0; //dateArr的数组长度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数 let nextMonth = (month + 1) > 11 ? 1 : (month + 1); let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期 let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天 let obj = {}; let num = 0; if (month + 1 > 11) { nextYear = year + 1; dayNums = new Date(nextYear, nextMonth, 0).getDate(); } arrLen = startWeek + dayNums; for (let i = 0; i < arrLen; i++) { if (i >= startWeek) { num = i - startWeek + 1; obj = { isToday: '' + year + (month + 1) + num, dateNum: num, weight: 5 } } else { obj = {}; } dateArr[i] = obj; } this.setData({ dateArr: dateArr }) let nowDate = new Date(); let nowYear = nowDate.getFullYear(); let nowMonth = nowDate.getMonth() + 1; let nowWeek = nowDate.getDay(); let getYear = setYear || nowYear; let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth; if (nowYear == getYear && nowMonth == getMonth) { this.setData({ isTodayWeek: true, todayIndex: nowWeek }) } else { this.setData({ isTodayWeek: false, todayIndex: -1 }) } }, lastMonth: function () { //全部时间的月份都是按0~11基准，显示月份才+1 let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year; let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2; this.setData({ year: year, month: (month + 1) }) this.dateInit(year, month); }, nextMonth: function () { //全部时间的月份都是按0~11基准，显示月份才+1 let year = this.data.month > 11 ? this.data.year + 1 : this.data.year; let month = this.data.month > 11 ? 0 : this.data.month; this.setData({ year: year, month: (month + 1) }) this.dateInit(year, month); }, onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView), isFold: (!that.data.isFold) }) }, })日历的生成我就不解释了，我在这儿主要解释一下箭头的转换，主要是这两条语句：
<image class='iamg' src="{{isFold?'../../image/向下箭头.png':'../../image/向上箭头.png'}}"></image> <view class="bright789_view_hide{{showView?'bright789_view_show':''}}">在这里设置了两个变量：isFold， showView。
大家可以看一下我在js的date中设置了他们的值：
isFold:false, showView: false,然后通过
<view class='viewon' bindtap='onChangeShowState'>绑定点击事件，然后这个方法在js中获得实现
onChangeShowState: function () { var that = this; that.setData({ showView: (!that.data.showView), isFold: (!that.data.isFold) }) }当点击的时候他们的值通过
showView: (!that.data.showView), isFold: (!that.data.isFold)得到改变。
如果大家移植代码进行测试的时候记着用自己的图片路径。
如果觉得有解决你的问题的话点个赞再走吧！
