这篇博客介绍如何在微信小程序中实现列表渲染并点击按钮获取对应任务的索引。作者通过一个实例展示了在template中使用wx:for绑定数据，并通过data-index设置索引，再结合bindtap事件监听点击，从而在JS文件中获取按钮所在列表项的索引。提供的代码示例展示了这一过程，帮助开发者解决类似问题。
最近一段时间，我自己在写一个微信小程序，就遇到了一个这样的问题，我想做一个这样的效果：
这是一个任务列表，是使用列表把 数据库里的数据渲染到template里面。但是template里面有按钮button，这要求点击不同的button
会对应列表中不同的任务进行操作。那这就要求点击不同的按钮能获取到此按钮在列表中的索引。
我在这里做一个简单的实例：
左边是使用列表渲染的四个template，每个template里面有一个按钮button，每个button的点击事件是输出此button在列表中的索引，如右图所示。
实现这个效果的关键在于：
在使用下面代码时，data-index指明索引名，另外，通过view的bindtap事件可以在js文件中获取到此button在列表中的索引。
<view wx:for="{{list}}" data-index="{{index}}" bindtap="view_test"></view>
https://download.youkuaiyun.com/download/k1ttyLove/85178526
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
