微信小程序：vant-stepper步进器输入框在遮罩层上方的问题

于 2023-07-28 13:33:13 发布
阅读量377 收藏
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nancy_chan/article/details/131978143
版权

页面大致是这样的，打开遮罩层会出现这样的问题

最开始我是通过input-class调正步进器的堆叠顺序，发现没效果

然后通过js设置可见性，不过这样太麻烦了

重新看了一下vant的遮罩层在线文档，vant官方提供了遮罩层的堆叠顺序这个属性，

在遮罩层添加

z-index="99"

 

image.png

 

 

         其实问题都很简单，但是对于第一次使用这个框架，有些框架的特性问题找bug还是要花费一定的时间。如果你遇到了类似的问题，希望能帮到你！

明天何其多
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何为微信小程序添加计步器和健康数据获取功能
m0_72166538的博客
04-10 466
步骤4：获取健康数据 要获取用户的健康数据，我们需要使用微信的云开发能力。步骤2：配置小程序权限 添加计步器和获取健康数据需要在小程序的配置文件app.json中配置相应的权限。注意：由于涉及到用户的隐私数据，如健康数据，需要在小程序开发者平台的“插件管理”中添加使用的相关API插件，并申请相应的权限。在step-counter页面的WXML文件中添加一个显示步数的文本框和一个按钮，用于开始和停止计步。步骤3：创建计步器页面 在小程序项目的pages目录下创建一个新的页面，命名为step-counter。
微信小程序 stepper步进器自定义组件。代码简单，适合新手学习使用。
weixin_54828488的博客
02-07 4807
简单的组件，这种组件叫做步进器(steper)，步进器常用于购物车等需要增减数量的场景，最近的旅游项目中用于增减房间数和人数。 应用场景 组件的一些功能 从产品的角度来理解步进器很简单，但在开发角度来说需要适应多种场景及控制一些状态： 1、最小值 2、最大值 3、每次增加或者减少的值 例如：0.1就是每次增加或者减少0.1 ；默认为1 4、是否禁用 5、组件的索引值index。像购物车中，可能有好几个组件，需要区分所属哪个商品。所以需要用到。 自定义组件 创建components目录 在compon
Vant源码解析(三)van-stepper步进器
我的博客
07-18 1728
先说下自己的开发思路，然后在对照下vant组件的思路，来查找下自己的不足。这个步进器有加和减的功能，还有输入的功能，限制最小和最大的功能。
vant组件 移动端遮罩层
xiaomazhuli的博客
05-17 1887
在进入页面之前，页面的数据请求渲染需要一定的时间，这时需要加一个遮罩层处理，让页面变的更好看一点，等数据都获取到了，再让用户看见 <van-loading class="loading" v-if="loading" /> <!-- 内容 --> 每当调取接口的时候，就要设置一下 loading 为 false，获取到了数据就再设为 true，实例如下： //data中 loading:false, dataDetail:{} //m..
微信小程序点击按钮动态添加输入框，点击步进器按钮获取输入框的值进行加减计算--不使用表单
qq_44776950的博客
08-07 3810
微信小程序实现动态添加或删除输入框，参考wx:for列表渲染 搭配vantweapp使用，提高开发效率（例如已实现的步进器） 关键： wx:for列表渲染每个item，达到增加删除的效果 绑定date-index自定义数据，作为下标传递 充分利用数据绑定和中间变量 事件event传参来获取确定的按钮或数据 解决办法： wxml代码： <view wx:for="{{inputList}}" wx:key="id"> <view>序号{{index+1}}</view&gt
微信小程序点击按钮动态添加或删除输入框，点击步进器按钮获取输入框的值进行加减计算(选中删除后，步进器数值未更新的解决办法)--不使用表单
qq_44776950的博客
08-09 1802
今天在选中删除后发现，保存的列表值已更新，但是页面的步进器数值却没有改变 目标：当添加三个item后，删除中间的，显示如下效果 输入示例： 1 进价1 步进器1 2 进价2 步进器2 3 进价3 步进器3 查阅官方文档https://youzan.github.io/vant-weapp/#/stepper 思路： 猜测是其value的值没有改变，导致页面的步进器也没有改变，使用文档中的异步更变 关键： value的数据绑定是通过date.value唯一指定了，一旦更变导致所有的一起更变 wx:for
小程序van-stepper在输入0删除本条数据，渲染后下一条数据变为0的bug
xie_candy的博客
05-30 1354
项目场景： 通过wx:for渲染一组数据，通过计步器减少到0，或者直接输入0，等于删除本条数据。 问题描述 检测到计步器的value为0时，通过splice()方法删除本条数据后，下一条数据的计步器也变成0，重新赋值也无效。 原因分析及解决思路 1. 考虑到异步变的问题，设置async-change属性后，通过减少按钮变成0之后删除的数据能正确渲染，但是通过输入0的方式还是有问题。 2. 经过测试，如果删除的数据计数和下一条的数据计数一样，那么删除该条数据后，下一条数据的val.
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
微信小程序---提交表单后清空输入框
03-29
最近有人问我提交表单后怎么把输入框的内容清空了。  这种方法不止一种， 1、可以用表单的重置功能。 按钮设置：   formType="reset">提交 form设置：   bindreset="formReset"> 表单重置时会触发reset事件，在...
微信小程序使用 vant Dialog组件的正确方式
10-15
微信小程序在开发过程中，为了提供更好的用户体验和交互设计，经常需要用到各种UI组件。Vant是一个由有赞公司开源的基于Vue 2.0的移动组件库，特别适用于快速构建风格一致且美观的移动端页面，从而提升开发效率。...
毕业设计-“跑鸭”微信小程序-一款基于校园跑步的社交小程序 技术栈：Vant-Weapp UI、Laravel+MySQL
05-17
毕业设计-“跑鸭”微信小程序-一款基于校园跑步的社交小程序 技术栈：Vant-Weapp UI、Laravel+MySQL “跑鸭”微信小程序是一款基于校园跑步的社交小程序。它旨在鼓励学生积极参与跑步活动，同时提供一个社交平台，让...
毕业设计-“跑鸭”微信小程序-一款基于校园跑步的社交小程序-技术栈：Vant-Weapp UI、Laravel+MySQL
最新发布
05-17
毕业设计-“跑鸭”微信小程序-一款基于校园跑步的社交小程序-技术栈：Vant-Weapp UI、Laravel+MySQL “跑鸭”微信小程序是一款基于校园跑步的社交小程序。它旨在鼓励学生积极参与跑步活动，同时提供一个社交平台，让...
【Vant组件】van-dialog组件弹窗只有遮罩层不显示内容解决方案
我有满天星辰的博客
02-23 3570
移动端引用Vant组件Popup 弹出层 van-dialog，只显示遮罩层而不显示内容。
如何将vant 步进器的初始值设置为0
c327127960的博客
07-15 4104
在使用vant步进器组件时，想将步进器的初始值设置为0，但是单纯的设置value为0时并不起作用，加了min属性为0时也还是不起作用，初始值始终为1。在步进器的配置中加上min=“”即可。
vant tabbar遮挡内容的解决方式
Joy 的博客
06-12 6629
vant tabbar 遮挡内容是由于cover-view的自定义组件实现形式导致的，与内容元素并不是同级关系。可以使用一个空view占位来解决
uni-app使用uview遮罩、模态框，滑动遮罩层使底层的page页面也跟随滑动BUG解决办法
dengyonglei的博客
05-22 509
uni-app使用uview遮罩、模态框，滑动遮罩层使底层的page页面也跟随滑动BUG解决办法
vue 使用vant2的van-stepper步进器,阻止事件冒泡
qq_36618604的博客
05-30 773
在van-stepper步进器上加div 再添加@click.stop事件，即可解决问题。
【微信小程序】van-stepper购物车事件冒泡
weixin_42575720的博客
05-27 753
#####思路： 我研究最简单的方法就是外层加一个标签，用catchtap去阻止 #####关键代码 html： <view catchtap="stepper"> <van-stepper value="{{ item.amount }}" long-press="{{ false }}" data-index='{{index}}' data-item='{{item}}' input-width="30px" button-size="20px" min="1"
微信小程序使用vant-cell当前点击的事件传递参数
05-10
可以使用vant-cell组件的bind:click事件来监听点击事件，然后在事件处理函数中将需要传递的参数作为参数传递给事件处理函数。示例代码如下： ```html <van-cell title="点击我" bind:click="handleClick" data-id="123"></van-cell> ``` ```javascript Page({ handleClick(event) { const id = event.currentTarget.dataset.id; console.log("当前点击的id为：", id); } }) ``` 在上面的示例中，我们在vant-cell组件中定义了一个data-id属性，并在事件处理函数中使用event.currentTarget.dataset.id获取该属性的值，即当前点击的id。你可以根据需要修改data-id属性的值，来传递不同的参数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值