微信小程序圆形图片小图标按钮

效果图

wxml代码

{{item.name}}

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.id
    wx.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;
}