微信小程序可滑动周日历组件使用详解

网络编程 2024/11/16 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

微信小程序可滑动周日历组件，供大家参考，具体内容如下

看网上周日历组件比较少，自己弄了一个，和大家分享一下。

如果样式变形，请检查是否有共用样式起冲突

展示一下效果图

在components组件文件夹下新建calendarWeek文件夹

直接上代码吧：

index.wxml

<!--components/calendarWeek/index.wxml-->
<!-- 日历 -->
<view class="date-choose shrink border-bottom10">

 <picker mode="date" bindchange="tiaotime"><view class="data-month">{{dateYear}}{{dateMonth}}</view></picker>
 <swiper class="date-choose-swiper" circular="true" 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}}">
 <!-- <view>{{day.ids}}</view> -->
 <view class="day" id="{{day.id}}" bindtap="chooseDate" >
 <text class="{{dateCurrentStr==day.id" >{{day.day}}</text>
 </view>
 </block>
 </view>
 </swiper-item>
 </block>
 </swiper>
</view>
<!-- 日历 -->

index.wxss

/* components/calendarWeek/index.wxss */

.date-choose {
 background: #fff;
 overflow: hidden;
 height: auto;
}
.data-month {
 width: 100%;
 align-items: center;
 padding: .35rem .35rem;
 text-align: left;
 color: #333;
 font-size: 38rpx;
}
.date-choose-swiper {
 flex-grow: 1;
 height: 182rpx;
}
.swiper-item {
 display: flex;
 flex-direction: column;
}
.weekday, .dateday {
 display: flex;
 justify-content: space-between;
 align-items: center;
 text-align: center;
 flex-wrap: wrap;
 flex-grow: 1;
}
.week, .day {
 width: 14.286%;
 flex-basis: 14.286%;
}
.week{
 color: #999;
 font-size: 24rpx;
}
.day text {
 position: relative;
 color: #333333;
}
.day .active:before {/* 圈圈 */
 content: "";
 position: absolute;
 width: 76rpx;
 height: 76rpx;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 border: 1px solid red;
 border-radius: 100%;
 background: red;
 opacity: 0.1;
 z-index: -1;
}
.day text.active {
 color: red
}
.day text.reds {
 color: #ff0000;
}
/*开始*/

.headerone {
 width: 100%;
 height: auto;
 font-size: 24rpx;
 /* margin: 0 30rpx; */
}
.headerone .ra {
 margin-right: 20rpx;

}
.headerone .radio-group{
 margin: 20rpx 0 20rpx 30rpx;
}
.headertwo {
 width: 100%;
 height: auto;
 font-size: 24rpx;
 margin-top: 10rpx;
 margin-bottom: 26rpx;
}
.headertwo .le image {
 width: 70rpx;
 height: 70rpx;
 border-radius: 10px;
 margin-left: 30rpx;
 margin-right: 20rpx
}
.headertwo .ri {
 flex: 1;
 margin-right: 30rpx;
 border-radius: 6px;
 box-shadow:0px 1px 6px 0px rgba(198,198,198,0.5);
}
.headertwo .ri .one{
 width: 100%;
 padding-top: 24rpx;
 padding-bottom :24rpx
}
.headertwo .ri .one view .jiao {
 margin: 0 16rpx;
 border:15rpx solid;
 /* margin-top: 15rpx; */
 border-color: #ffffff #ffffff #b3b3b3 #ffffff;
}
.xi {
 background: red;
 color: #ffffff;
 padding:3px 10px;
 border-radius: 6px 0px 0 6px;

}
.headertwo .ri .one view view.jiaos {
 margin: 0 16rpx;
 border:15rpx solid;
 margin-top: 14rpx;
 border-color:#b3b3b3 #ffffff #ffffff #ffffff;
}
.headertwo .ri .two{
 width: 100%;
 overflow: hidden;
 transition: all 0.5s
}
.headertwo .ri .two .body{
 width: 100%;
 /* padding-left: 60rpx; */
 /* padding-right: 22rpx; */
 padding-top: 24rpx;
 padding-bottom :24rpx;

}

index.js

