微信小程序横版日历，tab栏

痛定思痛。 2022-05-09 15:50 285阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14243.html][http_www.demodashi.com_demo_14243.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  实现横版日历，tab栏
 *  可控制显示时间

##### 2、案例目录结构 #####

![Ic0JhJOHgYnubM6K9cC.png][]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

<view class="container">
        <view class="header shrink">
          <view class="activity-or-brand">
            <text id="activity-btn" class="{
       {activityOrBrand==true?'active':''}}" bindtap="choose1">商场活动</text>
            <text id="brand-btn" class="{
       {activityOrBrand==false?'active':''}}" bindtap="choose1">品牌优惠</text>
          </view>
        </view>
        <view class="date-choose shrink">
          <view class="data-month">{
       {dateMonth}}</view>
          <swiper class="date-choose-swiper" indicator-dots="{
       {false}}" current="{
       {swiperCurrent}}" bindchange="dateSwiperChange">
            <block wx:for="{
       {dateList}}" wx:for-item="date" wx:key="date.id">
              <swiper-item class="swiper-item">
                <view class="weekday">
                  <block wx:for-item="weekday" wx:for="{
       {dateListArray}}" wx:key="{
       {index}}">
                    <text class="week">{
       {weekday}}</text>
                  </block>
                </view>
                <view class="dateday">
                  <block wx:for="{
       {date.days}}" wx:for-item="day" wx:key="{
       {day.id}}">
                    <text class="day" id="{
       {day.id}}" bindtap="chooseDate">
                      <text class="{
       {dateCurrentStr==day.id?'active':''}}">{
       {day.day}}</text>
                    </text>
                  </block>
                </view>
              </swiper-item>
            </block>
          </swiper>
        </view>
    </view>

##### 2.index.wxss代码 #####

/**index.wxss**/
    .header {
      padding: .5rem 0;
    }
    .activity-or-brand {
      display: -webkit-box;
      display: flex;
      background: #fff;
      justify-content: space-around;
    }
    .activity-or-brand > text {
      position: relative;
      padding: .5rem 1rem;
      width: 45%;
      text-align: center;
      margin: 0 1rem;
    }
    .activity-or-brand > text:after {
      content: "";
      position: absolute;
      left: 50%;
      width: 0;
      bottom: 0;
      border-bottom: 2px solid #666666;
      -webkit-transition: .3s;
      transition: .3s;
    }
    .activity-or-brand > .active {
      font-weight: bold;
    }
    .activity-or-brand > .active:after {
      left: 0;
      width: 100%;
    }
    
    .date-choose {
      display: flex;
      background: #fff;
      overflow: hidden;
      font-size: .8em;
    }
    .data-month {
      width: 2.6em;
      align-items: center;
      padding: .5rem .5rem;
      text-align: center;
      box-shadow: 2px 0 5px rgba(0,0,0,.4);
    }
    .date-choose-swiper {
      flex-grow: 1;
      height: 4em;
    }
    .swiper-item {
      display: flex;
      flex-direction: column;
    }
    .weekday, .dateday {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      flex-grow: 1;
    }
    .week, .day {
      width: 14.286%;
      flex-basis: 14.286%;
    }
    .day text {
      position: relative;
    }
    .day .active:before {
      content: "";
      position: absolute;
      width: 1.4em;
      height: 1.4em;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 2px solid #000;
      border-radius: 100%;
    }
    
    .main-list {
      background: #fff;
      margin-top: .5rem;
      padding: .5rem;
    }
    .main-list .list-item {
      border: 1px solid #ddd;
    }
    .main-list .list-item:not(:first-child) {
      margin-top: .5rem;
    }
    .main-list .list-content {
      position: relative;
      padding: .3rem .5rem;
    }
    .main-list .list-title {
        word-wrap: normal;
      font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      padding-right: 7.5rem;
    }
    .main-list .list-time {
      font-size: .8em;
      margin-top: .2em;
      text-align: right;
      position: absolute;
      right: .5rem;
      bottom: .3rem;
      width: 12em;
    }

##### 3.index.js逻辑代码 #####

a.数据部分的功能实现

data: {
        loading: false, // 加载中
    
        
        list: {
          activity: {pageNo: 1, data: []},
          brand: {pageNo: 1, data: []},
        },
    
        dateList: [],   // 日历数据数组
        swiperCurrent: 0, // 日历轮播正处在哪个索引位置
        dateCurrent: new Date(),  // 正选择的当前日期
        dateCurrentStr: '', // 正选择日期的 id
        dateMonth: '1月',  // 正显示的月份
        dateListArray: ['日','一','二','三','四','五','六'],
      },

b.日历组件部分

initDate () {
        var d = new Date();
        var month = utils.addZero(d.getMonth()+1),
            day = utils.addZero(d.getDate());
        for(var i=-3; i<=3; i++) {
          this.updateDate(utils.DateAddDay(d, i*7));
        }
        this.setData({
          swiperCurrent: 3,
          dateCurrent: d,
          dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
          dateMonth: month + '月',
        });
      },
      // 更新日期数组数据
      updateDate (_date, atBefore) {
        var week = this.calculateDate(_date);
        if (atBefore) {
          this.setData({
            dateList: [week].concat(this.data.dateList),
          });
        } else {
          this.setData({
            dateList: this.data.dateList.concat(week),
          });
        }
      },
      // 日历组件轮播切换
      dateSwiperChange (e) {
        var index = e.detail.current;
        var d = this.data.dateList[index];
        this.setData({
          swiperCurrent: index,
          dateMonth: d.month + '月',
        });
      },

#### 三、案例运行效果图 ####

![ZL420IWcDmXYp3fBv5j.gif][]

#### 四、总结与备注 ####

暂无微信小程序横版日历，tab栏

> 代码地址如下：  
> [http://www.demodashi.com/demo/14243.html][http_www.demodashi.com_demo_14243.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14243.html]: http://www.demodashi.com/demo/14243.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[Ic0JhJOHgYnubM6K9cC.png]: /images/20220506/6e735d65baed4795bcd5823ae12c02ad.png
[ZL420IWcDmXYp3fBv5j.gif]: /images/20220506/76c04f2d1d7943fc867ae64b4fe598c7.png