微信小程序实现时间轴

本文实例为大家分享了微信小程序实现时间轴的具体代码,供大家参考,具体内容如下

一、显示样式

二、代码

1.wxml:

<view class="header">
    <view class="header-left">
        <view class="header-left-top">{{selectedDay.year}}/{{selectedDay.month}}/{{selectedDay.day}}</view>
    </view>
    <view class="header-right">
        <button bindtap="returnToday" color="#4e8a8d" class=".button" round type="info">回到今天</button>
    </view>
</view>
 
<!-- 顶部日历部分 -->
<view class="page-section-spacing">
    <!-- scroll-into-view 不能以数字开头 -->
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" scroll-into-view="{{intoView}}"
        style="width: 100%">
 
        <!-- 这里用到了自定义属性,需要以 data 开头,以-连接,否则在event中获取不到 -->
        <view wx:for="{{dayList}}" wx:for-item="item" wx:for-index="index" wx:key="index" id="view{{index}}"
            class="scroll-view-item_H {{currentIndex==index ?'active':'noactive'}}" data-index="{{index}}"
            bindtap="clickDate">
            <view class="scroll-week">周{{item.week}}</view>
            <view class="scroll-day">{{item.day}}</view>
        </view>
    </scroll-view>
</view>

2.js:

Page({
 
    data: {
        //日期数组,每个元素都是一个对象,共有21个元素    {day: 10, month: 11, week: "二", year: 2020}
        dayList: [],
        // 一天的毫秒数
        millisecond: 86400000,
        // 生命周期函数中设置为 view7,用来控制 scroll-view 的滑动,滑动到指定项(该项的id和intoView的值相同)
        intoView: '',
        // 当前项的下标,初始值是7。从0开始,“今天”之前有7天,所以“今天”的下标是7
        currentIndex: 7,
        // 选中的日期(用户通过点击上面的按钮)
        selectedDay: {},
        // 滑动动画时长
        duration: 500,
        // swiper里面的数据,是一个对象数组。每一个元素都代表一条记录。 
        /*
            所有的代办事项,是一个数组,每一个元素依旧是一个数组。任何里面的每一个元素就是一个对象,代表一条代办记录
            {gmtCreate: 1605023745000, gmtModify: 1605023750000, id: 1, importance: 1, isFinished: 0,remark: "测试备注",timeFlag: 1 title: "微信小程序" uId: 1}
        */
        targetList: [],
        // swiper的高度
        widHeight: 350,
        // 用户id,页面加载时从全局 globalData 中获取
        uid: "1",
        // // 完成按钮图标对应的 url: ../../icon/target.png   或者  ../../icon/target_ok.png
        // imageUrl: "",
        // iconClass: ""
    },
 
    clickTargetItem: function (e) {
        console.log("clickItem");
        console.log(e.currentTarget.dataset);
        this.setData({
            "message": e.currentTarget.dataset
        })
        console.log("本条记录的id为:", e.currentTarget.dataset.id);
        console.log(this.data.targetList[this.data.currentIndex]);
    },
    // 中部 swiper 滑动触发的点击事件
    siwperChange: function (e) {
 
 
        // console.log(e.detail);
        // 1. 设置 data 中的 index 的值,然后上面的日历部分的index也会改变。这样上面日历部分和下面的swipper部分就可以同步
        this.setData({
            "currentIndex": e.detail.current
        })
        // 2. 重新设置 siwper 的高度(先更改 currentIndex,然后在设置对应 siwper 的高度)
        // console.log("slide");
        // console.log(this.data.targetList);
        // console.log("currentIndex", this.data.currentIndex);
        // console.log(this.data.targetList[this.data.currentIndex].length);
        // console.log("myheight", myHeight);
 
        var myHeight = this.data.targetList[this.data.currentIndex].length * 135 + 3 * 70 + 176 + 100;
 
 
        wx.getSystemInfo({
            success: (result) => {
                console.log("页面高度", result.screenHeight);
                if (myHeight < result.screenHeight) {
                    myHeight = result.screenHeight;
                }
            },
        });
 
        // 设置页面高度和当前选择的日期
        this.setData({
            'widHeight': myHeight,
            "selectedDay": this.data.dayList[e.detail.current]
        })
 
    },
 
    // 点击日历上面的日期
    clickDate: function (event) {
        console.log(event.currentTarget.dataset);
        // 设置数组下标
        this.setData({
            'intoView': "view" + event.currentTarget.dataset.index,
            'currentIndex': event.currentTarget.dataset.index
        })
 
        // 更改用户选中的日期,然后在页面中渲染选中的日期
        this.setData({
            "selectedDay": this.data.dayList[event.currentTarget.dataset.index]
        })
        this.onPullDownRefresh()
    },
 
    // “回到今天” 按钮对应的点击事件
    returnToday: function () {
        console.log("回到今天");
        this.setData({
            "intoView": "view7",
            "currentIndex": 7,
            "selectedDay": this.data.dayList[7]
        })
        this.onPullDownRefresh()
    },
 
    // 封装的 js 函数,生成一个 dayList,里面有最近3个礼拜的日期信息
    weekDate: function () {
 
        var dayList = [];
 
        // 获取当前时间对应的 date 对象
        var myDate = new Date();
 
        // 因为要最近3个礼拜的日期信息,可能涉及到月份的变化所以不能简单的对天数加1或者减1,可以先计算出毫秒数,然后转换为日期
        var millisecond = myDate.getTime();
 
        // 为 "上一个礼拜的时间" 加入 dayList 中
        for (var i = 7; i > 0; i--) {
            // 根据毫秒数构造一个 Date 对象
            var tempDate = new Date(millisecond - i * this.data.millisecond);
 
            dayList.push({
                'day': tempDate.getDate(),
                'month': tempDate.getMonth() + 1,
                'week': this.toWeekDay(tempDate.getDay()),
                'year': tempDate.getFullYear()
            });
        }
 
        // 将 “今天” 加入 dayList 中
        dayList.push({
            'day': myDate.getDate(),
            'month': myDate.getMonth() + 1,
            'week': this.toWeekDay(myDate.getDay()),
            'year': myDate.getFullYear()
        })
 
 
        // 将 “未来2周” 加入 dayList 中
        for (var i = 1; i <= 13; i++) {
            var tempDate = new Date(millisecond + i * this.data.millisecond);
            dayList.push({
                'day': tempDate.getDate(),
                'month': tempDate.getMonth() + 1,
                'week': this.toWeekDay(tempDate.getDay()),
                'year': tempDate.getFullYear()
            })
        }
 
        return dayList;
    },
 
    // 传入数据  讲一周的某一天返回成中文状态下的字符
    toWeekDay: function (weekDay) {
        switch (weekDay) {
            case 1:
                return '一';
                break;
            case 2:
                return '二';
                break;
            case 3:
                return '三';
                break;
            case 4:
                return '四';
                break;
            case 5:
                return '五';
                break;
            case 6:
                return '六';
                break;
            case 0:
                return '日';
                break;
            default:
                break;
        }
        return '传入未知参数';
    },
 
    
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
 
        // 加载数据,调用封装的方法
        this.loadingData();
 
    },
 
    // 生命周期函数:用户下拉刷新
    onPullDownRefresh: function () {
        console.log("refresh");
 
        // 加载数据,调用封装的方法
        this.loadingData();
    },
 
    // 封装出来的加载数据的函数
    loadingData: function () {
        wx.showLoading({
            title: '加载中',
        })
    
        // 1. 获取最近3周的日期信息,存入 this.data 中
        var dayList = this.weekDate();
        // 通过 scroll-into-view 设置一开始的位置
        this.setData({
            "dayList": dayList,
            "intoView": "view7"
        });
 
        // 1.1 设置当前选中的日期
        this.setData({
            "selectedDay": this.data.dayList[7]
        })
 
 
        // 2. 从 globalData 中获取用户openid
        var app = getApp();
        this.setData({
            "uid": wx.getStorageSync('openid')
        })
 
        // 2. 获取代办事项信息,根据用户id获取
        // 向后端服务器发送请求
        // 将当前的日期发送给后端服务器
        var myDate = new Date();
        var millisecond = myDate.getTime();
    var that=this;
        wx.request({
            url: app.globalData.url + 'api/wx/getTargetByUserId',
            method: "GET",
            data: {
                "uid": this.data.uid,
                "millisecond": millisecond,
                "currentIndex": this.data.currentIndex
            },
            success: res => {
                console.log("请求成功!")
                console.log(res.data.length);
 
                // 设置待办事项,同时设置 swiper 的高度
                // “今天” 对应的 swiper-item 下标是7,所以选择数组第7个元素
 
                var myHeight = res.data.length * 70 +250;
                console.log(myHeight);
                //console.log("今天的代办事项有:", res.data[7].length)
                //console.log("myheight", myHeight);
 
                // 为了让 swiper 能够覆盖整个页面(只有这样,按住其他地方进行滑动时,也可以成功的滑动 siwpper)
                /*
                    判断 myHeight 的高度
                    为了让 swiper 能够覆盖整个页面(只有这样,按住其他地方进行滑动时,也可以成功的滑动 siwpper)
                */
 
                wx.getSystemInfo({
                    success: (result) => {
                        console.log("页面高度", result.screenHeight);
                        if (myHeight < result.screenHeight-250) {
                            myHeight = result.screenHeight-250;
                        }
                    },
                })
 
                this.setData({
                    'targetList': res.data,
                    'winHeight': myHeight,
 
                })
 
                // 隐藏提示框
                wx.hideLoading();
 
                // 停止下拉刷新
                wx.stopPullDownRefresh()
            }
        })
    },
 
})