// components/calendarWeek/index.js
var utils = require('./util.js')
Component({
 /**
 * 组件的属性列表
 */
 properties: {

 },

 /**
 * 组件的初始数据
 */
 data: {
 valtime: 8,
 dateList: [], // 日历数据数组
 swiperCurrent: 0, // 日历轮播正处在哪个索引位置
 dateCurrent: new Date(), // 正选择的当前日期
 dateCurrentStr: '', // 正选择日期的 id
 dateMonth: '1月', // 正显示的月份
 dateListArray: ['日', '一', '二', '三', '四', '五', '六'],
 },
 ready: function () {
 var that = this;
 var today = utils.formatTime2(new Date());
 this.setData({
 today,
 });
 var d = new Date();
 this.initDate(-5, 2, d); // 日历组件程序 -4左表示过去4周 右1表示过去一周

 },
 /**
 * 组件的方法列表
 */
 methods: {
 tiaotime(e) {
 let data = e.detail.value.split("-")
 var d = new Date(Number(data[0]), Number(data[1]) - 1, Number(data[2]));
 this.setData({
 dateList: []
 })
 this.initDate(-5, 2, d); // 日历组件程序 -4左表示过去4周 右1表示过去一周
 },
 onShow: function (e) {
 wx.getSystemInfo({
 success: (res) => {
 this.setData({
 windowHeight: res.windowHeight,
 windowWidth: res.windowWidth,
 });
 }
 });
 },

 // 日历组件部分
 // ----------------------------
 initDate(left, right, d) {
 var month = utils.addZero(d.getMonth() + 1),
 year = utils.addZero(d.getFullYear()),
 day = utils.addZero(d.getDate());
 for (var i = left; i <= right; i++) {
 this.updateDate(utils.DateAddDay(d, i * 7));//多少天之后的
 }
 
 this.setData({
 swiperCurrent: 5,
 dateCurrent: d,
 dateCurrentStr: d.getFullYear() + '-' + month + '-' + day,
 dateMonth: month + '月',
 dateYear: year + '年',
 dateCurrentStr: year + "-" + month + "-" + day,
 });
 },
 // 获取这周从周日到周六的日期
 calculateDate(_date) {
 var first = utils.FirstDayInThisWeek(_date);
 var d = {
 'month': first.getMonth() + 1,
 'days': [],

 };
 for (var i = 0; i < 7; i++) {
 var dd = utils.DateAddDay(first, i);
 var day = utils.addZero(dd.getDate()),
 year = utils.addZero(dd.getFullYear()),
 month = utils.addZero(dd.getMonth() + 1);

 d.days.push({
 'day': day,
 'id': dd.getFullYear() + '-' + month + '-' + day,
 'ids': dd.getFullYear() + ',' + month + ',' + day,
 });
 }
 return d;
 },
 // 更新日期数组数据
 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) {
 const lastIndex = this.data.swiperCurrent
 , currentIndex = e.detail.current
 , dateList = this.data.dateList
 , dateListlen = this.data.dateList.length
 let flag = false
 , key = 'lastMonth' //判断是左划还是右
 // console.log(lastIndex , currentIndex)
 if (lastIndex > currentIndex) {
 lastIndex === 7 && currentIndex === 0
 "年"
 })

 },
 // 获得日期字符串
 getDateStr: function (arg) {
 if (utils.type(arg) == 'array') {
 return arr[0] + '-' + arr[1] + '-' + arr[2] + ' 00:00:00';
 } else if (utils.type(arg) == 'date') {
 return arg.getFullYear() + '-' + (arg.getMonth() + 1) + '-' + arg.getDate() + ' 00:00:00';
 } else if (utils.type(arg) == 'object') {
 return arg.year + '-' + arg.month + '-' + arg.day + ' 00:00:00';
 }
 },

 // 点击日历某日
 chooseDate(e) {
 var str = e.currentTarget.id;
 // console.log(str);
 this.setData({ dateCurrentStr: str });
 this.triggerEvent('mydata', { data: str })
 },
 }
})

要引入util.js

// 时间格式转换 yyyy/mm/dd
function formatTime(date) {
 var year = date.getFullYear()
 var month = date.getMonth() + 1
 var day = date.getDate()

 var hour = date.getHours()
 var minute = date.getMinutes()
 var second = date.getSeconds()


 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
// 时间格式转换 yyyy－mm－dd
function formatTime2(date) {
 var year = date.getFullYear()
 var month = date.getMonth() + 1
 var day = date.getDate()

 var hour = date.getHours()
 var minute = date.getMinutes()
 var second = date.getSeconds()


 return [year, month, day].map(formatNumber).join('-') 
}

function formatDate(date, split) {
 var year = date.getFullYear()
 var month = date.getMonth() + 1
 var day = date.getDate()
 return [year, month, day].map(formatNumber).join(split || '')
}

// 两位数自动补零
function formatNumber(n) {
 n = n.toString()
 return n[1] " ")[1];
 return typeStr.substr(0, typeStr.length - 1).toLowerCase();
}

module.exports = {
 formatTime: formatTime,
 formatDate: formatDate,
 formatTime2,
 DateAddDay: DateAddDay,
 FirstDayInThisWeek: FirstDayInThisWeek,
 type: Type,
 addZero: formatNumber,
}

调用组件

//json文件调用
"usingComponents": {
 "calendarMonth": "../../components/calendarWeek/index"
}

页面调用组件

//mydata触发的点击日期时触发的事件 可获取当前点击的日期
 <calendarMonth bindmydata="mydata"></calendarMonth>

当前页面js

//js里的事件
 mydata(e){ //可获取日历点击事件
 let data = e.detail.data
 console.log(data)
}

更多精彩的日历效果请学习参考专题：javascript日历插件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

微信小程序滑动周日历组件,微信小程序周日历组件,微信小程序日历组件

标签：

微信小程序滑动周日历组件,微信小程序周日历组件,微信小程序日历组件

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“微信小程序可滑动周日历组件使用详解”

暂无微信小程序可滑动周日历组件使用详解的评论...

www.ioogu.com 极乐门资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

微信小程序可滑动周日历组件使用详解

微信小程序滑动周日历组件,微信小程序周日历组件,微信小程序日历组件

微信小程序可滑动月日历组件使用详解

小程序实现横向滑动日历效果

评论“微信小程序可滑动周日历组件使用详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

微信小程序可滑动周日历组件使用详解

微信小程序滑动周日历组件,微信小程序周日历组件,微信小程序日历组件

微信小程序可滑动月日历组件使用详解

小程序实现横向滑动日历效果

评论“微信小程序可滑动周日历组件使用详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存