微信小程序开发--日历/月视图

最新推荐文章于 2023-12-27 10:07:57 发布

BlueVictory

最新推荐文章于 2023-12-27 10:07:57 发布

阅读量2k

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/u010892109/article/details/117021229

版权

微信小程序专栏收录该内容

6 篇文章

订阅专栏

1、背景

接着上一篇博客，小程序日历/日视图的实现，继续做日历月视图的实现，日历/日视图的实现见下方链接。

https://mp.youkuaiyun.com/editor/html/116988764

日历/月视图实现效果图如下所示：

2、实现

从上面的效果图中可以看到，实现分为两部分，上面一部分是自定义的日历周视图组件，在上一篇文章日历/日视图中有具体的实现，在此就不做进一步说明了。

下面我们就主要看下下半部分的实现。

2.1 日历月视图实现

1）在微信开发者工具中 app.json文件中新增"pages/calendarmonth/calendarmonth", 如下图所示：

2）在 calendarmonth.json 添加如下代码：

{
  "usingComponents": {
    "calendarweek":"../../component/calendarweek/calendarweek"
  }
}

其中： "../../component/calendarweek/calendarweek" 是自定义的calendarweek组件的路径，“calendarweek”是使用它的时候的别名，可以随意定义。

3）calendarmonth.wxml 的实现

<!--pages/calendarmonth/calendarmonth.wxml-->
<view class="page">
  <calendarweek bindmyevent="onMyEvent"></calendarweek>

    <view class="new-content">
      <block  wx:for="{{calendarList}}" wx:for-item="calendarItem"  wx:key="idx">
    <view class="item" >
      <text class="table-day-text">{{calendarItem.id}}</text>
    <block wx:for="{{calendarItem.dayData}}">
      <view class="item-sub"> 
        <view class="item-sub-content">
          <view class="table-calendar-point"></view>
        <text class="table-calendar-title">{{item.name}}</text>
        </view>
       </view>
    </block> 
    </view>
  </block>
  </view>
</view>

4）calendarmonth.wxss 代码实现

/* pages/calendarmonth/calendarmonth.wxss */
.page{
  min-height: 100vh;
  background-color: #F6F8FA;
}

.new-content{
  display: flex;
  height: 80%;
  margin-bottom: 5%;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

.item{
  background: #ffff;
  display: flex;
  flex-direction: column;
  width: 106rpx;
  height: 150rpx;
  margin-top: 2rpx;
  margin-left: 2rpx;
}

.item-sub{
  display: flex;
  flex-direction: column;
}

.item-sub-content{
  display: flex;
  flex-direction: row;
}

.table-day-text{
  font-size: 20rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #999999;
  margin-left: 9rpx;
  margin-top: 10rpx;
}

.table-calendar-point{
width: 8rpx;
height: 8rpx;
background: #44CFC7;
border-radius: 50%;
margin-left: 9rpx;
margin-top: 13rpx;
}

.table-calendar-title{
  font-size: 16rpx;
  font-family: PingFang SC;
  margin-left: 11rpx;
  color: #666666;
  margin-top: 4rpx;
}

4）calendarmonth.js 代码实现

// pages/calendarmonth/calendarmonth.js
Page({

  data:{
    calendarList:[],
  },
  
  onClickCalendar: function(e){
    console.log(e);
  },

  onMyEvent: function(e){
    console.log("选择的日期：",e.detail);
  },

  onLoad: function(options){
    let tempDatas = [];
    for(var i=0;i<31;i++){
      var obj = {
        'id':i+1,
        'dayData':[{
          "name":i+1 + "天开会"
        },{
          "name":i+1 + "天开会"
        }]
      }
      tempDatas[i] = obj;
    }
    this.setData({
      calendarList: tempDatas
    })
  },
})

好了，到此代码的实现基本完成。