Uniapp implémente la méthode de la barre de recherche : utilisez l'espace réservé de la méthode, le code est [
L'environnement d'exploitation de ce tutoriel : système Windows 7, version uni-app2.5.1, ordinateur thinkpad t480 est recommandé (. Gratuit) :
Tutoriel de développement d'uni-appComment implémenter la barre de recherche dans uniapp :
effet Image :
Code complet :
<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>Copier après la connexionRecommandations d'apprentissage gratuites associées :
Vidéo de programmation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!