uniapp 按钮,uniapp 通知栏
Uni添加提示的实现方法：首先判断输入，获得焦点；然后通过接口采集数据，进行前端模拟处理；然后设置输入框的变化事件；最后，设置点击事件，实现搜索点击。
UNI-APP开发(仿饿)开发课程：进入学习
本教程运行环境：Windows7系统，Uni-App版本2.5.1。这个方法适用于所有品牌的电脑。
推荐(免费):uni-app开发教程
uniapp实现一个搜索加提示功能（含传参等）
先看代码，复制使用即可。我已经帮你考虑过使用v-for循环或者其他可能出现的问题。(这里建议你安装插件使用scss)你会看到以下效果。
模板
视图class=box
输入类型= text @ input= GetValue class= S-input :placeholder= placeholder @ focus= show value
！-判断输入获得焦点，背景给出数据-
view class= input list v-show= is value search list . length
view v-for= item in search list :key= item . id @ click= SetValue(item . title) class= listSon
{{item.title}}
/查看
/查看
/view/templatescript
导出默认值{
data() {
返回{
值： ，//搜索内容
占位符：请输入搜索内容，//提示
IsValue: false，//是否显示文本框？
搜索列表：[]
}
},
方法：{
ShowValue() {
this.isValue=！this . isvalue EIF(this . isvalue){//如果获得焦点
this.getList()
}否则{
//失去焦点并清除数据
}
},
GetList(value) {//这一步是获取数据。可以通过接口获取，在这里做前端仿真处理。
//没有数据的时候需要和后台协商通过默认的。
//axios.get(/getList？Value= value)。then(res={ //请求案例
//这个。SearchList=res.data.data
//})
如果(！值){
让arr=[{
id: 1，
标题：“我正在搜索信息1”
},
{
id: 2，
标题：“我正在搜索信息2”
},
{
id: 3，
标题：“我在搜索信息3”
},
{
id: 4，
标题：“我正在搜索信息4”
},
{
id: 5，
标题：“我正在搜索信息5”
},
]
这个。SearchList=arr} else {
this.getList()
}
},
getvalue(event){//改变输入框的事件
Console.log(当前输入 event.detail.value)
//如果有值，就获取它；如果没有，请留空
事件.细节.值？这个。Value=event.detail.value:这个。值=
事件.细节.值？this.getList(this。Value) : this.getList(this。值)
},
SetValue(value) {//点击事件搜索点击这个。
Console.log(搜索信息是值)
这个。value=value this . placeholder=value this搜索列表=[]
this.isValue=！This.isValue//获取数据做页面跳转操作，比如
//uni.navigateTo({
//url:./购物车/购物车
//})
}
},
onLoad() {}
}/scriptstyle lang=scss
$ max:100%；方框{
宽度：$ max
填充：10个30rpx//上下10左右30
身高：64rpx
显示器：flex
justify-content:居中；
对齐-项目：居中；
最小高度：32px
位置：相对；
背景：# 409EFF。s输入{
宽度：660rpx
背景：# f7f7f7
左填充：30rpx
边框半径：32rpx
}。输入列表{
位置：绝对；
宽度：690rpx
高度：自动；
最小高度：100rpx
top:74r px；
边框：1rpx solid # 409EFF
边框半径：5rpx
填充：10rpx。利斯特森
高度：50rpx
行高：50rpx
font-size:32 rpx；
文本缩进：1em
}。listSon:第n种类型(偶数){
背景：# f7f7f7
}
}
}/style附加的和可能有用的信息已被注释。
其他关于uniapp的问题或者不明白的事情可以用这种方法留言。我会尽快回复，帮你解决。
以上就是uniapp如何实现添加提示功能的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。