微信小程序-时间轴
转载声明：
本文为摘录自“博客园”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2020-08-29 12:02:41
wxml
<view class='class'>
<view class='all' wx:for='{{steps}}' data-index='{{index}}' style='bottom:{{index*150}}rpx;'>
<!-- <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' style='font-size:50rpx'>{{item.actionDate[8]}}{{item.actionDate[9]}}</view>
<view class='left_text M' style='font-size:24rpx'>{{item.actionDate[0]}}{{item.actionDate[1]}}{{item.actionDate[2]}}{{item.actionDate[3]}}.</view>
<view class='left_text M' style='font-size:24rpx'>{{item.actionDate[5]}}{{item.actionDate[6]}}</view>
</view>
</view>
<view class='center'></view>
<view class='round_top' style='opacity:{{index/10 + 1-index/10*0.5}};'></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' style='background:none'></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); */
}
