小程序左右滑动日历(显示当前日期往后的15天，也可根据自己需求自行调整)

钟Bubble

已于 2022-07-19 13:54:20 修改

阅读量718

点赞数

分类专栏：微信小程序文章标签：小程序微信小程序前端

于 2022-07-12 12:00:20 首次发布

本文链接：https://blog.csdn.net/BubbleABC/article/details/125740322

版权

在这里插入图片描述

废话不多说，咱就是直接上代码：
wxml 代码：

<!--pages/rili/rili.wxml-->
<view class="scroll-view">
    <scroll-view scroll-left="{
    {scrollLeftIndex*itemWidth}}" scroll-x scroll-with-animation>
        <view class='item {
    {index==0?"lef":""}}' style='width:{
       {
       itemWidth}}px' wx:for="{
    {dateList}}" wx:key="key" data-index='{
    {index}}' bindtap='clickDate'>
            <view class='text-view {
    {index==clickIndex?"all-choose":""}}'>
                <text class='week {
    {index==clickIndex?"week-choose":""}}'>{
  {item.week}}</text>
                <view class='day {
    {index==clickIndex?"day-choose":""}}'>{
  {item.day}}</view>
                <!-- <text class='month'>{
   {item.month}}月</text> -->
                <!-- <view wx:if="{
   {item.month == sysmonth && item.day == nowDate}}">
                    <text class='week'>今日</text>
                </view>
                <view wx:else>
                    <text class='week'>{
   {item.week}}</text>
                </view> -->
            </view>
        </view>
    </scroll-view>
</view>

js代码：

// pages/rili/rili.js
Page({
   

    /**
     * 页面的初始数据
     */
    data: {
   
        dateList: [], //存放日期的数组
        nowDate: '', //系统当前日期
    },
    // 格式化日期，时间
    formatTime(date) {
   
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        return [year, month, day].map(this.formatNumber).join('/') + ' ' + [hour, minute, second].map(this.formatNumber).join(':')
    },
    // 格式化数字
    formatNumber(n) {
   
        n = n.toString()
        return n[1] ? n : '0' + n
    },