用微信小程序写一个物流步骤条
时间: 2023-05-11 15:02:50 浏览: 68
非常感谢您的提问。以下是一个简单的微信小程序物流步骤条的代码示例:
```
<view class="container">
<view class="step">
<view class="circle active">1</view>
<view class="line active"></view>
<view class="text active">下单</view>
</view>
<view class="step">
<view class="circle">2</view>
<view class="line"></view>
<view class="text">发货</view>
</view>
<view class="step">
<view class="circle">3</view>
<view class="line"></view>
<view class="text">运输中</view>
</view>
<view class="step">
<view class="circle">4</view>
<view class="line"></view>
<view class="text">已签收</view>
</view>
</view>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px;
}
.step {
display: flex;
flex-direction: column;
align-items: center;
}
.circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ccc;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.line {
height: 2px;
width: 50px;
background-color: #ccc;
}
.text {
margin-top: 10px;
font-size: 12px;
color: #666;
}
.active .circle {
background-color: #007aff;
}
.active .line {
background-color: #007aff;
}
.active .text {
color: #007aff;
}
</style>
```
您可以将以上代码复制到微信小程序的 wxml 文件中,然后在 wxss 文件中添加样式即可。希望这个示例能够帮助您实现物流步骤条。