微信小程序-时间轴

wxml

<view class='class'>

<view class='all' wx:for='{{steps}}' data-index='{{index}}' >

<!-- <view class='topText'>{{item.actionDate[0]}}{{item.actionDate[1]}}{{item.actionDate[2]}}{{item.actionDate[3]}}年</view> -->

<view class='left'>

<view class='left_pad'>

<view class='left_text D' >{{item.actionDate[8]}}{{item.actionDate[9]}}</view>

<view class='left_text M' >{{item.actionDate[0]}}{{item.actionDate[1]}}{{item.actionDate[2]}}{{item.actionDate[3]}}.</view>

<view class='left_text M' >{{item.actionDate[5]}}{{item.actionDate[6]}}</view>

</view>

</view>

<view class='center'></view>

<view class='round_top' ></view>

<view class='right'>

<view class='right_pad' wx:for='{{item.actionType}}' wx:for-item='type'>{{type==1?'加入书架':type==2?'阅读':type==3?'书评':'读完'}}</view>

<view class='right_pad' ></view>

</view>

</view>

<view class='round_bottom'>

</view>

<view class='round_bottom_w'>开始</view>

</view>

js<------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

const app = getApp()

Page({

data: {

active: 0,

steps: [] //;[{,}]

},

//接收用户id 获取书的阅读表

onLoad() {

},

onShow() {

console.log(app.globalData.bookShelfData)

console.log(app.globalData.readingNoteData)

this.setData({ bookShelfData: app.globalData.bookShelfData, readingNoteData: app.globalData.readingNoteData})

//重组

// readingActivty:[{actionDate:'YYYY-MM-DD',actionType:[]}]

let readingActivty = [],

bookShelfData = this.data.bookShelfData,

readingNoteData = this.data.readingNoteData;

if (bookShelfData) {

for (let index in bookShelfData[0].readingHistory) {

readingActivty.push({ actionDate: bookShelfData[0].readingHistory[index].ReadingTime.iso, actionType: ['2'] })

}

readingActivty.push({ actionDate: bookShelfData[0].createdAt, actionType: ['1'] })

readingActivty.unshift({ actionDate: bookShelfData[0].readingStartdate.iso, actionType: ['4'] })

}

if (readingNoteData[0].commentDate) {

for (let ii in readingActivty) {

if (readingNoteData[0].commentDate.iso.replace(/\s[\x00-\xff]*/g, '') == readingActivty[ii].actionDate.replace(/\s[\x00-\xff]*/g, '')) {

readingActivty[ii].actionType.push('3')

}

}

}

readingActivty.sort(function (a, b) { return b['actionDate'] < a['actionDate'] ? -1 : 1 })

console.log(readingActivty)

this.setData({ steps: readingActivty })

}

});

wxss

page{

width: 100%;

height: 100%;

overflow-x: hidden;

}

.class{

padding: 152rpx 2.5% 2.5% 2.5%;

}

.all{

width: 100%;

display: flex;

flex-wrap:nowrap;

justify-content: space-between;

}

.left{

width: 50%;

/* height: 320rpx; */

text-align: right;

display: flex;

flex-wrap: wrap;

color: #00a6ed;

}

.center{

width: 0rpx;

/* height: 320rpx; */

background: #fff;

border: 2rpx #ccc dashed;

display:table-cell;

vertical-align:bottom;

}

.topText{

font-size: 40rpx;

color: #000;

position: absolute;

top:20rpx;

left: 30rpx;

}

.right{

width: 41.5%;

/* height:320rpx; */

}

.round{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

background: #00a6ed;

}

.M{

position: relative;

top: 10rpx;

margin-left:5rpx;

}

.left_text{

display: flex;

flex-direction: row;

justify-content: right;

text-align: right;

}

.left_pad{

display: flex;

flex-direction: row;

justify-content: center;

width: 80%;

height: 85rpx;

line-height: 85rpx;

font-size: 34rpx;

border-radius: 10rpx;

margin-bottom: 17rpx;

text-align: right;

position: relative;

right:-74rpx;

top: -21rpx;

}

.right_pad{

display: flex;

flex-wrap:wrap;

justify-content: space-around;

width: 198rpx;

background: #53535323;

height: 50rpx;

color: #535353;

line-height: 50rpx;

margin-top: 25rpx;

font-size: 24rpx;

border-radius: 10rpx;

margin-bottom: 17rpx;

text-align: right;

position: relative;

left: -25rpx;

}

.round_top{

width: 60rpx;

height: 60rpx;

border-radius: 50%;

background: #00a6ed;

position: relative;

left: -4.55%;

top: -18rpx;

}

.round_bottom{

width: 112rpx;

height: 112rpx;

line-height: 112rpx;

color: #fff;

border-radius: 50%;

font-size: 28rpx;

background: #00a6ed;

opacity: 0.4;

text-align: center;

position: relative;

left: 301rpx;

top: 3rpx;

/* margin: 0 auto; */

/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */

}

.round_bottom_w{

width: 84rpx;

height: 84rpx;

line-height: 84rpx;

color: #fff;

border-radius: 50%;

font-size: 28rpx;

background: #00a6ed;

opacity: 1;

text-align: center;

display: table-cell;

vertical-align: middle;

position: relative;

left: 314rpx;

top: -96rpx;

/* box-shadow: 0rpx 0rpx 28rpx 14rpx rgba(0,166,237,0.6); */

}