首页
视频
资源
登录
小可爱
什么时候才能领悟,取之越多失之越多
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
ASP.NET
16篇
JS
1篇
.NET
23篇
英语
4篇
redis
4篇
随笔
30篇
EF
3篇
前端
53篇
.net core
25篇
python
8篇
版本控制
1篇
java
2篇
nginx
2篇
docker
6篇
后端
5篇
更多
mysql
8篇
数据库
15篇
微服务
4篇
移动开发
7篇
架构
6篇
linux
2篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
uni-app搜索框,搜索栏,uni-app search-bar
15051
人阅读
2022/2/23 17:37
总访问:
879651
评论:
0
收藏:
0
手机
分类:
移动开发
官方例子: ![](https://img.tnblog.net/arcimg/xiuxin/ec9a6f3102944e65a7894aacd1866f0c.png) 代码如下: ``` <template> <view> <uni-card :is-shadow="false" is-full> <text class="uni-h6">搜索栏组件,通常用于搜索商品、文章等。</text> </uni-card> <uni-section title="基本用法" type="line"> <uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input" @cancel="cancel" @clear="clear"> </uni-search-bar> <view class="search-result"> <text class="search-result-text">当前输入为:{{ searchValue }}</text> </view> </uni-section> <uni-section title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line"> <uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" /> </uni-section> <uni-section title="自定义icon" type="line"> <uni-search-bar placeholder="自定义searchIcon" @confirm="search" @cancel="cancel" cancel-text="cancel"> <uni-icons slot="searchIcon" color="#999999" size="18" type="home" /> </uni-search-bar> </uni-section> <uni-section title="控制清除/取消按钮" subTitle="使用 clearButton 属性设置清除按钮" type="line"> <uni-search-bar radius="5" placeholder="一直显示" clearButton="always" cancelButton="always" @confirm="search" @cancel="cancel" /> <uni-search-bar class="uni-mt-10" radius="5" placeholder="自动显示隐藏" clearButton="auto" cancelButton="none" @confirm="search" /> <uni-search-bar class="uni-mt-10" radius="100" placeholder="一直不显示" clearButton="none" cancelButton="none" @confirm="search" /> </uni-section> </view> </template> <script> export default { data() { return { searchValue: '123123' } }, methods: { search(res) { uni.showToast({ title: '搜索:' + res.value, icon: 'none' }) }, input(res) { console.log('----input:', res) }, clear(res) { uni.showToast({ title: 'clear事件,清除值为:' + res.value, icon: 'none' }) }, blur(res) { uni.showToast({ title: 'blur事件,输入值为:' + res.value, icon: 'none' }) }, focus(e) { uni.showToast({ title: 'focus事件,输出值为:' + e.value, icon: 'none' }) }, cancel(res) { uni.showToast({ title: '点击取消,输入值为:' + res.value, icon: 'none' }) } }, onBackPress() { // #ifdef APP-PLUS plus.key.hideSoftKeybord(); // #endif } } </script> <style lang="scss"> .search-result { padding-top: 10px; padding-bottom: 20px; text-align: center; } .search-result-text { text-align: center; font-size: 14px; color:#666; } .example-body { /* #ifndef APP-NVUE */ display: block; /* #endif */ padding: 0px; } .uni-mt-10 { margin-top: 10px; } </style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}