微信小程序使用van-steps详解

7月前作者：小兽~ 分类：Toy博客阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序使用van-steps详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vant官网代码如下

<van-steps :active="active">
  <van-step>买家下单</van-step>
  <van-step>商家接单</van-step>
  <van-step>买家提货</van-step>
  <van-step>交易完成</van-step>
</van-steps>

问题1：官网代码用在小程序上无效果

van-steps,微信小程序,javascript,小程序

这里发现小程序的vant包里有 steps 没有step 因此官网写法无效。

解决方法

正确写法如下所示

页面wxml

<van-steps direction="vertical" active="0" steps="{{steps}}">
</van-steps>

js

Page({
  data: {
    steps:[
			{text:'标题一',desc:'具体描述'},
			{text:'标题二',desc:'具体描述'},
			{text:'标题三',desc:'具体描述'},
			{text:'标题四',desc:'具体描述'}
		]
  },
})

最终效果

van-steps,微信小程序,javascript,小程序

问题2：steps数组中如何设置其他字段

（1）找到vant的包

van-steps,微信小程序,javascript,小程序

（2）找到steps的index.wxml文件

van-steps,微信小程序,javascript,小程序

（3）下面红框里是steps中的字段，可根据需求修改

van-steps,微信小程序,javascript,小程序
修改样式的同理，可在index.wxss中修改文章来源地址https://www.toymoban.com/news/detail-598988.html

到了这里，关于微信小程序使用van-steps详解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序通知，微信小程序长期订阅消息添加硬件设备能力的设备订阅消息step-by-step

本文目的，分享一个实际案例：开发微信小程序的报警器的微信订阅消息，设备报警后触发微信报警前提：有一个微信小程序并且微信认证过。 1：添加设备申请权限 2：按照实际情况填写设备信息，一般等两天到三天能审核过 3：申请设备消息能力，这个一部不做的

2024年04月16日
浏览(42)
微信小程序使用 vant-weapp 组件 van-field 类型为 textarea 在IOS端出现的问题记录

在 IOS 端出现 textarea 的 value 出现在最顶层, 上下滚动就消失, 此bug容易引起观感不适出现该bug的原因可能是官方的原生组件的使用限制微信小程序原生组件的使用限制提供一个 showKey 布尔值去做限制, wx:if 为 false 时使用 text/text , 为 true 时使用回 van-field type=\\\"textarea\\\"/van-fi

2024年02月13日
浏览(45)
【微信小程序】van-uploader实现文件上传

使用van-uploader和wx.uploadFile实现文件上传，后端使用ThinkPHP。 1、前端代码 json：引入van-uploader wxml：deletedFile是删除文件函数，设置deletable=“{{ true }}” 和在数据中 deletable: true图片右上角会显示删除按钮，在点击删除图标时调用deletedFile函数去处理删除逻辑。beforeRead：是读之前

2024年02月14日
浏览(36)
微信小程序整合vantweapp van-field遇到的坑？

最低基础库版本在 2.9.3 以上时，可以使用简易双向绑定。但是在双向绑定的时候，发现有一个层级关系在用户添加地址，和van-popup、van-area结合使用的时候，点击输入框，弹出选择地址的框，此时发现用户仍然可以输入，我就想到了禁用，但是发现禁用会置灰，给用户一种

2024年02月11日
浏览(44)
微信小程序封装自定义van-dropdown-item 下拉选择框

1.vant weapp虽然给我们提供了van-dropdown-item且美观的组件但是没有插槽无法自定义内容，限制了各位大神的操作，接下来我们先来了解他的使用在去封装自己的自定义这是官方自己的效果！下面来看看我们自己封装的组件 2.还能自定义搜索框等等是不是很奈斯！接下来我们在

2024年02月11日
浏览(36)
微信小程序——van-field中的left-icon属性自定义

✅作者简介：2022年博客新星第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏：微信小程序学习分享 ✨特色专栏：国学周更-心性养成之路 🥭本文内容：微信小程序——

2024年02月11日
浏览(31)
微信小程序中如何设置textarea或者van-field中的placeholder换行显示

微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可

2024年02月12日
浏览(32)
微信小程序(van-tabs) 去除横向滚动条样式(附加源码解决方案+报错图)

今天第一次接触 vant 组件库。 ant官网地址适用于Vue3 支持 Vue2 、 Vue3 、微信小程序等我在使用van-tabs组件时遇到了一个问题，如下图所示：从图片上可以看到有个灰色的横向滚动条，一开始领导给我说这个问题，我反反复复都没有测出来，在微信开发者工具、IOS系统都没有

2024年02月10日
浏览(37)
完美解决微信小程序van-field left-icon自定义图片

实现效果： data中定义：

2024年02月12日
浏览(26)
解决BUG:微信小程序vant引入报错[“usingComponents“][“van-search“]: “@vant/weapp/search/index“ 未找到

报错内容： [ miniprogram/pages/index/index.json 文件内容错误] miniprogram/pages/index/index.json: [\\\"usingComponents\\\"][\\\"van-search\\\"]: \\\"@vant/weapp/search/index\\\" 未找到 (env: Windows,mp,1.06.2301040; lib: 2.14.1) 按照vant说明文档配了很多遍，微信小程序也更新到最新版本，project.package.json如下配置依旧报错。网上各

2024年02月11日
浏览(44)