我有个瀑布流页面wxml如下
<view class='content'> <view class='left'> <block wx:for="{{leftList}}" wx:key="index"> <image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}' bindtap="preview" data-url="{{item.Cover}}"></image> </block> </view> <view class='right'> <block wx:for="{{rightList}}" wx:key="index"> <image class='pic' style='height:{{item.CoverHeight}}' src='{{item.Cover}}' bindtap="preview" data-url="{{item.Cover}}" ></image> </block> </view> </view>
JS中 相关函数如下
// pages/goods/goods.js Page({ /** * 页面的初始数据 */ data: { noramalData: [{ "Cover": "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png", "CoverHeight": 467, "CoverWidth": 350 }, { "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg", "CoverHeight": 871, "CoverWidth": 672 },{ "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg", "CoverHeight": 467, "CoverWidth": 350 }, { "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg", "CoverHeight": 871, "CoverWidth": 672 },{ "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg", "CoverHeight": 467, "CoverWidth": 350 }, { "Cover": "cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg", "CoverHeight": 2000, "CoverWidth": 1500 }, ], imgarray:[ "http://dashus.oss-cn-shenzhen.aliyuncs.com/DefaultImage/Game/20190306144842/1001.png", 'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chegnshu2.jpg', 'cloud://acturis-3fcf85.6163-acturis-3fcf85/zao_chengshu.jpg', 'cloud://acturis-3fcf85.6163-acturis-3fcf85/pic_1.jpg', 'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_3.jpg', 'cloud://acturis-3fcf85.6163-acturis-3fcf85/summer_small.jpg', ], leftList: [], rightList: [], leftHight: 0, rightHight: 0 }, /** * 生命周期函数--监听页面加载 */ //以本地数据为例,实际开发中数据整理以及加载更多等实现逻辑可根据实际需求进行实现 onLoad: function(options) { var that = this; var allData = that.data.noramalData; //定义两个临时的变量来记录左右两栏的高度,避免频繁调用setData方法 var leftH = that.data.leftHight; var rightH = that.data.rightHight; var leftData = []; var rightData = []; for (let i = 0; i < allData.length; i++) { var currentItemHeight = parseInt(Math.round(allData[i].CoverHeight * 345 / allData[i].CoverWidth)); allData[i].CoverHeight = currentItemHeight + "rpx";//因为xml文件中直接引用的该值作为高度,所以添加对应单位 if (leftH == rightH || leftH < rightH) {//判断左右两侧当前的累计高度,来确定item应该放置在左边还是右边 leftData.push(allData[i]); leftH += currentItemHeight; } else { rightData.push(allData[i]); rightH += currentItemHeight; } } //更新左右两栏的数据以及累计高度 that.setData({ leftHight: leftH, rightHight: rightH, leftList: leftData, rightList: rightData }) }, // }) /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, //预览图片,放大预览 preview(event) { console.log(event) let currentUrl = event.currentTarget.dataset.url console.log('the currentUrl you click is the:') console.log(currentUrl) wx.previewImage({ current: currentUrl, // 当前显示图片的http链接 urls: this.data.imgarray // 需要预览的图片http链接列表 }) } })
通过wxml中设置 data- 关键字 然后传入 相关参数(我这里是穿入item 的Cover 就是url地址)
这样就能在 bindtap里的
event.currentTarget.dataset.url
通过这个方法
取到瀑布流中点击的图片的url地址的值
这样就完成了从wxml往Js传值