微信小程序项目中用到的时间轴展示和抽屉展开收起特效
本篇内容为原创,转载请注明出处。
一、效果图
默认为展开状态 --- 左:展开;右:收起
二、代码片段:
1、wxml部分
<view class="card">
<view class="cardTitle" bindtap="changeUpDown">我是标题
<!-- 项目里面用的是iconfont标签-箭头 -->
<text class="iconfont icon-down {{showUp?'rotateUp':'rotateDown'}}"></text>
<!-- 这里为了方便看,使用了< 小于号 -->
<view class="textBox {{showUp?'rotateUp1':'rotateDown1'}}">
<text>{{'<'}}</text>
</view>
</view>
<view class="ivestment-c {{showUp?'hideBox':'showBox'}}">
<view class="ivestment-i" wx:for="{{dataList}}" wx:key="index" wx:for-item="item" wx:for-index="index">
<view class="invest-l">
<view class="invest-b invest-line">
<text decode="{{true}}" space="{{true}}"> </text>
</view>
<view class="demo-flex-1 font-28r color-3" style="line-height: 64rpx;">{{item.startTime}}</view>
</view>
<view class="invest-l">
<view class="invest-b invest-line2">
<text decode="{{true}}" space="{{true}}"> </text>
</view>
<view class="demo-flex-1">
<view class="font-12 color-6 awardUnit" style="line-height: 52rpx;margin-top: 16rpx;margin-bottom: 16rpx;">{{item.experience}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="card">
我的存在就是为了测测上面收起的效果,嗯就是这样
</view>
2、js部分:
Page({
data: {
showUp:false,
dataList:[
{
startTime:'2020年3月',
experience:'苦逼的写代码'
},
{
startTime:'2020年4月',
experience:'依然苦逼的写代码'
},
{
startTime:'2020年5月',
experience:'仍然苦逼的写代码'
},
{
startTime:'2020年6月',
experience:'好吧,继续写代码'
}
]
},
changeUpDown:function(e){
this.setData({
showUp:!this.data.showUp
})
}
})
3、wxss部分
.card {
padding: 20rpx;
}
.cardTitle {
padding: 10rpx;
}
.ivestment-c{
position: relative;
box-sizing:border-box;
background-color: #fff;
padding: 20rpx 0;
width: 100%;
max-height: 500px;
overflow-y: auto;
height: auto;
}
.ivestment-i{
position: relative;
}
.invest-l{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
text-align: left;
position: relative;
}
.demo-flex-1{
flex:1;
margin-left: 40rpx;
}
.invest-b{
position: absolute;
top:0;
left: 0;
width: 40rpx;
height: 100%;
text-align: center;
}
.invest-line::before{
position: absolute;
display: inline-block;
top:50%;
left: 50%;
content: " ";
margin-top: -9rpx;
margin-left: -9rpx;
width:18rpx;
height:18rpx;
background:#398af4;
border-radius:50%;
z-index: 10;
}
.invest-line::after{
position: absolute;
display: inline-block;
top: 0;
left: 50%;
content: " ";
margin-left: -1rpx;
width: 2rpx;
height: 100%;
background-color: #398af4;
z-index: 5;
}
.invest-line2::after{
position: absolute;
display: inline-block;
top: 0;
left: 50%;
content: " ";
width: 2rpx;
margin-left: -1rpx;
height: 100%;
background-color: #398af4;
z-index: 5;
}
.ivestment-i:nth-child(1) .invest-line::after{
top: 36rpx;
}
.showBox {
transition: all .6s ease;
height: auto;
max-height: 500px;
overflow-y: auto;
}
.hideBox {
transition: all .6s ease;
height: 0;
padding: 0;
}
.textBox {
width: 20px;
height: 20px;
float: right;
}
.rotateUp {
transition: all .6s ease;
transform:rotate(0deg);
}
.rotateDown {
transition: all .6s ease;
transform:rotate(180deg);
}
.rotateUp1 {
transition: all .6s ease;
transform:rotate(90deg);
}
.rotateDown1 {
transition: all .6s ease;
transform:rotate(270deg);
}