关于uniapp双层点击事件

原创已于 2023-12-29 17:30:49 修改 · 848 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #java #前端

于 2023-12-20 14:19:55 首次发布

文章描述了在开发中如何使用Vue框架实现一个卡片组件，其中包含跳转详情页的功能以及点击按钮触发弹出对话框的设计。

我在做项目的时候有个卡片既要跳转到详情页里面又有一个按钮需要点击然后弹出弹框，这时候就用到了<view class="goods-card" @click="goDetail">
               <image src="../../../static/product/product-img.png" mode=""></image>
               <view class="goods-detail">
                   <view class="goods-title">产品简介：9X9超豪华大飞机，出行旅游首选，你值得拥有！</view>
                   <view class="">规格:9X9</view>
                   <view class="price" :catchtouchmove="false">
                       
                       <view class="contact-us" @click.stop="show=true">联系我们</view>
                   </view>
               </view>
           </view>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

老鸭汤真好喝

关注关注

6
点赞
踩
6

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp事件多次点击处理

weixin_41688609的博客

11-10

1476

在common文件目录下新建一个js（utils.js） function onClickOne(fun,data){ let _this = this; if(clickFalg){ _this.clickFalg = false if(data !== '' && data){ fun(data) }else{ fun() } setTimeout(() => { that.noClick = true; }, 2000) }el.

uniapp使用uni-ui组件库的uni-goods-nav组件，删除了示例中的option数组，还是会出现“店铺”、购物车的按钮和字样

qq_45634989的博客

08-12

2077

uniapp使用uni-ui组件库的uni-goods-nav组件，删除了示例中的option数组，还是会出现“店铺”、购物车的按钮和字样

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

1 条评论

优快云-Ada助手 2023.12.21
太棒了！你对uniapp双层点击事件的解释非常清晰，让我受益匪浅。希望你能继续分享更多关于uniapp的知识和经验，这对于初学者来说是非常宝贵的。另外，如果你愿意，可以考虑在以后的博客中分享一些关于uniapp中使用动画效果和数据缓存的技巧，这些内容对于提升用户体验和应用性能都非常重要。期待你的更多精彩内容！如何写出更高质量的博客，请看该博主的分享：https://blog.youkuaiyun.com/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2

购物栏置底 - uni-ui组件uni-goods-nav放在屏幕下方的办法

Rudon滨海渔村的博客

01-10

2137

核心步骤看效果https://hellouniapp.dcloud.net.cn/pages/extUI/goods-nav/goods-nav 获取代码https://uniapp.dcloud.io/component/uniui/uni-nav-bar 官方手册例子可以显示，但是没有置底用<view class="myFixedBottom">将视图代码包起来在style中定义 .myFixedBottom { width: 100%; position: fi..

uniapp 事件单击双击多次点击及滑动

qq_55995331的博客

02-21

2673

uniapp 事件单击双击多次点击及滑动。

uniapp中@click或者@tap多层嵌套的问题解决方法

知码客

07-25

1157

我们在开发页面的过程中。例如要设计一个九宫格的相册，并且加上删除上传图片和点击图片后预览图片大图的功能例如下图的演示功能。通过上面我们可以看到我们涉及到了两个点击的操作调用了不同的方法，就会遇到一个问题就是点击外围。号后要删除掉当前的图片，那么我们设计的时候如果我们代码写成如下的格式。这个仅仅是我自己的一个笔记整体九宫格实现的代码后续整理再发布。是不生效的，那么我们处理的方式很简单。点击图片后显示大图预览图片，点击。

【uniapp】点击多选的一种写法，并遍历出选择数量

ONLYSRY的博客

11-24

1322

【uniapp】点击多选的一种写法。

uniapp-商城-70-shop（3-商品列表，点击规格，进行属性选择）

最新发布

weixin_43613170的博客

05-26

1147

文章摘要：该文档详细描述了电商平台中商品规格选择功能的实现方案。主要包括：1) 使用u-popup组件实现规格选择弹窗；2) 通过Vuex管理弹窗状态和数据传递；3) 采用双层循环展示父子规格选项；4) 实现规格选择交互逻辑，包括选中状态切换、规格数据存储和确认按钮状态控制；5) 处理事件冒泡问题确保点击事件精确触发。系统通过计算属性和样式绑定实现选中规格的视觉反馈，并包含购物车添加的数量选择功能，完整覆盖了电商规格选择的典型需求场景。

