微信小程序实现列表渲染及其点击事件
2020-08-01 12:54
936 查看
微信小程序实现列表渲染及其点击事件
列表渲染及其点击事件的需求:
- 列表渲染的实现:
- 列表渲染很简单,一种是从js/数据库中导出imglist到wxml中wx:for="{{imgList}}"即可完成渲染,另一种就是我下面的方法,用src=“https://xxx/xxx/{{index+1}}.jpeg"亦可,只不过得在js的data里面加上对图片数目进行初始定义,这里举例采用腾讯云云存储,存入图片之前命名为"1” “2” “3”…这样就可以对图片进行递增渲染{{index+1}}
- 点击事件的实现:
- 对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>
这里的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链接列表 }) } })
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; }
相关文章推荐
- 微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染
- 微信小程序项目总结:for循环,绑定点击事件,二维数组列表渲染 ...
- 微信小程序实现给循环列表点击添加类(单项和多项)
- 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
- 快速上手微信小程序(适合无前端开发经验者)(一):四大文件、数据绑定、列表渲染、条件渲染、事件
- 微信小程序例子——实现button点击事件改变数据值
- 微信小程序 循环列表添加点击事件和样式
- 微信小程序实现点击图片旋转180度并且弹出下拉列表
- 微信小程序循环列表添加默认事件,默认样式,点击后修改样式
- 微信小程序实现给循环列表添加点击样式实例
- 微信小程序实现点击图片旋转180度并且弹出下拉列表
- 微信小程序swiper实现轮播图,可触发点击事件
- 微信小程序实现给循环列表点击添加类(单项和多项)
- 微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法
- 微信小程序实现给循环列表添加点击样式
- 微信小程序实现给循环列表添加点击样式实例
- 微信小程序初体验-列表的上拉加载和下拉刷新的实现
- Android 实现微信,QQ的程序前后台切换:back键切换后台;点击通知栏恢复前台。
- 微信小程序开发-点击事件,获取元素id
- Android实现淘宝体验的商品列表排序分类点击事件