WeChat Mini Program Simple Realization of Timeline Interface
Use the WeChat applet to simply implement the timeline interface, the code is concise and the logic is clear, it is suitable for partners who are just starting to learn the WeChat applet, and share it briefly. It is divided into the following four steps.
- Step 1: Use a label, set the padding, and make it easier to write code when adjusting other layouts later. If you like to cover both sides of the screen, you can ignore this step.
- Step 2: cyclically read the data content that needs to be realistic, and use a label again. This label mainly sets the left vertical line, just use the left border property to set it, and set the inner margin.
- Step 3: Above the label, add a label for writing dots, and set its margin-left property to a negative value to adjust the style you like.
- Step 4: Inside the label, wrap a new label. After setting the style in this label, you can place the looped data according to your needs, and arrange it at will. Friends who want to learn more WeChat applets Friends, please go to my homepage, share interface examples, and learn together!
1. js code:
// 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 code
<!-- 容器一 -->
<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 code
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;
}