uniapp开发app时，双层v-for嵌套循环下如何关闭uni-popup弹出组件

11-30

在UniApp开发过程中，如果你遇到双层`v-for`嵌套循环并在其中需要动态显示或隐藏`uni-popup`弹出组件，你可以通过绑定`open`属性并关联一个数据项的布尔值来控制弹出框的显示状态。假设你有两层`list`数组，分别叫做...

uniapp开发app时，没有关联双层v-for嵌套循环下如何关闭uni-popup弹出组件

11-30

在UniApp开发过程中，如果你想要在一个页面上使用uni-popup弹出组件，但没有遇到需要关联双层`v-for`嵌套循环的情况，你可以直接在适当的地方使用`open-type="popup"`属性打开弹出框，并通过`data-*`属性或者ref来...

uniapp商品详情页规格、SKU选择

qq_38541936的博客

05-13

5822

uniapp商品详情页购物车选择提示：这里因为后台返回的数据格式原因，代码性能可能有点稍差，但是注释是很完整的文章目录uniapp商品详情页购物车选择先上代码，以示诚意后台接口返回的数据格式实现讲解先上代码，以示诚意 <template> <view>  <view class="sku-list" v-for="item in this.userChooseSkuList" :key="item.id">

【uni-app】数据绑定和事件绑定实例

foreverKOOKV95的博客

05-01

3817

uni-app 事件

A_bad_horse的专栏

02-04

546

第一步：注册事件 @click="handleClick" 第二步：定义事件监听函数，需要在"methods"中定义（即事件回调）第三步：事件的传参 Demo <template> <view class="content">  <view @click="handleClick">Click</view> </view> &lt...

uniapp小程序：大盒子包裹小盒子但是都有点击事件该如何区分？

m0_65069237的博客

05-13

534

这个时候如果点击评价有可能会点击到它所在的大盒子，如果使用css中的z-index设置层级的话如果页面的盒子多的话会混乱，所以我们可以使用事件修饰符来简化这个过程。对于点击事件，可以使用。修饰符来阻止事件冒泡点击小盒子的时候就会保证不会点击到大盒子，点击大盒子也不会触发小盒子（虽然本来就不会触发，但还是说一下）。对于小白可以教学功能实现、免费配环境。

uniapp view设置当前view之外的点击事件

GoppViper的博客

09-24

1629

这些方法可以根据你的具体需求进行选择和调整，以实现在 UniApp 中为view设置当前视图之外的点击事件。希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。

click事件点击一次代码执行了两次

meng2lin的博客

09-23

1473

在开发过程中，某个点击事件在第一次加载时，页面没有出现错误，当一个变量id改变后页面再次加载，随之同一个点击事件执行代码执行了两次。这个问题解决了好长时间，一直排查错误，排查不出来。最后在网上找到了方法。在页面中动态加载相同模块的时候，当触发第二次加载的模块时，有时会连第一个模块的内容随之改变，这是因为为第一个模块注册点击事件时并没有销毁而执行了两遍。此时需要手动的添加事件移除方法，可以选择在每次事件处理完成后销毁该事件，也可选择在下次事件触发前销毁之前的事件。在JQuery中存在unbind()方法

uniapp列表点击多选和单选

九亿宅男的梦的博客

04-21

2398

<view class="title">物品类别</view> <view class="box dis-flex justify-between flex-wrap"> <view class="lias" :class="item.selected ? 'active' : ''" v-for="(item,index) in goodsCateogory" :key="index" @c...

uniapp开发解决多次点击触发事件