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

Posted 2021-01-13 demo例子集

代码地址如下：
http://www.demodashi.com/demo/14243.html

一、前期准备工作

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

1、基本需求。

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

2、案例目录结构

二、程序实现具体步骤

1.index.wxml代码

<!--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 + ‘月‘,
    });
  },

三、案例运行效果图

四、总结与备注

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

代码地址如下：
http://www.demodashi.com/demo/14243.html

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