3.wxss:

/* 顶部时间展示区域 */
.header {
    width: 100%;
    height: 125rpx;
    /* background-color: palegreen; */
}
 
.header-left {
    float: left;
}
 
.header-left-top {
    height: 62.5rpx;
    line-height: 62.5rpx;
    margin-left: 25rpx;
    font-size: 40rpx;
    font-weight: 500;
    margin-top: 25rpx;
}
 
.header-left-bottom {
    height: 62.5rpx;
    margin-left: 25rpx;
}
 
.header-right {
    float: right;
    margin-right: 30rpx;
    margin-top: 25rpx;
}
 
 
/*  顶部日历部分   */
.scroll-view_H {
    white-space: nowrap;
}
 
.scroll-view-item_H {
    display: inline-block;
    width: 14.4%;
    height: 140rpx;
    /* background-color: pink; */
    /* border: 2px solid; */
    border-bottom: 1px solid #cccccc;
 
    /* opacity: 0.5; */
    color: #96989D;
    font-size: 32rpx;
    font-family: CenturyGothic-Bold;
    font-weight: bold;
 
    padding-bottom: 30rpx;
}
 
.scroll-week {
    text-align: center;
    height: 70rpx;
    line-height: 70rpx;
}
 
.scroll-day {
    text-align: center;
    height: 70rpx;
    line-height: 70rpx;
}
 
