本教程操作环境:windows7系统、uni-app2.5.1版本、thinkpad t480电脑。
推荐(免费):uni-app开发教程
uniapp实现搜索栏的方法:
效果图:
完整代码:
<template> <view> <view class="content1"></view> <view class="search-block"> <view class="search-ico-wapper"> <image src="../../static/chongzhi_sousuo/[email protected]" class="search-ico" mode=""></image> </view> <input type="text" value="" placeholder="点击输入搜索内容" class="search-text" maxlength="10" focus/> <view class="search-ico-wapper1"> <image src="../../static/chongzhi_sousuo/[email protected]" class="search-ico-1" mode=""></image> </view> </view> <view class="shadow"> </view> </view> </template> <script> export default { data() { return { } }, methods: { } } </script> <style> .content1{ height: 150upx; } page{ background-color: #FFFFFF; } /* 搜索框 */ .search-ico, .search-ico-1{ width: 40upx; height: 40upx; } .search-text{ font-size: 14px; background-color: #FFFFFF; height: 60upx; width: 480upx; } .search-block{ display: flex; flex-direction: row; padding-left: 60upx; position: relative; top: -32upx; } .search-ico-wapper{ background-color: #FFFFFF; display: flex; flex-direction:column; justify-content: center; padding: 0upx 0upx 0upx 40upx; border-bottom-left-radius:18px; border-top-left-radius: 18px; } .search-ico-wapper1{ background-color: #FFFFFF; display: flex; flex-direction:column; justify-content: center; padding: 0upx 40upx 0upx 0upx; border-bottom-right-radius:18px; border-top-right-radius: 18px; } .shadow{ width: 638upx; height: 60upx; border-radius:18px; -moz-box-shadow:0 0 10px #e6e6e6; -webkit-box-shadow:0 0 10px #e6e6e6; box-shadow:0 0 10px #e6e6e6; position: relative; top: -90upx; left: 60upx; } </style>
登录后复制
以上就是uniapp如何实现搜索栏的详细内容,更多请关注Work网其它相关文章!