色就是色欧美setu,欧美aaaaaa午夜精品,re热99这里只有精品

微信小程序使用uni-app實(shí)現(xiàn)首頁搜索框?qū)Ш綑诠δ茉斀?/h1>

更新時間：2022年10月25日 16:19:18 作者：小余努力搬磚

這篇文章主要介紹了微信小程序使用uni-app實(shí)現(xiàn)首頁搜索框?qū)Ш綑诠δ埽瑄ni-app?是一個使用?Vue.js?(opens?new?window)開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序

前言

首頁都會提供一個搜索框給到客戶，讓客戶自己去搜索自己想要的內(nèi)容，這里就需要導(dǎo)航欄，來實(shí)現(xiàn)搜索頁面的跳轉(zhuǎn)，效果如下

App、H5效果

小程序效果

一、兼容APP與H5的方式

在常見titleNView配置代碼示例中可以看到基本樣式的代碼如下

{
	"pages": [{
			"path": "pages/index/index", //首頁
			"style": {
				"app-plus": {
					"titleNView": false //禁用原生導(dǎo)航欄
				}
			}
		}, {
			"path": "pages/log/log", //日志頁面
			"style": {
				"app-plus": {
					"bounce": "none", //關(guān)閉窗口回彈效果
					"titleNView": {
						"buttons": [ //原生標(biāo)題欄按鈕配置,
							{
								"text": "分享" //原生標(biāo)題欄增加分享按鈕，點(diǎn)擊事件可通過頁面的 onNavigationBarButtonTap 函數(shù)進(jìn)行監(jiān)聽
							}
						],
						"backButton": { //自定義 backButton
							"background": "#00FF00"
						}
					}
				}
			}
		}, {
			"path": "pages/detail/detail", //詳情頁面
			"style": {
				"navigationBarTitleText": "詳情",
				"app-plus": {
					"titleNView": {
						"type": "transparent"http://透明漸變導(dǎo)航欄 App-nvue 2.4.4+ 支持
					}
				}
			}
		}, {
			"path": "pages/search/search", //搜索頁面
			"style": {
				"app-plus": {
					"titleNView": {
						"type": "transparent",//透明漸變導(dǎo)航欄 App-nvue 2.4.4+ 支持
						"searchInput": {
							"backgroundColor": "#fff",
							"borderRadius": "6px", //輸入框圓角
							"placeholder": "請輸入搜索內(nèi)容",
							"disabled": true //disable時點(diǎn)擊輸入框不置焦，可以跳到新頁面搜索
						}
					}
				}
			}
		}
		...
	]
}

我們并不需要所有的內(nèi)容，本次我將介紹的是，"buttons"，"searchInput"的組合使用，這里的buttons其實(shí)是我的導(dǎo)航欄左右的兩個圖片，可以配合圖標(biāo)實(shí)現(xiàn)想要的功能，searchInput就是中間的搜索框

需要在pages.json中配置，可在button中添加，不過需要注意的是，不管添加文字，矢量圖片，默認(rèn)都是右浮動，可以把其中一個改成左浮動，這里我使用的是阿里巴巴矢量圖庫的圖片，下載文件，引入即可有需要的小伙伴我可以免費(fèi)提供一個文件夾。

配置代碼如下

"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "小余努力搬磚",
				"app-plus": {
					"titleNView": {
						"searchInput": {
							"backgroundColor": "#f4f4f4",
							"borderRadius": "6px", 
							"placeholder": "請輸入搜索內(nèi)容",
							"disabled": true 
						},
							"buttons": [
						{
							"fontSrc": "/static/font/iconfont.ttf",//矢量圖片引入路徑
							"float": "left",
							"text": "\ue67a",	//引入圖片一定要帶u			
							"fontSize": "24px",//大小
							"color": "#666666"
						},
						{	
							"float": "right",
							"text":"\ue661",
							"fontSrc": "/static/font/iconfont.ttf",
							"fontSize": "24px",
							"color": "#666666"
						}
										]
}}}

為了達(dá)到跳轉(zhuǎn)的效果，我要在頁面同級創(chuàng)建文件夾，為搜索頁面，我們要主頁使用頁面生命周期onNavigationBarSearchInputClicked（此次文件夾需要在pages.json中注冊）

來跳轉(zhuǎn)到我們先要的頁面

onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		}

二、兼容小程序

