uni-app 循环绑定点击事件

最新推荐文章于 2024-07-02 09:41:26 发布
最新推荐文章于 2024-07-02 09:41:26 发布
阅读量7.5k 收藏 8
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqainyo/article/details/105438463
版权

循环一组数据之后，想点击当前某一块跳转到对应页面的时候；比如想点击外卖点餐这块
在这里插入图片描述
先给v-for加上一个索引（index），然后设置一个点击事件。把当前索引和循环之后的数据（take）写到事件的参数里边。 在这里插入图片描述
点击当前这块内容之后，输出这块内容的全部数据
在这里插入图片描述
接着继续往下做…

薛阳-
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uniapp使用for循环时候，添加触摸事件并绑定数据
MengTsn的博客
03-19 3339
uniapp使用for循环时候，添加触摸事件并绑定数据 记录下自己遇到过的问题： 想要实现的功能是：通过for循环将数据展示到页面中，并且绑定个事件，点击时会打开一个新的页面，并将点击时的模块数据传递到下一个页面，由于第一次用uniapp，废了很大劲，记录下 <view class="poe-main"> <view class=" poe-main-list" v-for="(item,index) in poe_poetry_body" @tap="openPoe" :data-
uni-app列表项实现左划操作功能
02-25
此功能的实现依赖于uni-app的`<SwipeAction>`组件，通过设置数据和绑定事件，我们可以自定义滑动操作的行为，从而提高应用的交互性。同时，通过调整样式，可以根据项目需求设计出符合品牌形象的操作界面。
uniapp的v-for循环，v-bind动态属性，点击事件
yezi153的博客
01-20 1353
v-for的循环 循环的数据项,索引 in 循环的数组 点击事件 第一个参数 点击事件触发要传递的参数 第二个参数是事件对象 用$event来传
uniapp 之 uni-table组件添加行点击事件
最新发布
qq_45306078的博客
07-02 236
问题：在使用uniapp写微信小程序时，需要给uni-table添加行事件点击跳转，但是不成功，怎么解决？
uni-app,vue循环不同点击事件并传值
hjy170314的博客
12-22 1563
<view class="btnBox"> <view v-for="(item, index) in pageObj.btnList" :key="index"> <view class="page__bd"> <view class="page__bd page__bd_spacing title__bd walltBtnBox"> <image :src="walletImg[index]" clas.
uniapp 循环绑定点击事件 跳转对应页面
ke_sin的博客
05-18 8486
效果图 目录如下 从my.vue 跳转card order favorite 代码实现 ① 温馨提示：用navigateTo方法跳转 左上角自带返回键 如不需要返回功能 用redirectTo / reLaunch 都可 <template> <view class="wrap"> <view class="meun-wrap" > <view class="meuns" v-for="(item,index) in meunsList
Uni-App - 事件处理、事件绑定、事件传参
热门推荐
牧码的博客
02-19 3万+
uni-app 事件 事件映射表，左侧为 WEB 事件，右侧为 ``uni-app`` 对应事件 { click: 'tap', touchstart: 'touchstart', touchmove: 'touchmove', touchcancel: 'touchcancel', touchend: 'touchend', tap: 'ta...
for循环 添加点击事件时 出现总是加到最后一个元素上的问题
03-07 447
原因是：函数调用外部变量时构成了闭包，里面的变量会受到影响，所以声明成一个只有自己可以访问的闭包即可： 例：在点击每个div时 弹出对应序号，但是却总是弹出最后一个元素时 ，可以修改成这样： window.onload = function(){ var divs = document.getElementsByTagName("div"); for(var i = 0; ...
uni-app table表格
10-26
4. **交互性**：`table`组件支持点击事件，可以通过`@click`绑定函数，实现对表格内数据的点击操作。同时，`row-click`事件可以监听到用户点击某一行，便于进行进一步的操作。 5. **分页**：如果数据量较大，通常...
uni-app微信小程序生成海报.rar
02-07
- uni-app使用Vue的语法，因此可以利用Vue的数据绑定和计算属性功能，动态生成海报上的内容。例如，通过`v-for`循环遍历数据数组，生成多个海报元素。 - 数据管理：使用uni-app的Vuex状态管理库，集中管理全局状态...
uni-app从0到1.DOC uni-app实现代码
01-10
26. **vue循环不同点击事件并传值**：在循环中绑定不同的事件处理函数，实现差异化交互。 课程涵盖了uni-app开发的各个方面，通过学习这些内容，开发者可以熟练掌握uni-app的开发技术，构建出跨平台的应用程序。...
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
09-30
在本文中，我们将深入探讨如何使用uni-app框架创建一个自定义组件，该组件实现菜单的左右滑动，并在点击时使被选中的项居中显示。uni-app是一个基于Vue.js的多端开发框架，它允许开发者用一套代码编写应用，然后在...
uniapp 绑定事件
爬楼梯的前端小白的博客
07-06 2813
在uni中 事件绑定和在vue中是一样的 通过v-on进行事件的绑定 也可以简写为@ 给button做一个绑定事件 methods与dete平级 <template> <view> <button type="primary" v-on:click="clickHandle()">按钮</button> </view> </template> <script> export default { date
uni-app笔记-【数据绑定和循环遍历】[v-bind.v-for]
m0_49194578的博客
11-10 2015
数据绑定变量的定义和使用数据的动态绑定 v-bind | ：数组的循环遍历v-for准备一个数组循环遍历使用 时直接使用{{key}}插值表达式即可 变量的定义和使用 定义 data() { return { user: { "name": "zhangsan", "age": 18 } } } 使用 <view class="box1"> {{user}} <view>{{user.name}}{{user.age}}</view
uniapp for循环点击出错的一点小插曲，获取的index都是错的
qq_38337245的博客
10-28 563
for循环点击事件获取index错乱的bug 也许是因为这种问题呢
uni-app入门:常用事件绑定与数据同步
weixin_43401380的博客
11-19 9386
uniapp零基础入门:实战案例讲解常用事件绑定与数据同步
uni-app知识点
qq_69909373的博客
11-28 1227
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
【uniapp】原生小程序以及uniapp中如何获取v-for列表中点击行的信息，以及改变每个点击的样式
ONLYSRY的博客
07-28 2767
原生小程序以及uniapp中如何获取v-for列表中点击行的信息，以及改变每个点击的样式。
vue uniapp 小程序 v-for遍历，点击某一项，动态改变样式
weixin_47981445的博客
03-04 4692
<view class="content"> <view :class="index==colin?'c-contents':'c-content'" v-for="(item, index) in hswt" :key="item.id" @tap="dhsaa":data-msgs="item"> <text :class="index==colin?'c-content2':'c-content1'" >{{item.value}}&
获取uni-app 循环生成checkbox 默认选中的值
06-09
你可以通过以下步骤获取uni-app循环生成的checkbox默认选中的值： 1. 在你的data里定义一个数组并初始化它的值，例如： ``` data() { return { checkboxList: [ { label: '选项1', value: '1', checked: true }...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值