1、微信小程序For循环写法:
<view wx:for="{{数组}}">
<view>取值{{item.名字}}</view>
<image src="{{item.imgUrl}}" bindtap="goDetails" data-productid="{{item}}"/></view>2、绑定点击事件,定义传参值:
<image src="{{item.imgUrl}}" bindtap="goDetails" data-productid="{{item}}"/>3、点击事件方法:传递参数的时候,数组和对象处理方式相同,注意通过提供的JSON.stingify()方法,将对象转换成字符串后传递,如果传的字符串就直接传
如果传的参数过长,需要在加两个方法
encodeURIComponent(obj) 跳转url时的转换方法
decodeURIComponent(options.obj) 页面接收参数页面的转换方法
goDetails(e){
var details = e.currentTarget.dataset.productid;
wx.navigateTo({
url: '/page/details/details?details=' + JSON.stringify(details)
// url: '/pages/details/details?details=' + encodeURIComponent(JSON.stringify(details)) //参数过长的写法
},4、在跳转到的页面接收参数:在onLoad函数中获取,注意将字符串通过JSON.parse()转换成对象,details即为上个js中传递的key
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
var details = JSON.parse(options.details) //将数据转换为对象
//var details = JSON.parse(decodeURIComponent(options.details)) //接收的参数过长的写法
var img = details.imgUrl
this.imgList = img.split(",") //将图片切割转换为数组 this.setData({
detailsList: details
})
},5、点击图片预览
//图片点击事件
imgYu () {
//图片预览
wx.previewImage({
urls: this.imgList, //需要预览的图片http链接列表,注意是数组
current: '', // 当前显示图片的http链接,默认是第一个
})
},