您的位置:首页 > 移动开发 > 微信开发

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

2020-08-01 12:54 936 查看

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

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

  1. 列表渲染的实现:
  • 列表渲染很简单,一种是从js/数据库中导出imglist到wxml中wx:for="{{imgList}}"即可完成渲染,另一种就是我下面的方法,用src=“https://xxx/xxx/{{index+1}}.jpeg"亦可,只不过得在js的data里面加上对图片数目进行初始定义,这里举例采用腾讯云云存储,存入图片之前命名为"1” “2” “3”…这样就可以对图片进行递增渲染{{index+1}}
  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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