微信小程序简单实现时间轴界面
使用微信小程序简单实现时间轴界面,代码简洁,逻辑清楚,适合刚入手准备学习微信小程序的伙伴们,简单分享下。一共分为以下四大步骤。
- 第一步:使用一个标签,设置好内边距,以及在后续调整其他布局的时候,便于编写代码。如果喜欢将两边铺满屏幕的友友们,可以忽略此步骤。
- 第二步:循环读取需要现实的数据内容,并再次使用一个标签,此标签主要设置左边的竖线,使用左边框属性设置即可,并设置好内边距。
- 第三步:在标签上方,加入标签,用于编写圆点,并将其左边距(margin-left)属性设为负值,调整好自己喜欢的样式。
- 第四步:在标签内部,包入一个新的标签,在这个标签里面设置好样式后,便可将循环出的数据,按照需求摆放,随意布局啦,想学习更多微信小程序的友友们,请至我的主页,分享界面示例,共同学习哦!
1、js代码:
// index.js
Page({
data:{
dataList:[
{'date':'2023-05-27','part':'上午','content':'使用微信小程序简单实现时间轴界面,代码简洁,逻辑清楚,适合刚入手准备学习微信小程序的伙伴们,简单分享下。一共分为以下四大步骤。'},
{'date':'2023-05-28','part':'下午','content':'第一步:使用一个标签<view class="box"></view>,设置好内边距,以及在后续调整其他布局的时候,便于编写代码。如果喜欢将两边铺满屏幕的友友们,可以忽略此步骤。'},
{'date':'2023-05-29','part':'晚上','content':'第二步:循环读取需要现实的数据内容,并再次使用一个标签<view class="box-line"></view>,此标签主要设置左边的竖线,使用左边框属性设置即可,并设置好内边距。'},
{'date':'2023-05-30','part':'凌晨','content':'第三步:在标签<view class="box-line"></view>上方,加入标签<view class="point"></view>,用于编写圆点,并将其左边距(margin-left)属性设为负值,调整好自己喜欢的样式。'},
{'date':'2023-05-31','part':'天黑','content':'第四步:在标签<view class="box-line"></view>内部,包入一个新的标签<view class="box-data"></view>,在这个标签里面设置好样式后,便可将循环出的数据,按照需求摆放,随意布局啦,想学习更多微信小程序的友友们,请至我的主页,分享界面示例,共同学习哦!'},
],
},
})
2、wxml代码
<!-- 容器一 -->
<view class="box">
<block wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<!-- 圆点 -->
<view class="point">
<view class="dot">{{index+1}}</view>
<view class="title">{{item.date+' '+item.part}}</view>
</view>
<!-- 容器二 -->
<view class="box-line">
<!-- 容器三 -->
<view class="box-data">
<view class="row-info">{{item.content}}</view>
<view class="row-button">
<view>按钮A</view>
<view>按钮B</view>
<view>按钮C</view>
</view>
</view>
</view>
</block>
</view>
3、wcss代码
page {
background-color: #f1f1f1;
}
/* 容器一 */
.box {
padding: 10rpx 20rpx 10rpx 40rpx;
}
/* 容器二 */
.box-line {
border-left: 3rpx solid #c8c9cc;
padding: 15rpx 10rpx 15rpx 35rpx;
}
/* 圆点 */
.point {
display: flex;
flex-direction: row;
align-items: center;
margin: 15rpx 0;
}
.dot {
margin-left: -22rpx;
background-color: #19be6b;
box-shadow: 0 0 5rpx 5rpx #71d5a1;
color: white;
width: 36rpx;
padding: 5rpx;
font-size: 28rpx;
text-align: center;
border-radius: 50rpx;
}
.title {
font-size: 30rpx;
margin-left: 15rpx;
background-color: white;
padding: 12rpx 25rpx;
border-radius: 50rpx;
color: #909399;
}
/* 容器三 */
.box-data {
background-color: white;
padding: 30rpx 15rpx;
border-radius: 15rpx;
}
.row-info {
font-size: 28rpx;
color: gray;
line-height: 45rpx;
padding: 0 15rpx;
text-indent: 2rem;
}
.row-button {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
border-top: 1rpx solid #f1f1f1;
margin-top: 20rpx;
padding-top: 20rpx;
}
.row-button view {
padding: 12rpx 30rpx;
font-size: 30rpx;
color: white;
border-radius: 10rpx;
}
.row-button view:nth-child(1) {
background-color: #ff9900;
}
.row-button view:nth-child(2) {
background-color: #19be6b;
}
.row-button view:nth-child(3) {
background-color: #2979ff;
}