代码地址如下:
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大师代发,拒绝转载,转载需要作者授权

微信小程序横版日历,tab栏的更多相关文章

  1. 微信小程序的wx-charts插件-tab选项卡

    微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...

  2. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  3. 微信小程序~TabBar底部导航切换栏

    底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...

  4. 发布微信小程序体验版

    小程序这么火,一直没有做过.因为公司有个业务需要做小程序就顺带学习了一把. 1)本次是采用<微信开发者工具 Stable v1.02.1904090>进行的开发: 2)前端使用的是微信官方 ...

  5. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  6. 微信小程序之 SideBar(侧栏分类)

    项目目录: 模拟数据: utils / data.js function getSData() { var data = [ { "id": 1, "tree" ...

  7. 微信小程序之滑动日历展示

    滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页 ...

  8. 微信小程序:实现日历功能

    一.功能描述 实现日历功能 二. 代码实现 1. index.wxml <view class='wrap'> <view> <view class='date-show ...

  9. 微信小程序点击顶部导航栏切换样式

    类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scro ...

随机推荐

  1. 部分MP4在谷歌浏览器上无法播放

    Chrome浏览器支持HTML5,它支持原生播放部分的MP4格式(不用通过Flash等插件). 为什么是部分MP4呢?MP4有非常复杂的含义(见http://en.wikipedia.org/wiki ...

  2. ArcObject10.1降级至10.0

    最开始接触ArcGIS版本是9.3,为了需要也安装了9.2进行开发:因为自己的电脑配置较低,所以跑不起10.0中文版:毕业工作后,行业内用10.1居多(虽然10.3已出):现在10.4都要出来了:由于 ...

  3. oracle中操作数据

    使用特定格式插入日期值 insert into emp values (,', to_date('1988-11-11','yyyy-mm-dd'), ); ,); 使用子查询插入数据 create ...

  4. jQuery自学笔记(三):jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  5. leetcode First Missing Positive python

    class Solution(object): def firstMissingPositive(self, nums): """ :type nums: List[in ...

  6. gif-drawable的使用及详解

    下载gif-drawable包和Demo的链接:http://pan.baidu.com/s/1eQxVKRo 本帖原创,转载的朋友请注明转载地址>:http://www.cnblogs.com ...

  7. [Gradle系列]Gradle发布module库到jCenter, 并构建自己的企业Maven私服

    Tamic 作者: http://blog.csdn.net/sk719887916/article/details/53224544 前言 andorid开发者经常会看到xx公司发布了xx项目,xx ...

  8. 使用 Markdown编辑

    作用: 学习笔记,整理日志, 发布日记,杂文,所见所想 撰写发布技术文稿(代码支持) 撰写发布学术论文(LaTeX 公式支持) sublime text3插件 输入 Shift + Ctrl + P, ...

  9. Confluence 6 管理协同编辑 - 审计的考虑

    我们知道一些客户对审计是主要考虑的方面.我们不能保证在协同编辑的时候具有审计,审查功能.所有页面的修改当前附加到用户发布页面的属性中而不是用户的特定修改. 如果这个对你来说是一个问题的话,我们建议你在 ...

  10. hive sql求多个字段的最小值和最大值的办法

    1. 准备数据表test2 create table test2( a int, b int, c int, d int, e int); 2. 准备2条数据 ,,,,); ,,,,); 查询显示如下 ...