微信小程序之循环与事件冒泡

最新推荐文章于 2024-06-09 14:26:11 发布

suzhiwei_boke

最新推荐文章于 2024-06-09 14:26:11 发布

阅读量838

点赞数 1

本文链接：https://blog.csdn.net/suzhiwei_boke/article/details/119416361

版权

本文详细介绍了JavaScript的事件冒泡机制及其在微信小程序中的应用，包括事件冒泡的作用和如何阻止事件冒泡。同时，文章探讨了微信小程序中的for循环，展示了如何通过wx:for指令进行列表渲染，并讲解了如何在循环中获取数组索引以及通过点击事件添加样式。此外，还提供了给for循环内的view添加单独样式的示例。

摘要由CSDN通过智能技术生成

事件冒泡：在一个对象上触发某类事件，这个事件会向这个对象的的父级传播，从里到外，直至它被处理或者到达了对象层次的最顶层，即document对象。这个过程就是JavaScript的事件冒泡。

事件冒泡的作用：

（1）事件冒泡允许多个操作被集中处理，（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子元素上），它还可以让你在对象层的不同级别捕获事件。

bindtap 普通点击属性

catchtap 执行事件冒泡 event.stopPropagation();

循环：wx:for="{{dataList}}" wx:key="id" 如何是图片标签一起的话一般要写代码：data-id="{{item.id}}" data-name={item.name}}"

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名。

微信小程序之for循环

在微信小程序中也有for循环，用于进行列表渲染。

官方实例

打开微信开发者文档，在框架部分的视图层--》wxml--》列表渲染中可以看到官方给出的for循环实例，在实例中可以看到下面相关说明。

test.wxml

　　{{index}}: {{item.message}}

</view>

　　{{idx}}: {{itemName.message}}

</view>

test.js

复制代码

Page({

　　data: {

　　　　array: [

　　　　　　{message: 'foo',},

　　　　　　{message: 'bar'}

　　　　]

　　}

})

复制代码

在上面的例子中，针对同一个数组，分别使用两种不同的方式，得到了相同的结果，也就是官网说明中指出的，index 和 wx:for-index 都可以用来表示元素下标，而item 和 wx:for-item 都可以用来表示元素，但在实际运用中，我们使用for循环的时候，更多的是希望可以通过点击事件获得元素的索引下标，而不是在列表中展示下标。

获取数组索引

wx:for-index 方式

在微信小程序中，元素也有id属性，并且可以通过点击该元素获得其id，因此，我们只需要将id与元素下标进行绑定，就可以通过id来获得索引下标了。

对上面的代码稍作修改，得到下面的例子

test.wxml

　　{{idx}}: {{itemName.message}}

</view>

test.js

toindex(e){

　　console.log(e);

　　var idx = parseInt(e.currentTarget.id);

}

在上面的介绍中，我们知道 wx:for-index可以用来表示下标，因此将 wx:for-index的值通过id进行绑定，通过bindtap为列表项添加点击事件，当我们点击列表项中的第二项时，在test.js中得到上图的打印结果，在上面的输出结果对象中，打印出了列表项的id值，但是一个字符串，因此我们需要通过parseInt将其转为整数即可。上面的idx就是我们需要的索引值了。