uniapp에서 검색창을 구현하는 방법: 자리 표시자 메소드를 사용하세요. 코드는 [
본 튜토리얼의 운영 환경: Windows 7 시스템, uni-app 버전 2.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/chongzhi-icon-sousuo@3x.png" 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/chongzhi-icon-sys@3x.png" 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에서 검색창을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!