需要與pages同級創(chuàng)建一個components文件夾，在此文件夾下，不需要在用import引入，就可以注冊，創(chuàng)建一個如下的插槽子文件夾，帶同名目錄。在components中的文件都不需要在pages.json注冊。（這里實(shí)現(xiàn)的主要方式，是通過自己寫的樣式，來展現(xiàn)出一個搜索框）

<template>
	<view class='slot'>
		<slot name='left'></slot>
		<slot name='center'></slot>
		<slot name='right'></slot>
	</view>
</template>
<script>
	export default {
		name:"search-slot",
		data() {
			return {
			};
		}
	}
</script>
<style scoped>
.slot{
	width: 750rpx;
	display: flex;
}
</style>

在首頁中引入插槽（不會或者忘記的，可以去學(xué)習(xí)博主的一學(xué)就會的插槽教學(xué)），其中的圖片都是引入的阿里巴巴矢量圖片，圖片是我提前準(zhǔn)備好的，有想要的小伙伴，私聊我。如下就是我提前準(zhǔn)備好的，只要用class就能引入

<search-slot class='flex'>
	<view class="left" slot='left'>
		<text class="iconfont icon-xiaoxi"></text>
	</view>
	<view class="center" slot='center'>
		<text class="iconfont icon-sousuo" @click="search"></text>
	</view>
	<view class="right" slot='right'>
		<text class="iconfont icon-richscan_icon"></text>
	</view>
</search-slot>

這里也同樣需要點(diǎn)擊搜索導(dǎo)航跳轉(zhuǎn)到搜索頁面（此次文件夾需要在pages.json中注冊），是通過@click綁定事件完成的，路徑還是同樣的方法（創(chuàng)建一個專屬的搜索頁面）

methods: {
search(){
	uni.navigateTo({
	url:'../search/search'
})
}}

css樣式代碼

<style>
.flex {
		display: flex;
		height: 88rpx;
		line-height: 88rpx;
		align-items: center;
	}
	.left {
		width: 44rpx;
		flex: 0 0 44px;
		align-items: center;
		text-align: center;
	}
	.center {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		background-color: #eee;
		text-align: center;
		color: #ccc;
	}
	.right {
		width: 44rpx;
		flex: 0 0 44px;
		align-items: center;
		text-align: center;
	}
</style>

三、實(shí)現(xiàn)同時兼容

通過以上代碼，已經(jīng)實(shí)現(xiàn)了在app、h5、小程序,實(shí)現(xiàn)搜索框?qū)Ш綑冢侨绻胍瑫r滿足app、h5、小程序，就需要對此作出一個區(qū)域性的判斷。

如果沒有按兼容性顯示，同時配置如上的兩個搜索框?qū)Ш綑?，在app、h5就會出現(xiàn)兩個搜索框，因?yàn)樗鼈兗嫒菪〕绦虻呐渲?/p>

但是小程序只有一個，因?yàn)樾〕绦虿患嫒菰趐ages.json中配置的搜索框

這時候不用緊張，我們還記得媒體查詢嗎，這里的方式，和媒體查詢幾乎是一個意思，在特定的環(huán)境使用特定的樣式，我們這里通過官網(wǎng)文檔可以找到條件編譯

使用很簡單，只要將代碼包裹進(jìn)條件中即可，我們這里只要將小程序的包裹進(jìn)，只在微信小程序中編譯的條件中即可

#ifdef MP
需條件編譯的代碼
#endif

代碼如下

把配置在首頁的小程序的導(dǎo)航欄包裹?。ㄐ〕绦虿患嫒菰趐ages.json中的配置，這里就不用在意是否需要條件編譯）這樣，小程序的搜索框?qū)Ш讲粫赼pp、h5出現(xiàn)了。從而實(shí)現(xiàn)了同時兼容的效果。

	<!--#ifdef MP -->
		<search-slot class='flex'>
			<view class="left" slot='left'>
				<text class="iconfont icon-xiaoxi"></text>
			</view>
			<view class="center" slot='center'>
				<text class="iconfont icon-sousuo" @click="search"></text>
			</view>
			<view class="right" slot='right'>
				<text class="iconfont icon-richscan_icon"></text>
			</view>
		</search-slot>
	<!--#endif-->

到此這篇關(guān)于微信小程序使用uni-app實(shí)現(xiàn)首頁搜索框?qū)Ш綑诠δ茉斀獾奈恼戮徒榻B到這了,更多相關(guān)小程序搜索框?qū)Ш綑趦?nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: