微信小程序实现箭头方向转换与日历展开功能

最新推荐文章于 2024-08-09 07:59:54 发布

DELICACY.

最新推荐文章于 2024-08-09 07:59:54 发布

阅读量3.5k

点赞数 1

文章标签：微信小程序箭头方向转换日历折叠

本文链接：https://blog.csdn.net/Mr_yuntuo/article/details/90550097

版权

本文介绍了如何在微信小程序中实现点击箭头展开日历功能，并同步变换箭头方向。通过设置变量isFold和showView，结合WXML、WXSS和JS代码，利用点击事件改变变量值，从而控制日历的显示和箭头的方向。移植代码时注意调整图片路径。

摘要由CSDN通过智能技术生成

最近在做微信小程序，我想做一个日历，想要实现点击箭头展开日历，并且箭头方向也随之变化。经过学习终于掌握了，下来大家讲解一下。

直接堆代码了：

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='{