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

效果图

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;
}

微信小程序圆形图片小图标按钮相关推荐

微信小程序——圆形图片image控件、两个字和三个字对齐
一.image控件中显示圆形图片首先来个效果图: 然后我们来看看源码: wxml中: <image class="image_radius" src="../im ...
微信小程序裁剪图片成圆形
代码地址如下: http://www.demodashi.com/demo/14453.html 前言最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在git ...
微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户电脑一台电脑安装微信开发者工具软 ...
微信小程序使用base64字体图标（生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片下面就介绍一下如何 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
微信小程序如何隐藏右上角分享按钮
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序右上角有个转发按钮可以分享转发当前页面到群或者微信好友. 右上角胶囊按钮>转发转发可以配置转发是路径参 ...
php 微信创建客服,如何给微信小程序内添加客服按钮
这次给大家带来如何给微信小程序内添加客服按钮,给微信小程序内添加客服按钮的注意事项有哪些,下面就是实战案例,一起来看一下. 1. 普通客服按钮添加客服-联系我们 2. 悬浮客服按钮添加,图片自定义大 ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
微信小程序-如何使用icon图标
原微信小程序使用字体图标 2017年07月03日 19:29:09 阅读数:24209 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图 ...
微信小程序预览服务器图片,微信小程序实现图片选择并预览功能
本文实例为大家分享了微信小程序实现图片选择并预览的具体代码,供大家参考,具体内容如下 (一).功能说明做的是一个意见反馈,用户发表意见和上传图片,限制了最多只能上传三张图片. 其他要点:textar ...

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

效果图

wxml代码

js代码

wxss代码

微信小程序圆形图片小图标按钮相关推荐

最新文章

热门文章