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

最新推荐文章于 2023-07-20 20:37:15 发布

小飞猪Jay

最新推荐文章于 2023-07-20 20:37:15 发布

阅读量6.7k

点赞数 1

分类专栏：微信开发文章标签：微信小程序 icon

本文链接：https://blog.csdn.net/qq_43504141/article/details/124271802

版权

微信开发专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在微信小程序中将按钮作为输入框内的图标使用，通过修改WXML和WXSS代码，展示了一个搜索框内集成搜索图标按钮的例子。通过设置icon的type属性为'search'，实现了放大镜图标。示例代码详细展示了样式布局，帮助理解组件嵌套和定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
有上述的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;
  }