uniapp导航栏搜索框,uniapp搜索功能
uniapp实现搜索栏的方法：使用方法占位符，代码为【输入类型=文本值= 占位符=点击输入搜索内容class= search-text maxlength= 10]。
单一应用程序开发（仿饿了么)开发课程：进入学习
本教程操作环境：windows7系统、uni-app2.5.1版本、thinkpad t480电脑。
推荐（免费）：uni-app开发教程
uniapp实现搜索栏的方法：
效果图：
完整代码：
模板
视角
view class=content1/view
view class=search-block
view class=search-ico-wapper
图像src=././static/崇智_ sous uo/崇智-icon-sous uo @ 3x。png class= search-ico mode= /image
/查看
输入类型=文本值= 占位符=点击输入搜索内容class= search-text maxlength= 10 focus/
view class=search-ico-wapper1
图像src=././static/崇智_ sous uo/崇智-icon-sys @ 3x。png class= search-ico-1 mode= /image
/查看
/查看
view class=shadow
/查看
/查看
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
}
}
/脚本
风格。内容1{
身高：150upx
}
页面{
背景色：# FFFFFF
}
/* 搜索框*/。搜索-ico，1000 .搜索-ico-1
宽度：40upx
高度：40upx
}。搜索-文本{
字体大小：14px
背景色：# FFFFFF
身高：60upx
宽度：480upx
}。搜索块{
显示器：flex
弯曲方向：行；
左填充：60upx
位置：相对；
top:-32 upx；
}。search-ico-wapper{
背景色：# FFFFFF
显示器：flex
伸缩方向：列；
对齐-内容：居中；
填充：0 upx 0 upx 0 upx 40 upx
边框-底部-左侧-半径：18px
边框-左上-半径：18px
}。search-ico-wapper1{
背景色：# FFFFFF
显示器：flex
伸缩方向：列；
对齐-内容：居中；
填充：0 upx 40 upx 0 upx 0 upx
边框-底部-右侧-半径：18px
border-top-right-radius:18px；
}。阴影
宽度：638upx
身高：60upx
边框半径：18px
-moz-box-shadow:0 0 10px # e6e6e 6；
-WebKit-box-shadow:0 0 10px # e6e6e 6；
box-shadow:0 0 10px # e6e6e 6；
位置：相对；
顶：-90 upx；
左：60upx
}
/风格相关免费学习推荐：编程视频
以上就是uniapp如何实现搜索栏的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。