小程序日历上下滚动

作者: 楚昂_ing | 来源:发表于2020-03-10 22:25 被阅读0次

小程序文字循环滚动效果
微信小程序公告滚动通知
微信小程序-滚动消息通知
微信小程序
微信小程序swiper上下循环滚动
uniapp 表头固定，左右滚动时显示第一列的表格
小程序日历
小程序日历
WeChat小程序视图篇~Scroll-view
小程序弹出层穿透问题的解决方案

image.png

小程序选择时间段

wxml

<view class="calendar">
    <view class="date-box">
        <view class="date-box-hd gap-line">
            <text>日</text>
            <text>一</text>
            <text>二</text>
            <text>三</text>
            <text>四</text>
            <text>五</text>
            <text>六</text>
        </view>
    <view class="date-box-con">
            <view class="month" wx:for="{{ calendars }}" wx:key="index">
                <view class="month-hd">
                    <text>{{ item.year }} 年 {{ item.month }} 月</text>
                    <!-- <text class="year">{{ item.year }}</text> -->
                </view>
                <view class="days">
                    <text wx:for="{{ item.placeholders }}" wx:key="item"></text>
                    <text
                    wx:for="{{ item.days }}"
                    wx:key="index"
                    wx:for-item="day"
                    data-timestamp="{{ day.timestamp }}"
                    bindtap="_chooseDay"
                    class="{{ (day.timestamp >= timeArr[0] && day.timestamp <= timeArr[1]) || (!timeArr[1] && timeArr[0] == day.timestamp) ? 'active' : '' }}">{{ day.text }}</text>
                </view>
            </view>
        </view>
    </view>


    <view class="select_btn">
        <button class="btn" disabled="{{!(timeArr[0] && timeArr[1])}}" bindtap="go">确认</button>
    </view>
</view>

wxss

page {
  box-sizing: border-box;
  color: #404040;
  background-color: #f9f9f9;
  padding-top: 110rpx;
}

.date-box {
  font-size: 28rpx;
  color: #404040;
  background-color: transparent;
}

.date-box-hd {
  display: flex;
  box-sizing: border-box;
  padding: 28rpx 24rpx;
  font-size: 28rpx;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 10;
}

.date-box-hd text {
  flex: 1;
  text-align: center;
}
.month{
    background-color: #fff;
    padding-bottom: 47rpx;
}
.month + .month{
    margin-top: 20rpx;
}

.month-hd {
  position: relative;
  padding: 47rpx 0 30rpx;
  font-size: 28rpx;
  text-align: center;
}

.year {
  position: absolute;
  top: 14rpx;
  right: 36rpx;
  bottom: 0;
  margin: auto;
  height: 40rpx;
  line-height: 40rpx;
  font-size: 28rpx;
  color: #ddd;
}

.days {
  display: inline-block;
  width: 100%;
  padding: 0 24rpx;
  box-sizing: border-box;
}
.days > .active:nth-of-type(1){
    border-radius: 4rpx;
}
.day-row {
  width: 100%;
  padding: 0 24rpx;
  margin-top: 60rpx;
  box-sizing: border-box;
}

.days text {
  display: inline-block;
  box-sizing: border-box;
  width: 14.285%;
  text-align: center;
  padding: 30rpx 0;
}

.disable {
  color: #cfcfcf;
}

.days text.active {
  position: relative;
  background-color: #F57033;
  color: #fff;
}

.days text.active::after {
  content: "";
  display: block;
  height: 4rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #F57033;
}

.calendar{
    padding-bottom: 100rpx;
}
.select_btn{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
}

JSON

{"enablePullDownRefresh": true}

js

