使用Vant完成类似时光轴、物流信息的进度

最新推荐文章于 2023-12-04 16:18:26 发布

派大星_study

最新推荐文章于 2023-12-04 16:18:26 发布

阅读量3.3k

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39721418/article/details/103901965

版权

效果图展示：
在这里插入图片描述
相关代码如下：

<template>
  <div>
    <van-steps direction="vertical" :active="1">
      <van-step>
        <div class="step">
          <h3>2019/10/06</h3

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

派大星_study

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

开源时间轴组件

06-27

开源时间轴组件，非常酷的时间轴组件，做blog、日志、和需要有历史记录的系统非常合适，如项目的开发，设计过程等。

vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）

会点php的前端小渣渣

08-21

1727

【代码】vant4 自定义垂直步骤条时间线组件几行css代码改造完成（附效果图）

1 条评论您还未登录，请先登录后发表或查看评论

微信小程序样式组件Vant——物流消息通知

qq_43706131的博客

08-01

1324

微信小程序样式

时间轴插件

09-15

时间轴插件，可以实现图片的时间轴动态播放功能，具有播放和停止按钮，存在按钮使得点击后回到最初播放位置。

移动端H5 - 手撸一个时间线 timeline

老程的博客

07-22

2556

H5端，手撸生命线 timeline 组件

使用Vant完成通知栏Notify的提示操作

01-18

效果：代码展示：  顶部通知 [removed] export default{ data(){ return{ msg:'' } }, methods:{ toNotify(){ this.$notify({ message:'我是提示的... backgroun

使用Vant完成DatetimePicker 日期的选择器操作

01-21

效果展示：代码展示： ()>点击选择日期选择的日期结果> <van-datetime-picker v-model=c

在微信小程序中使用vant的方法

10-16

安装完成后，需要使用微信开发者工具中的构建 npm 功能。打开微信开发者工具，点击左上角的“工具”按钮，选择“构建 npm”。这一步会将 npm 包编译成微信小程序能识别的格式，并生成 `miniprogram_npm` 文件夹。 ...

详解如何在微信小程序开发中正确的使用vant ui组件

10-18

微信小程序是一个基于微信运行的应用程序，它是微信内部的一个轻量级应用开发框架。小程序的开发为许多开发者...此外，随着微信小程序平台的不断更新，开发者应时常关注官方文档，以获取最新的开发工具和组件使用信息。

uni-app实现类似物流进度跟踪功能

rayong的博客

09-17

2990

文章目录1、物流进度跟踪的组件2、调用组件的页面3、页面的效果图 1、物流进度跟踪的组件 <template> <view class="steps"> <!-- <view class="steps_list"> <view class="node" :class="{'active-node':item.activity == item.index}"></view> <view class="tail" :cl

展示物流进度详情页面

09-28

vue实现的物流组件，用于展示物流详情，更新物流状况。展示物流状态、快递公司类型、快递公司电话、快递更新日期时间、快递当前所在地、快递收货地址。

时间轴组件

08-22

web前端的时间轴展示组件。

VUE-任务进程（时间轴）

10-09

公司提出一个需求，要求写一个任务进程组件用于监控工作时间内任务完成情况。包括任务状态，任务起止时间，当前时间线，任务是否延迟开始。压缩包中不包含node_modules,请下载后自行安装相关插件

【JavaScript源代码】vue时间线组件的使用方法.docx

12-29

vue时间线组件的使用方法　　本文实例为大家分享了vue时间线组件的具体实现代码，供大家参考，具体内容如下　　效果　　vue-时间线组件（时间轴组件）代码　　<template>　　 <ul class="timeline-wrapper">　　 <li class="timeline-item" v-for="t in timelineList" :key="t.id">　　 <div class="timeline-box">　　 <div class="out-circle">　　 <div clas

Vue 用Vant实现时间选择器的示例代码

10-16

主要介绍了Vue 用Vant实现时间选择器的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vant添加货物

qq_45098695的博客

11-07

184

vant添加货物 1、首页输入单号日期 2、点击添加货物按钮代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init

Vue2时间轴（Timeline）

最新发布

weixin_40412060的博客

12-04

998

要求时间轴的点展示进度百分比，线也根据进度不同展示不同长度的颜色。使用的组件库是vant的circle。

显示时间轴

weixin_30552811的博客

02-20

186

在html界面进行时间轴的搭建，和数据字符串的拼接，之后进入到controller中，按照springMVC+MyBits框架流程执行，返回数据值。 <script type="text/javascript">$(function(){ $.ajaxUrl({ type:"POST", url:"cloud/record/getList"...

vue中使用vant样式完成商品添加

06-06

要使用 vant 组件库完成商品添加，你需要先引入 vant 组件库，然后再按照上述步骤进行开发。下面是一个使用 vant 样式的商品添加示例代码： ```html <template> <div> <van-form @submit="addProduct"> <van-field label="商品名称" v-model="productName"></van-field> <van-field label="商品价格" v-model="productPrice" type="number"></van-field> <van-field label="商品描述" v-model="productDescription" type="textarea"></van-field> <van-button type="primary" native-type="submit">添加商品</van-button> </van-form> <van-list> <van-cell v-for="(product, index) in productList" :key="index"> <div>{{ product.name }}</div> <div slot="title">{{ product.price }}元</div> <div slot="right-icon">{{ product.description }}</div> </van-cell> </van-list> </div> </template> <script> export default { data() { return { productName: '', productPrice: '', productDescription: '', productList: [] } }, methods: { addProduct() { const product = { name: this.productName, price: this.productPrice, description: this.productDescription }; this.productList.push(product); this.productName = ''; this.productPrice = ''; this.productDescription = ''; } } } </script> ``` 在这个示例中，我们使用了 vant 的 Field、Button、List 和 Cell 组件，它们的样式和功能都可以帮助我们更快速、更方便地开发出商品添加功能。

使用Vant完成类似时光轴、物流信息的 进度

使用Vant完成类似时光轴、物流信息的进度