说起小程序的图片预览,不仅心力交瘁…其中不仅有我不认真阅读文档的错误,还有一些未知因素(呵呵)
新版小程序,增加了wx.previewImage
,这是个API,很NB。
先看看 小程序官方文档 中是怎么说的:
wx.previewImage({
current: url,
urls: Array[]
})
准确的说:API里有两个值:urls里是个数组——里面放所有的图片http-url;current里面放上面这个urls数组里的其一图片——当前图片!
记住,urls里放了所有的http-url !
这么问吧,你有见过本地的图片被加上http协议吗?或者本地图片被叫做url?(太过真实…)
我在所做的小程序的一个页面的wxml中写下了如下代码:
<view wx:for="{{imgArr1}}">、
<!-- 下面为什么可以写item,因为上面的imgArr默认自带了一个“指向每个imgArr中元素的指针”,为item,所以可以把它作为每个src的数据绑定值 -->
<image class="aa1-2" src="{{item}}" data-index="{{index}}" bindtap="viewMoviePostImg"></image>
</view>
data- :自定义传值
bindtap :不可向上传递的点击事件
这就不再多说,需要注意的是这个src:src="{{item}}",明显的从data中获取“动态值”的用例! (如果js文件中写了.http,就可以从服务器获取值了)
好,我现在js文件里是这么写的:
data:{
imgArr1:[
"http://cjxnsb.cn/mxc/UCgzs/img/mxc4.png",
"http://cjxnsb.cn/mxc/UCgzs/img/mxc2.png"
]
},
viewMoviePostImg: function (e) {
var index = e.currentTarget.dataset.index;
var imgArr1=this.data.imgArr1;
wx.previewImage({
current: imgArr1[index],
urls: imgArr1
})
}
第8行var index = e.currentTarget.dataset.index;
可有些说道:获取当前点击事件对应元素(或说:组件)的data中数组元素的index!
停!你怎么知道是数组元素,其实这句话显式的表达的话,在开发者工具下面,有一个APPData的栏,当你点击对应事件时,会发现那里面传进去了一个当前元素(e)的currentTarget,这里面有proty、timestart、dataset等属性,其中,点开dataset时,你会发现里面有好多图片路径,以及对应的下标。对,这就是一个数组!
还有最重要的一点:不能通过e.事件来获取图片< image >组件的src值! 也就是说,想要这么做,只能通过把src拿到data中的方法。