微信小程序自定义日历效果实现教程
2 浏览量
更新于2024-09-01
收藏 57KB PDF 举报
微信小程序自定义带价格显示日历效果
微信小程序自定义带价格显示日历效果是指在微信小程序中实现一个带有价格显示的日历效果。本文将详细介绍如何实现该效果，包括相关的JS代码和实现思路。
**实现思路**
要实现微信小程序自定义带价格显示日历效果，需要完成以下几个步骤：
1. 首先，需要在Page对象中定义相关的数据，包括年、月、日、星期几、价格等信息。
2. 然后，在onLoad事件中，需要获取当前的年、月、日，并将其设置到数据中。
3. 接下来，需要使用wx.getSystemInfo方法获取系统信息，并将其设置到数据中。
4. 在createDateListData函数中，需要遍历所有的日期，并将其添加到日历数组中。
5. 最后，在模板中，需要使用循环语句来遍历日历数组，并将日期和价格显示出来。
**JS代码分析**
在JS代码中，我们可以看到，首先定义了一个Page对象，并在其data中定义了相关的数据，包括年、月、日、星期几、价格等信息。
在onLoad事件中，我们可以看到，使用了new Date()方法来获取当前的年、月、日，并将其设置到数据中。同时，还使用了wx.getSystemInfo方法来获取系统信息，并将其设置到数据中。
在createDateListData函数中，我们可以看到，使用了for循环来遍历所有的日期，并将其添加到日历数组中。同时，还使用了moment.js库来格式化日期。
**实现效果**
通过上述实现思路和JS代码，我们可以实现一个带有价格显示的日历效果。在微信小程序中，我们可以使用该效果来显示酒店房价、机票价格、酒店预订价格等信息。
**优点**
微信小程序自定义带价格显示日历效果有以下几个优点：
1. 灵活性强：该效果可以根据需要进行自定义，例如可以显示不同的价格、日期格式等。
2. 易于实现：该效果的实现思路较为简单，只需要在Page对象中定义相关的数据，并使用wx.getSystemInfo方法获取系统信息。
3. 可读性强：该效果可以将日期和价格显示出来，方便用户阅读和比较。
**结论**
微信小程序自定义带价格显示日历效果是一个非常有用的功能，可以应用于酒店预订、机票预订、旅游预订等领域。通过本文，我们可以了解如何实现该效果，并将其应用于实际项目中。
微信小程序自定义带价格显示日历效果微信小程序自定义带价格显示日历效果
主要为大家详细介绍了微信小程序自定义带价格显示日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义日历效果的具体代码，供大家参考，具体内容如下
JS代码：
var Moment = require("../../utils/moment.js");
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Page({
data: {
year: '',
month: '',
day: '',
days: {},
systemInfo: {},
weekStr: ['日', '一', '二', '三', '四', '五', '六'],
checkDate:[]
},
onLoad: function(options) {
var _this = this;
let now = new Date();
let year = now.getFullYear();
let month = now.getMonth() + 1;
// 页面初始化 options为页面跳转所带来的参数
this.createDateListData();
this.setData({
year: year,
month: month
})
wx.getSystemInfo({
success: function(res) {
_this.setData({
systemInfo: res,
});
}
})
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
},
/**创建日历数据 */
createDateListData: function(setYear, setMonth) {
//全部时间的月份都是按0~11基准，显示月份才+1
let dateArr = []; //需要遍历的日历数组数据
let arrLen = 0; //dateArr的数组长度
let now = setYear ? new Date(setYear, setMonth) : new Date();
let year = setYear || now.getFullYear();
let nextYear = 0;
let month = setMonth || now.getMonth();
//没有+1方便后面计算当月总天数
let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
console.log("当前选中月nextMonth：" + nextMonth);
//目标月1号对应的星期
let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay();
console.log("目标月1号对应的星期startWeek:" + startWeek);
//获取目标月有多少天
let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();
console.log("获取目标月有多少天dayNums:" + dayNums);
let obj = {};
let num = 0;
if (month + 1 > 11) {
nextYear = year + 1;
dayNums = new Date(nextYear, nextMonth, 0).getDate();
}
for (var j = -startWeek + 1; j <= dayNums; j++) {
var tempWeek = -1;
if (j > 0) {
tempWeek = this.getWeek(year, nextMonth, j);
//console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);
}
var clazz = '';
if (tempWeek == 0 || tempWeek == 6)
clazz = 'week'
if (j < DATE_DAY && year == DATE_YEAR && nextMonth == DATE_MONTH)
//当天之前的日期不可用
clazz = 'unavailable ' + clazz;
else
clazz = '' + clazz
/**如果当前日期已经选中，则变色 */
var date = year + "-" + nextMonth + "-" + j;
var index = this.checkItemExist(this.data.checkDate, date);
if (index != -1) {
clazz = clazz + ' active';
}
dateArr.push({
day: j,
class: clazz,
amount:'￥99.8'
})
}
this.setData({
days: dateArr
})
},
/**
* 上个月
*/
lastMonthEvent:function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
this.setData({
year: year,
month: (month + 1)
})
this.createDateListData(year, month);
},
/**
* 下个月
*/
nextMonthEvent:function(){
//全部时间的月份都是按0~11基准，显示月份才+1
let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
let month = this.data.month > 11 ? 0 : this.data.month;
this.setData({
year: year,
month: (month + 1)
})
this.createDateListData(year, month);
下载后可阅读完整内容，剩余3页未读，立即下载
2020-06-05 上传
2020-09-09 上传
2020-10-17 上传
2019-08-05 上传
2021-06-01 上传
点击了解资源详情
weixin_38625351
- 粉丝: 3
- 资源: 943
我的内容管理
展开
