微信小程序开发——template模板里面的button控件，点击分别获取列表索引

### 微信小程序开发——template模板里面的button控件，点击分别获取列表索引 #### 背景介绍 微信小程序自推出以来，以其便捷的开发流程、丰富的组件库以及广泛的用户基础，受到了开发者们的热烈欢迎。其中，template模板是微信小程序提供的一种用于复用界面结构的功能，能够极大地提高开发效率，尤其是在处理列表数据时更是得心应手。本文将通过一个具体的示例来讲解如何在使用template模板渲染列表的同时，通过点击不同的`button`控件获取该按钮在列表中的索引。 #### 示例解析 假设我们需要在一个小程序页面中展示一个动态生成的列表，并且每个列表项都包含一个`button`按钮。当用户点击不同的按钮时，我们希望能在控制台中输出被点击按钮在列表中的位置（索引）。 #### WXML代码详解 我们来看一下WXML部分的代码： ```html <template name="template_test"> <button bindtap="test" style="margin-bottom:5px;" type="primary">test_{{name}}</button> </template> <view wx:for="{{list}}" data-index="{{index}}" bindtap="view_test"> <template is="template_test" data="{{item}}"> </template> </view> ``` 在这段代码中，定义了一个名为`template_test`的模板，模板中包含了一个`button`按钮，其文本内容为`test_{{name}}`，其中`{{name}}`是一个动态绑定的数据，会根据传递进来的参数而变化。`bindtap="test"`指定了一个点击事件，表示当用户点击这个按钮时，会触发名为`test`的方法。 接下来，我们使用`wx:for="{{list}}"`指令对列表`list`进行遍历，并为每个列表项传递相应的数据`data="{{item}}"`。值得注意的是，这里还使用了`data-index="{{index}}"`来为每个列表项绑定索引值。 #### JS逻辑代码分析 接下来是JS部分的关键代码： ```javascript const app = getApp() var Index; Page({ data: { list: [{ name: 'one' }, { name: 'two' }, { name: 'three' }, { name: 'four' }] }, onLoad: function (options) { app.globalData.list = this.data.list; }, view_test: function (e) { Index = e.currentTarget.dataset.index; }, test: function (e) { setTimeout(() => { console.log("This is the", Index); }, 500); } }) ``` 在这段代码中，我们首先定义了一个页面对象，其数据部分包含了`list`数组，其中每个元素都有一个`name`属性。`onLoad`方法用于初始化全局数据。 当用户点击列表项时，会触发`view_test`方法。在这个方法中，通过`e.currentTarget.dataset.index`获取到了当前列表项的索引值，并将其赋值给变量`Index`。 当用户点击`button`按钮时，会触发`test`方法。在这个方法中，我们通过`setTimeout`函数设置了500毫秒的延迟，以便等待DOM更新完成后再输出索引值。 #### 总结 通过上述示例，我们可以看到在微信小程序中利用template模板和`wx:for`指令结合`button`控件实现动态列表的高效渲染及交互是非常简单和直观的。这种方式不仅提高了代码的可维护性，还能有效地提升用户体验。对于更复杂的应用场景，我们还可以结合其他API和组件来扩展功能，使得整个应用更加丰富和强大。