邯郸网站制作官网,有机蔬菜网站是如何建设,wordpress 数据库空间,贵州网站建设seo前言
在使用uni-app开发微信小程序过程中#xff0c;遇到了时间轴布局#xff0c;由于每项的内容高度不一致#xff0c;使用uniapp自带的扩展组件uni-steps#xff0c;样式布局无法对齐竖线#xff0c;于是自己造轮子#xff0c;完成特殊的布局。显示效果如下#xff1…前言
在使用uni-app开发微信小程序过程中遇到了时间轴布局由于每项的内容高度不一致使用uniapp自带的扩展组件uni-steps样式布局无法对齐竖线于是自己造轮子完成特殊的布局。显示效果如下 实现
实现这种布局有两种实现方式
第一种使用css伪类实现
第二种使用纯css实现。
具体演示代码
第一种方式使用css伪类实现。效果如图一
1、样式文件
style scoped langscss
.timeline{margin: 64rpx auto 0rpx auto;position: relative;width: 100%;:before{background-color: #6DD1C9;content: ;margin-left: -1rpx;position: absolute;top: 0rpx;left: 14rpx;width: 2rpx;bottom: -250rpx;height: calc(100% - 47rpx);}.timeline-event{position: relative;}.timeline-event-copy {padding: 32rpx 24rpx;position: relative;top: -47rpx;left: 42rpx;width: 536rpx;background-color: #FFFFFF;margin-bottom: 20rpx;border-radius: 20rpx;}.timeline-event-icon{background-color: #ffffff00;outline: 0rpx solid #FF0000;display: block;margin: 0rpx 0rpx 0rpx 0rpx;position: absolute;top: 0rpx;left: 0rpx;width: 28rpx;height: 28rpx;}.timeline-event-thumbnail{color: #38254D;font-weight: bold;font-size: 30rpx;display: inline-flex;width: 100%;margin-bottom: 0rpx;align-items: center;justify-content: space-between;}.timeline-event-content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}}
}
/style
2、布局文件
view classtimelineblock v-for(item,index) in 4 :keyindexview classtimeline-eventimage classtimeline-event-icon src/static/record/table.png/imageview classtimeline-event-copyview classtimeline-event-thumbnail4月22日(周二) 18:00-19:00/viewview classtimeline-event-contenttext教练David Beckham/texttext地点西沙群岛 · 永兴岛/texttext教室A教室/textview v-ifindex0 classbtn取消请假/view/view/view/view/block
/view第二种方式使用纯css实现。效果如图二
1、样式文件
style langscss
.timeline-list{margin: 32rpx;font-size: 28rpx;list-style: none;
}
.timeline-item:last-child .timeline-item_tail {display: none;
}
.timeline-item{position: relative;padding-bottom: 20rpx;
}
.timeline-item_tail{position: absolute;left: 4rpx;height: 100%;border-left: 2rpx solid rgba(109, 209, 201, 0.3);
}.timeline-item_node{position: absolute;background-color: #FFFFFF;border-radius: 50%;display: flex;justify-content: center;align-items: center;left: -12rpx;width: 22rpx;height: 22rpx;background: #fff;border:6rpx solid #6DD1C9;
}
.timeline-item_wrapper{position: relative;padding: 32rpx 24rpx;left: 42rpx;top: -32rpx;background-color: #ffffff;border-radius: 20rpx;width: 600rpx;
}
.timeline-item_timestamp{color: #38254D;font-weight: bold;font-size: 30rpx; line-height: 32rpx;
}
.timeline-item_content{display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 20rpx;text{font-size: 26rpx;color: #574966;line-height: 40rpx;}.btn{align-self: flex-end;font-size: 26rpx;color: #F06245;line-height: 60rpx;text-align: center;margin-top: -40rpx;width: 140rpx;height: 60rpx;border: 1rpx solid #F06245;border-radius: 30rpx;}
}
/style
2、布局文件
view classtimeline-listblock v-for(item, index) in 3 :keyindexview classtimeline-itemview classtimeline-item_tail/viewview classtimeline-item_node/viewview classtimeline-item_wrapperview classtimeline-item_timestamp4月22日(周二) 18:00-19:00/viewview classtimeline-item_contenttext教练David Beckham/texttext地点西沙群岛 · 永兴岛/texttext教室A教室/textview v-ifindex0 classbtn取消请假/view/view/view/view/block
/viewps使用方式1无法隐藏最后一项的时间线而第二种方式可以随时控制每一项的时间线。个人推荐第二种方式。
