微信小程序如何實(shí)現(xiàn)時(shí)間軸

這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)時(shí)間軸的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇微信小程序如何實(shí)現(xiàn)時(shí)間軸文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

一、顯示樣式

二、代碼 

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 不能以數(shù)字開(kāi)頭 -->
    <scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" scroll-into-view="{{intoView}}"
        >
 
        <!-- 這里用到了自定義屬性，需要以 data 開(kāi)頭，以-連接，否則在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: {
        //日期數(shù)組，每個(gè)元素都是一個(gè)對(duì)象，共有21個(gè)元素    {day: 10, month: 11, week: "二", year: 2020}
        dayList: [],
        // 一天的毫秒數(shù)
        millisecond: 86400000,
        // 生命周期函數(shù)中設(shè)置為 view7，用來(lái)控制 scroll-view 的滑動(dòng)，滑動(dòng)到指定項(xiàng)（該項(xiàng)的id和intoView的值相同）
        intoView: '',
        // 當(dāng)前項(xiàng)的下標(biāo)，初始值是7。從0開(kāi)始，“今天”之前有7天，所以“今天”的下標(biāo)是7
        currentIndex: 7,
        // 選中的日期(用戶(hù)通過(guò)點(diǎn)擊上面的按鈕)
        selectedDay: {},
        // 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng)
        duration: 500,
        // swiper里面的數(shù)據(jù),是一個(gè)對(duì)象數(shù)組。每一個(gè)元素都代表一條記錄。 
        /*
            所有的代辦事項(xiàng)，是一個(gè)數(shù)組，每一個(gè)元素依舊是一個(gè)數(shù)組。任何里面的每一個(gè)元素就是一個(gè)對(duì)象，代表一條代辦記錄
            {gmtCreate: 1605023745000, gmtModify: 1605023750000, id: 1, importance: 1, isFinished: 0,remark: "測(cè)試備注",timeFlag: 1 title: "微信小程序" uId: 1}
        */
        targetList: [],
        // swiper的高度
        widHeight: 350,
        // 用戶(hù)id，頁(yè)面加載時(shí)從全局 globalData 中獲取
        uid: "1",
        // // 完成按鈕圖標(biāo)對(duì)應(yīng)的 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 滑動(dòng)觸發(fā)的點(diǎn)擊事件
    siwperChange: function (e) {
 
 
        // console.log(e.detail);
        // 1. 設(shè)置 data 中的 index 的值，然后上面的日歷部分的index也會(huì)改變。這樣上面日歷部分和下面的swipper部分就可以同步
        this.setData({
            "currentIndex": e.detail.current
        })
        // 2. 重新設(shè)置 siwper 的高度（先更改 currentIndex，然后在設(shè)置對(duì)應(yīng) 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("頁(yè)面高度", result.screenHeight);
                if (myHeight < result.screenHeight) {
                    myHeight = result.screenHeight;
                }
            },
        });
 
        // 設(shè)置頁(yè)面高度和當(dāng)前選擇的日期
        this.setData({
            'widHeight': myHeight,
            "selectedDay": this.data.dayList[e.detail.current]
        })
 
    },
 
    // 點(diǎn)擊日歷上面的日期
    clickDate: function (event) {
        console.log(event.currentTarget.dataset);
        // 設(shè)置數(shù)組下標(biāo)
        this.setData({
            'intoView': "view" + event.currentTarget.dataset.index,
            'currentIndex': event.currentTarget.dataset.index
        })
 
        // 更改用戶(hù)選中的日期，然后在頁(yè)面中渲染選中的日期
        this.setData({
            "selectedDay": this.data.dayList[event.currentTarget.dataset.index]
        })
        this.onPullDownRefresh()
    },
 
    // “回到今天” 按鈕對(duì)應(yīng)的點(diǎn)擊事件
    returnToday: function () {
        console.log("回到今天");
        this.setData({
            "intoView": "view7",
            "currentIndex": 7,
            "selectedDay": this.data.dayList[7]
        })
        this.onPullDownRefresh()
    },
 
    // 封裝的 js 函數(shù)，生成一個(gè) dayList，里面有最近3個(gè)禮拜的日期信息
    weekDate: function () {
 
        var dayList = [];
 
        // 獲取當(dāng)前時(shí)間對(duì)應(yīng)的 date 對(duì)象
        var myDate = new Date();
 
        // 因?yàn)橐罱?個(gè)禮拜的日期信息，可能涉及到月份的變化所以不能簡(jiǎn)單的對(duì)天數(shù)加1或者減1，可以先計(jì)算出毫秒數(shù)，然后轉(zhuǎn)換為日期
        var millisecond = myDate.getTime();
 
        // 為 "上一個(gè)禮拜的時(shí)間" 加入 dayList 中
        for (var i = 7; i > 0; i--) {
            // 根據(jù)毫秒數(shù)構(gòu)造一個(gè) Date 對(duì)象
            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()
        })
 
 
        // 將 “未來(lái)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;
    },
 
    // 傳入數(shù)據(jù)  講一周的某一天返回成中文狀態(tài)下的字符
    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 '傳入未知參數(shù)';
    },
 
    
    /**
     * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
     */
    onLoad: function (options) {
 
        // 加載數(shù)據(jù)，調(diào)用封裝的方法
        this.loadingData();
 
    },
 
    // 生命周期函數(shù)：用戶(hù)下拉刷新
    onPullDownRefresh: function () {
        console.log("refresh");
 
        // 加載數(shù)據(jù)，調(diào)用封裝的方法
        this.loadingData();
    },
 
    // 封裝出來(lái)的加載數(shù)據(jù)的函數(shù)
    loadingData: function () {
        wx.showLoading({
            title: '加載中',
        })
    
        // 1. 獲取最近3周的日期信息，存入 this.data 中
        var dayList = this.weekDate();
        // 通過(guò) scroll-into-view 設(shè)置一開(kāi)始的位置
        this.setData({
            "dayList": dayList,
            "intoView": "view7"
        });
 
        // 1.1 設(shè)置當(dāng)前選中的日期
        this.setData({
            "selectedDay": this.data.dayList[7]
        })
 
 
        // 2. 從 globalData 中獲取用戶(hù)openid
        var app = getApp();
        this.setData({
            "uid": wx.getStorageSync('openid')
        })
 
        // 2. 獲取代辦事項(xiàng)信息，根據(jù)用戶(hù)id獲取
        // 向后端服務(wù)器發(fā)送請(qǐng)求
        // 將當(dāng)前的日期發(fā)送給后端服務(wù)器
        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("請(qǐng)求成功！")
                console.log(res.data.length);
 
                // 設(shè)置待辦事項(xiàng)，同時(shí)設(shè)置 swiper 的高度
                // “今天” 對(duì)應(yīng)的 swiper-item 下標(biāo)是7，所以選擇數(shù)組第7個(gè)元素
 
                var myHeight = res.data.length * 70 +250;
                console.log(myHeight);
                //console.log("今天的代辦事項(xiàng)有:", res.data[7].length)
                //console.log("myheight", myHeight);
 
                // 為了讓 swiper 能夠覆蓋整個(gè)頁(yè)面（只有這樣，按住其他地方進(jìn)行滑動(dòng)時(shí)，也可以成功的滑動(dòng) siwpper）
                /*
                    判斷 myHeight 的高度
                    為了讓 swiper 能夠覆蓋整個(gè)頁(yè)面（只有這樣，按住其他地方進(jìn)行滑動(dòng)時(shí)，也可以成功的滑動(dòng) siwpper）
                */
 
                wx.getSystemInfo({
                    success: (result) => {
                        console.log("頁(yè)面高度", result.screenHeight);
                        if (myHeight < result.screenHeight-250) {
                            myHeight = result.screenHeight-250;
                        }
                    },
                })
 
                this.setData({
                    'targetList': res.data,
                    'winHeight': myHeight,
 
                })
 
                // 隱藏提示框
                wx.hideLoading();
 
                // 停止下拉刷新
                wx.stopPullDownRefresh()
            }
        })
    },
 
})

3.wxss: 

/* 頂部時(shí)間展示區(qū)域 */
.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; }

關(guān)于“微信小程序如何實(shí)現(xiàn)時(shí)間軸”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“微信小程序如何實(shí)現(xiàn)時(shí)間軸”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。