uniapp在搜索栏上添加按钮
时间: 2023-10-10 10:13:11 浏览: 140
要在UniApp的搜索栏上添加按钮,你可以使用组件库中的`uni-icons`来实现。以下是一个示例代码:
```html
<template>
<view>
<input class="search-bar" type="text" placeholder="搜索内容" @focus="onFocus" @blur="onBlur" />
<view class="search-btn" @tap="onSearch">
<uni-icons type="search" size="20"></uni-icons>
</view>
</view>
</template>
<script>
export default {
methods: {
onFocus() {
// 输入框获取焦点时的操作
},
onBlur() {
// 输入框失去焦点时的操作
},
onSearch() {
// 点击搜索按钮时的操作
},
},
};
</script>
<style>
.search-bar {
width: 100%;
height: 40px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 20px;
margin-bottom: 10px;
}
.search-btn {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background-color: #ccc;
}
</style>
```
以上代码中,我们使用`input`标签创建了一个搜索框,并使用`uni-icons`组件添加了一个搜索按钮。你可以根据需要自定义搜索框和按钮的样式,并在对应的方法中实现相应的功能。
阅读全文