效果图
wxml代码
<view class="image"><view class="txt" wx:for="{{imgs1}}" wx:key="{{index}}"><image class="im" src="{{item.url}}" bindtap="hao" data-id="{{index}}"></image><view class="t">{{item.name}}</view></view></view>
js代码
1.data里
data: {imgs1:[{ url: '../images1/button/1.jpg', name: '珠江夜游',id:"0"},{ url: '../images1/button/2.jpg', name: '动物园',id:"1"},{ url: '../images1/button/3.jpg', name: '白云山',id:"2"},{ url: '../images1/button/4.jpg', name: '黄花岗',id:"3"},{ url: '../images1/button/5.jpg', name: '长隆乐园',id:"4"},{ url: '../images1/button/6.jpg', name: '广州塔' ,id:"5"},],
2.按钮实现页面跳转
hao: function (e) {console.log(e.currentTarget.dataset.id)const guan = e.currentTarget.dataset.idwx.navigateTo({url: '../detail/detail?ying=' + guan,})},
wxss代码
.image{display:flex;flex-wrap: wrap;}.im{margin-left: 80rpx;margin-top: 35rpx;height: 145rpx;width: 145rpx;border-radius:50%;}.txt{width:230rpx;text-align: center}.t{margin-left: 80rpx;}