.active .scroll-day {
    border-radius: 90rpx;
    background-color: #4e8a8d;
    color: white;
}
 
/* 中部的 swiper-item */
swiper {
    height: 100%;
}
 
.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }  

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

(0)

相关推荐

  • 微信小程序时间轴实现方法示例

    本文实例讲述了微信小程序时间轴实现方法.分享给大家供大家参考,具体如下: 最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图: 做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容 来看我的代码(代码很不规范,请忽略): wxml <view class='weui-cell-third'> <view class=

  • 微信小程序实现时间轴

    本文实例为大家分享了微信小程序实现时间轴的具体代码,供大家参考,具体内容如下 一.显示样式 二.代码 1.wxml: <view class="header">     <view class="header-left">         <view class="header-left-top">{{selectedDay.year}}/{{selectedDay.month}}/{{selectedDay.

  • 微信小程序实现时间轴特效

    本文实例为大家分享了微信小程序实现时间轴特效的具体代码,供大家参考,具体内容如下 效果 wxml <view class="timeLine" style=" width: 100%;">   <view class="on" wx:for="{{array}}" wx:key="Lsh"     style="background:url('../images/ba.png')

  • 微信小程序日期时间选择器使用方法

    本文实例为大家分享了精确到秒的微信小程序日期时间选择器,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-content"> <view class="tui-picker-name">时间选择器(选择时分)</view> <picker mode="time" value="{{time}}

  • 微信小程序当前时间时段选择器插件使用方法详解

    本文实例为大家分享了微信小程序当前时间时段选择器的实现代码,供大家参考,具体内容如下 DEMO效果图 插件思路 准备工作 获取当前时间,同时获取当前的年.月.日.周几: 创建处理日期数字的函数: 创建格式化日期的函数: 创建获取某月天数的函数: 创建获取季度开始的月份函数. 获取时段 创建获取当天的时段函数: 创建获取本周的时段函数: 创建获取本月的时段函数: 创建获取本季度的时段函数: 创建获取本年的时段函数: 创建自定义时段函数. 准备阶段的JS constructor() { this.n

  • 微信小程序实现时间预约功能

    一个类似电商的时间预约功能,供大家参考,具体内容如下 1 .概述 我们在学习微信小程序或者做项目时,应该会遇到需要时间预约功能情况,那么这个时间预约功能我们应该怎么编写呢?于是就做了一个类似电商的时间预约功能,觉得有用,就独立出来成了个小插件,今天我们就分享这样的小教程.希望对大家有所帮助. 不多说了,上图来啦! 2. wxml <!--pages/orderTime/index.wxml--> <view class='containt'> <scroll-view cla

  • 微信小程序实现时间进度条功能

    关于答题类,或者一些游戏环节的小程序需要用到时间进度条,该功能怎么实现?看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text

  • 微信小程序三级联动选择器使用方法

    本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例: 2,省市区选择器:mode = region实现省市区三级联动: 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法. WXML <view class="tui-picker-content"> <view clas

  • 微信小程序switch开关选择器使用详解

    本文为大家分享了微信小程序switch开关选择器使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-list-box"> <view class="tui-menu-list"> <text>状态:{{isChecked1}}</text> <switch class="tui-fr" checked="{{isChecked1}}" b

  • 微信小程序实现商城倒计时

    本文实例为大家分享了微信小程序实现商城倒计时的具体代码,供大家参考,具体内容如下 index.html: <view class="countDownTimeView pull-left countDownAllView text-left"> <text>倒计时:</text> <text class="voteText countDownTimeText">{{countDownHour}}</text>

随机推荐