Page({
    data: {
        monthCount: 5,//显示几个月份
        leastDays: 0,//最小日期间隔
        timeArr: [0, 0],//数组的两个元素分别为选中的开始毫秒时间戮和结束开始毫秒时间戮
        curYear: '',
        curMonth: '',
        curDay: '',
        calendars: [],
        sFtv: [{
            month: 1,
            day: 1,
            name: "元旦"
        },
        {
            month: 2,
            day: 14,
            name: "情人节"
        },
        {
            month: 3,
            day: 8,
            name: "妇女节"
        },
        {
            month: 3,
            day: 12,
            name: "植树节"
        },
        {
            month: 3,
            day: 15,
            name: "消费者权益日"
        },
        {
            month: 4,
            day: 1,
            name: "愚人节"
        },
        {
            month: 5,
            day: 1,
            name: "劳动节"
        },
        {
            month: 5,
            day: 4,
            name: "青年节"
        },
        {
            month: 5,
            day: 12,
            name: "护士节"
        },
        {
            month: 6,
            day: 1,
            name: "儿童节"
        },
        {
            month: 7,
            day: 1,
            name: "建党节"
        },
        {
            month: 8,
            day: 1,
            name: "建军节"
        },
        {
            month: 9,
            day: 10,
            name: "教师节"
        },
        {
            month: 9,
            day: 28,
            name: "孔子诞辰"
        },
        {
            month: 10,
            day: 1,
            name: "国庆节"
        },
        {
            month: 10,
            day: 6,
            name: "老人节"
        },
        {
            month: 10,
            day: 24,
            name: "联合国日"
        },
        {
            month: 12,
            day: 24,
            name: "平安夜"
        },
        {
            month: 12,
            day: 25,
            name: "圣诞节"
        }
        ]
    },
    onLoad: function (options) {
        //传入开始结束时间
        this._init(options);
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {
        // this.selectDataMarkLine()
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    /**
     * 页面初始化
     */
    _init: function (options) {
        console.log(options);
        if (options.startDate && options.endDate) {
            let start = new Date(options.startDate.replace(/\-/g, "/"));
            let end = new Date(options.endDate.replace(/\-/g, "/"));
            let startYear = start.getFullYear();
            let startMonth = start.getMonth();
            let endYear = end.getFullYear();
            let endMonth = end.getMonth();
            let monthCount = endYear * 12 + endMonth - (startYear * 12 + startMonth);
            this.setData({
                curYear: startYear,
                curMonth: startMonth,
                monthCount: monthCount < 5 ? 5 : monthCount + 1,
                'timeArr[0]': start.getTime(),
                'timeArr[1]': end.getTime()
            });
            console.log(this.data);
        } else {
            let date = new Date();
            this.setData({
                curYear: parseInt(date.getFullYear(), 10),
                curMonth: parseInt(date.getMonth(), 10)
            });
        }

        this._createCalendars();
    },
    /**
     * 初始化创建日期数据
     */
    _createCalendars: function () {
        let calendars = [];
        let currentYear = this.data.curYear;
        let startMonth = this.data.curMonth + 1;

        for (let i = 0; i < this.data.monthCount; i++) {
            (startMonth > 12) && (startMonth = 1) && (currentYear += 1);

            calendars.push(this._calendarFactory(currentYear, startMonth));

            startMonth += 1;
        }

        this.setData({
            calendars
        })
    },
    /**
     * 改变日期数据
     * params {
     *  Number num:添加num条
     *  String type:1,头部添加.2尾部添加
     * }
     */
    _addCalendars: function (num, type) {
        let calendars = this.data.calendars;
        if (num == 0) {
            return
        }
        if (type == 1) {
            let firstYear = calendars[0].year;
            let firstMonth = calendars[0].month;

            for (let i = 0; i < num; i++) {
                firstMonth -= 1;
                (firstMonth < 1) && (firstMonth = 12) && (firstYear -= 1);

                calendars.unshift(this._calendarFactory(firstYear, firstMonth));
            }

        } else {
            let lastYear = calendars[calendars.length - 1].year;
            let lastMonth = calendars[calendars.length - 1].month;

            for (let i = 0; i < num; i++) {
                lastMonth += 1;
                (lastMonth > 12) && (lastMonth = 1) && (lastYear += 1);
                calendars.push(this._calendarFactory(lastYear, lastMonth));

            }
        }

        this.setData({
            calendars
        })
    },
    /**
     * 根据传进来的年月获取日期数组
     * param year month
     * return {
     * String year,
     * String month,
     * Array days,
     * String startWeek,
     * Array placeholders
     * }
     */
    _calendarFactory: function (year, month) {
        let daysCount = this._getDays(year, month);
        let startWeek = this._getWeek(year, month);
        let days = Array.from(new Array(daysCount), (val, index) => {
            return {
                text: index + 1,
                timestamp: new Date(`${year}/${month}/${index + 1}`).getTime()
            };
        });
        let placeholders = Array.from(new Array(startWeek), (val, index) => index + 1);

        return {
            year,
            month,
            days,
            startWeek,
            placeholders
        }
    },
    /**
     * 根据传进来的日期获取当前getDate()
     */
    _getDays: function (year, month) {
        let day = new Date(year, month, 0);
        return day.getDate();
    },
    /**
     * 根据传进来的日期获取当前月第一天的week
     */
    _getWeek: function (year, month) {
        let date = new Date();

        date.setYear(year);
        date.setMonth(month - 1);
        date.setDate(1);
        return date.getDay();
    },
    _chooseDay: function (e) {
        const timestamp = e.currentTarget.dataset.timestamp;
        const disabled = e.currentTarget.dataset.disabled;

        if (disabled) return false;

        if (this.data.timeArr[0] && this.data.timeArr[1]) {
            this.setData({
                'timeArr[0]': timestamp,
                'timeArr[1]': 0
            })
        } else if (!this.data.timeArr[0] || this.data.timeArr[0] > timestamp) {
            this.setData({
                'timeArr[0]': timestamp
            })
        } else if (timestamp < this.data.timeArr[0]) {
            this.setData({
                'timeArr[0]': timestamp
            })
        } else {
            let diffDay = ((timestamp - this.data.timeArr[0]) / 864e5) + 1;

            if (diffDay < this.data.leastDays) { // 设置的时间小于规定的间隔
                wx.showToast({
                    title: `最少选择 ${this.data.leastDays} 天`,
                    icon: 'none'
                })
                return false;
            }
            this.setData({
                'timeArr[1]': timestamp
            })
        }
        console.log(this.data.timeArr);
        // this._notify();
    },
    /**
     * 用户触底事件
     */
    onReachBottom(res) {
        this._addCalendars(1, 2)
    },
    /**
     * 下拉加载更多
     */
    onPullDownRefresh() {
        this._addCalendars(1, 1);
        wx.stopPullDownRefresh();
    },

    //返回上一层
    go() {
        // wx.setStorageSync("selectDate", this.data.timeArr)
        wx.setStorage({
            key: 'selectDate',
            data: this.data.timeArr,
        })
        wx.navigateBack({})
    }
})

小程序文字循环滚动效果
一、上下滚动效果实现方法：利用小程序组建swiper实现上下循环滚动（为了美观，wxss中我增加了高度和背景色）...
微信小程序公告滚动通知
微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是滑块视图容器。通过...
微信小程序-滚动消息通知
这次我主要想总结一下微信小程序实现上下滚动消息提醒，主要是利用swiper组件来实现，swiper组件在小程序中是...
微信小程序
小程序滚动视图
微信小程序swiper上下循环滚动
今天周五了耶~官方文档：https://developers.weixin.qq.com/miniprogram/...
uniapp 表头固定，左右滚动时显示第一列的表格
最近用uniapp开发微信小程序项目时有一个需求，一个报表表格，表头上下滚动时固定，第一列左右滚动时固定，奈何自己...
小程序日历
————————————————html—————————————————— ...
小程序日历
我们就用小程序开发工具来写小程序。我的日历的需求是。切换显示。点击日期日期可以添加日程。长按并拖拽可...
WeChat小程序视图篇~Scroll-view
scroll-view 是什么? 微信小程序滚动视图，分为横向滚动，纵向滚动。以及滚动事件。如何用? 纵向滚动-...
小程序弹出层穿透问题的解决方案
目前小程序弹出层穿透有两种问题：第一种：小程序弹出层不滚动的时候，往上下拉时会连页面一起拉动，这个用户体验性很差的...

小程序日历上下滚动

wxml

wxss

JSON

js

相关文章

小程序文字循环滚动效果

微信小程序公告滚动通知

微信小程序-滚动消息通知

微信小程序

微信小程序swiper上下循环滚动

uniapp 表头固定，左右滚动时显示第一列的表格

小程序日历

小程序日历

WeChat小程序视图篇~Scroll-view

小程序弹出层穿透问题的解决方案

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小程序 日历 上下滚动

wxml

wxss

JSON

js

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

小程序日历上下滚动