微信小程序自定义可滑动日历界面
(编辑:jimmy 日期: 2024/11/6 浏览:3 次 )
本文实例为大家分享了微信小程序可滑动日历界面的具体代码,供大家参考,具体内容如下
参考某个博主的自定义控件做了一些改动,希望这篇博客能帮助需要的人。
WXML
<view class='container'> <view class='month flex m-around'> <view class='arrow' bindtap='prevMonth'>《 </view> <view class='year-and-month'> <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange"> <view> {{date}} </view> </picker> </view> <view class='arrow' bindtap='nextMonth'> 》</view> </view> <view class='calendar flex column s-center'> <view class='week-row flex m-around'> <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view> </view> <swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'> <swiper-item class='flex m-around days-table '> <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date' class='grid {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today"{{calendar.second}}" wx:for-item='x' wx:key='x.date' class='grid {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'> <view>{{x.date === today"{{calendar.third}}" wx:for-item='x' wx:key='x.date' class='grid {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today"{{calendar.fourth}}" wx:for-item='x' wx:key='x.date' class='grid {{x.month === month"":"notCurrent"}} {{x.date === today"today":""}} {{x.date == beSelectDate "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'> <view>{{x.date === today"htmlcode">/* pages/calendar/calendar.wxss */ .container { height: 100vh; background-color: #393E44; } .days-table { flex-wrap: wrap; align-content: flex-start; } .calendar{ position: fixed; z-index:10000; background: #393E44; } .grid { width: 107.14rpx; height: 100rpx; text-align: center; line-height: 100rpx; font-size:.7rem; color:#fff; } .today { color: #88a1fd; } .grid view { height:85rpx; line-height: 85rpx; width:85rpx; } .choice view{ border-radius: 50%; background: #88a1fd; background-position:center; color: white; } /* 非本月日期 */ .notCurrent { color: silver; } .day-hover { background: red; } .swpier-box { height: 550rpx; width: 100%; } .arrow { width: 100rpx; color: #88a1fd; text-align: center; } .year-and-month{ color: #88a1fd; } .flex { display: flex; } /* 轴向 */ .column { flex-direction: column; } /* 主轴方向 */ .m-start { justify-content: flex-start; } .m-end { justify-content: flex-end; } .m-around { justify-content: space-around; } .m-between { justify-content: space-between; } .m-center { justify-content: center; } /* 侧轴方向 */ .s-start { align-items: flex-start; } .s-end { align-items: flex-end; } .s-around { align-items: space-around; } .s-between { align-items: space-between; } .s-center { align-items: center; }JS
// pages/calendar/calendar.js 'use strict'; let choose_year = null, choose_month = null; const conf = { data: { day: '', year: '', month: '', date: '2017-01', today: '', week: ['日', '一', '二', '三', '四', '五', '六'], calendar: { first: [], second: [], third: [], fourth: [] }, swiperMap: ['first', 'second', 'third', 'fourth'], swiperIndex: 1, showCaldenlar: false }, onLoad() { const date = new Date() , month = this.formatMonth(date.getMonth() + 1) , year = date.getFullYear() , day = this.formatDay(date.getDate()) , today = `${year}-${month}-${day}` let calendar = this.generateThreeMonths(year, month) this.setData({ calendar, month, year, day, today, beSelectDate: today, date: `${year}-${month}` }) }, showCaldenlar() { this.setData({ showCaldenlar: !this.data.showCaldenlar }) }, /** * * 左右滑动 * @param {any} e */ swiperChange(e) { const lastIndex = this.data.swiperIndex , currentIndex = e.detail.current let flag = false , { year, month, day, today, date, calendar, swiperMap } = this.data , change = swiperMap[(lastIndex + 2) % 4] , time = this.countMonth(year, month) , key = 'lastMonth' if (lastIndex > currentIndex) { lastIndex === 3 && currentIndex === 0 "text-align: center">以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:10行代码实现微信小程序滑动tab切换