微信小程序实现列表渲染及其点击事件_小程序列表当个事件

列表渲染及其点击事件的需求：

1. 列表渲染的实现：

• 列表渲染很简单，一种是从js/数据库中导出imglist到wxml中wx:for="{{imgList}}"即可完成渲染，另一种就是我下面的方法，用src=“https://xxx/xxx/{{index+1}}.jpeg"亦可，只不过得在js的data里面加上对图片数目进行初始定义，这里举例采用腾讯云云存储，存入图片之前命名为"1” “2” “3”…这样就可以对图片进行递增渲染{{index+1}}

2. 点击事件的实现：

• 对imglist在image组件中添加属性data-id="{{index+1}}“对每个图片进行标记为"1” “2” “3”…然后在点击事件函数（举例：preview()函数）var id = e.currentTarget.dataset.id;定义并获取此时的id，每一个id对应一张图片，传递参数id即可对图片进行对应批量处理，代码如下：

列表渲染

效果示意图：

代码：

wxml

<view class="weui-tab__content">
	<image class="imgList" wx:for="{{imgList}}" wx:key="key" src="https://xxx/xxx/{{index+1}}.jpeg" data-id="{{index+1}}" bindtap="preview"></image>
</view>
1
2
3

这里的index是从0开始，逐个加1，imglist是循环的个数

点击事件

效果示意图：

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgList: [1,1,1,1,1,1,1,1,1,1,1,12,1,1,1,1,1,1,1,1,1,1,1,24]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {

  },
  preview: function (e) {
    var id = e.currentTarget.dataset.id;
    this.previewImg(id)
  },
  previewImg: function (index) {
  wx.previewImage({
    urls: ['https://xxx/xxx/' + index + '.jpeg'] // 需要预览的图片http链接列表
  })
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

wxss

page {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
}
.weui-tab__content{
  margin-top: 20rpx;
  text-align: center;
}
.imgList{
  height: 170rpx;
  width: 170rpx;
  border:1px solid gainsboro;
  margin-left: 6rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

---

总结：

data初始定义个数组对应各张数组元素(文字、图片、按钮…)，用wx:for遍历，同时用data-xx属性记录好index下标，bindtap只需要写一个处理函数就好， e.target.dataset.xx得到下标，每一个下标拿到每一个参数即可完成。很多列表渲染(list、group…)及其点击事件都是用这同一种方法解决的。