微信小程序中给button加入点击图标

有上述的9种，分别为：
success, success_no_circle, info, warn, waiting, cancel, download, search, clear

具体用法：
我们想写一个按钮的时候，通常是

<button bindtap="xx"></button>

假如说上面有一个输入框，而我们要想把这个按钮放到输入框里面，作为一个点击的按钮，怎么办呢？就要用到icon了。
把button改成icon和上面的input放到同一个view中就可以了。
如果view的class是.abcd，那icon的css样式与input同理，就改为.abcd icon{}就行了。

具体如下示例：
wxml代码：

<view class="search-container"><input type="text" bindinput="searchInputEvent" placeholder="输入书名搜索"></input><icon bindtap="searchClickEvent" type="search" size="20" />
</view>

wxss代码：

 .search-container {position: relative;display: flex;justify-content: center;align-items: center;background-color: #42bd56;color: #fff;height: 80rpx;padding: 10rpx 20rpx;z-index: 100;}.search-container input {background: #fff;color: #aaa;padding: 5px 80rpx 5px 10rpx;height: 40rpx;width: 100%;border-radius: 8rpx;}.search-container icon {position: absolute;z-index: 10;top: 50%;margin-top: -20rpx;right: 40rpx;}

效果图：

至于开头所说的图标样式，这里用的是type=“search”，所以是放大镜，你们根据需求改就好勒！

微信小程序中给button加入点击图标相关推荐

微信小程序中更改button的样式
Button按钮 <button class='getCodeView firstListLineStyle'disabled='{{disabled}}' </button> Bu ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
在微信小程序中怎么让一个页面的信息传递到另一个页面
首先需要在前台搭建好需要展示的那个页面.  <view class='nav'>输入个人信息</view> ...
关于微信小程序中时间预约的简单实现
关于微信小程序中时间预约的简单实现 1. js中定义获取日期函数.日期点击事件 2. 在data中定义数组等变量 3. onLoad调用函数并保存回data 4. wxml展示 5. 页面监控函数on ...
微信小程序中的vw和vh单位
微信小程序中的vw和vh单位 100vw代表手机宽度, 100vh代表手机高度. 实现代码: button{width: 50vw;}
微信小程序中的正则验证、手机号验证随笔
微信小程序中的正则验证.手机号验证随笔需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法 $ ...
Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
五分钟学会在微信小程序中使用 vantUI 组件库
前言我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
手把手教你开发微信小程序中的插件
继上次手把手教你实现微信小程序中的自定义组件已经有一段时间了(不了解的小伙伴建议去看看,因为插件很多内容跟组件相似),今年3月13日,小程序新增了小程序**「插件」功能,以及开发者工具新增「 ...

微信小程序中给button加入点击图标

微信小程序中给button加入点击图标相关推荐

最新文章

热门文章