物流快递跟踪样式

最新推荐文章于 2024-02-29 16:26:10 发布

学web的碎碎

最新推荐文章于 2024-02-29 16:26:10 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript + jQuery 小程序 + uni-app 文章标签： html javascript 前端小程序

本文链接：https://blog.csdn.net/weixin_42695298/article/details/103934520

版权

本文介绍了如何使用HTML和JavaScript技术在前端实现物流快递跟踪功能，通过展示WXML和WXSS代码片段，揭示了在小程序中创建跟踪样式的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上最后的效果图看看：
物流跟踪

wxml

<view class="logistics-box" wx:if="{
  {logisticsData.length > 0}}">
  <view class="logistics-item" wx:for="{
  {logisticsData}}" wx:key="index">
    <view class="logistics-item-left">
      <view class="line-box">
        <view class="top-line {
  {index == 0 ? '' : 'bg-gray'}}"></view>
        <view class="bottom-line {
  {index + 1 == logisticsData.length ? '' : 'bg-gray'}}"></view>
      </view>
      <view class="center-circle"></view>
    </view>
    <view
      class="logistics-item-right {
  {index == 0 ? &#