一、前期准备工作
软件环境：微信开发者工具
官方下载地址：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栏
注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权