微信小程序?qū)崿F(xiàn)頂部搜索框
更新時(shí)間：2022年05月22日 09:35:44 作者：瑾！
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)頂部搜索框的具體代碼，供大家參考，具體內(nèi)容如下
這是一個(gè)最簡(jiǎn)單的頂部搜索框，代碼如下
wxml
<view> ? ? ?<view> ? ? ? ? <view class="weui-search-bar"> ? ? ? ? ? ? <view class="weui-search-bar__form"> ? ? ? ? ? ? <!-- 搜索框 --> ? ? ? ? ? ? ? ? <view class="weui-search-bar__box"> ? ? ? ? ? ? ? ? ? ? <icon class="weui-icon-search_in-box" type="search" size="14"></icon> ? ? ? ? ? ? ? ? ? ? <input type="text" class="weui-search-bar__input" placeholder="請(qǐng)輸入搜索內(nèi)容"/> ? ? ? ? ? ? ? ? </view> ? ? ? ? ? ? </view> ? ? ? ? ? ? <!-- 搜索按鈕,調(diào)用搜索查詢方法 --> ? ? ? ? ? ? <view class="weui-search-bar__cancel-btn" bindtap='方法名a'>搜索</view> ? ? ? ? </view> ? ? </view> </view>
wxss
.weui-search-bar {
? position: relative;
? padding: 8px 10px;
? display: -webkit-box;
? display: -webkit-flex;
? display: flex;
? box-sizing: border-box;
? background-color: #EFEFF4;
? border-top: 1rpx solid #D7D6DC;
? border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
? position: absolute;
? left: 10px;
? top: 7px;
}
.weui-search-bar__form {
? position: relative;
? -webkit-box-flex: 1;
? -webkit-flex: auto;
? ? ? ? ? flex: auto;
? border-radius: 5px;
? background: #FFFFFF;
? border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
? position: relative;
? padding-left: 30px;
? padding-right: 30px;
? width: 100%;
? box-sizing: border-box;
? z-index: 1;
}
.weui-search-bar__input {
? height: 28px;
? line-height: 28px;
? font-size: 14px;
}
.weui-search-bar__cancel-btn {
? margin-left: 10px;
? line-height: 28px;
? color: #09BB07;
? white-space: nowrap;
}js
Page({
? /**
? ?* 頁面的初始數(shù)據(jù),可以為空
? ?*/
? data: {
?
? },
? // 查詢搜索的接口方法
? a: function () {
? ?
? }
})那么最簡(jiǎn)單的學(xué)會(huì)了 進(jìn)階版的呢？
這是一個(gè)復(fù)雜點(diǎn)的搜索框樣式：初始搜索框無法編輯和輸入，點(diǎn)擊搜索框使搜索框進(jìn)入可編輯狀態(tài)（在同一個(gè)頁面完成），在搜索框內(nèi)填入要搜索的內(nèi)容
wxml
<view>
? ? ?<view>
? ? ? ? <view class="weui-search-bar">
? ? ? ? ? ? <view class="weui-search-bar__form">
? ? ? ? ? ? <!-- 最初始時(shí)的搜索框 -->
? ? ? ? ? ? ? ? <view class="weui-search-bar__box">
? ? ? ? ? ? ? ? ? ? <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
? ? ? ? ? ? ? ? ? ? <input type="text" class="weui-search-bar__input" placeholder="搜索"/>
? ? ? ? ? ? ? ? </view>
? ? ? ? ? ? ? ? <!-- 可編輯時(shí)的搜索框 -->
? ? ? ? ? ? ? ? <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
? ? ? ? ? ? ? ? ? ? <icon class="weui-icon-search" type="search" size="14"></icon>
? ? ? ? ? ? ? ? ? ? <view class="weui-search-bar__text">搜索</view>
? ? ? ? ? ? ? ? </label>
? ? ? ? ? ? </view>
? ? ? ? ? ? <!-- 取消搜索 -->
? ? ? ? ? ? <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
? ? ? ? </view>
? ? </view>
</view>wxss
.weui-search-bar {
? position: relative;
? padding: 8px 10px;
? display: -webkit-box;
? display: -webkit-flex;
? display: flex;
? box-sizing: border-box;
? background-color: #EFEFF4;
? border-top: 1rpx solid #D7D6DC;
? border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search {
? margin-right: 4px;
? font-size: inherit;
}
.weui-icon-search_in-box {
? position: absolute;
? left: 10px;
? top: 7px;
}
.weui-search-bar__text {
? display: inline-block;
? font-size: 16px;
}
.weui-search-bar__form {
? position: relative;
? -webkit-box-flex: 1;
? -webkit-flex: auto;
? ? ? ? ? flex: auto;
? border-radius: 5px;
? background: #FFFFFF;
? border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
? position: relative;
? padding-left: 30px;
? padding-right: 30px;
? width: 100%;
? box-sizing: border-box;
? z-index: 1;
}
.weui-search-bar__input {
? height: 28px;
? line-height: 28px;
? font-size: 14px;
}
.weui-search-bar__label {
? position: absolute;
? top: 0;
? right: 0;
? bottom: 0;
? left: 0;
? z-index: 2;
? border-radius: 3px;
? text-align: center;
? color: #9B9B9B;
? background: #FFFFFF;
? line-height: 28px;
}
.weui-search-bar__cancel-btn {
? margin-left: 10px;
? line-height: 28px;
? color: #09BB07;
? white-space: nowrap;
}js
Page({
? // 頁面的初始數(shù)據(jù)
? data: {
? ? inputShowed: false, ?//初始文本框不顯示內(nèi)容
? },
? // 使文本框進(jìn)入可編輯狀態(tài)
? showInput: function () {
? ? this.setData({
? ? ? inputShowed: true ? //設(shè)置文本框可以輸入內(nèi)容
? ? });
? },
? // 取消搜索
? hideInput: function () {
? ? this.setData({
? ? ? inputShowed: false
? ? });
? }
});進(jìn)階版的也完成了，最后，我想到了京東的點(diǎn)擊搜索跳轉(zhuǎn)一個(gè)頁面，然后才可以編輯
主頁代碼如下
wxml
<view class='page_row' bindtap="suo"> ? ? <view class="search"> ? ? ? <view class="df search_arr"> ? ? ? ? <icon class="searchcion" size='16' type='search'></icon> ? ? ? ? <input class="sousuo" disabled placeholder="搜索" bindtap='search'/> ? ? ? </view> ? ? </view> </view>
wxss
.search{
? width: 98%;
}
.search_arr {
? border: 1px solid #d0d0d0;
? border-radius: 10rpx;
? margin-left: 20rpx;
}
.search_arr input{
? margin-left: 60rpx;
? height: 60rpx;
? border-radius: 5px;
}
.sousuo {
? padding-left: 38%;
? width: 15%;
? line-height: 150%;
? text-align: center;
}
.page_row{
? display: flex;
? flex-direction: row
}
.searchcion {
? margin: 10rpx 10rpx 10rpx 10rpx;
? position: absolute;
? margin-left:38%;
? z-index: 2;
? width: 15px;
? height: 15px;
? text-align: center;
?}js
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
?
? },
? // 跳轉(zhuǎn)到搜索頁面
? search: function () {
? ? wx.navigateTo({
? ? ? url: '../search/search'
? ? })
? }
})搜索頁面基礎(chǔ)代碼如下：
wxml
<view> ? ? ?<view> ? ? ? ? <view class="weui-search-bar"> ? ? ? ? ? ? <view class="weui-search-bar__form"> ? ? ? ? ? ? <!-- 搜索框 --> ? ? ? ? ? ? ? ? <view class="weui-search-bar__box"> ? ? ? ? ? ? ? ? ? ? <icon class="weui-icon-search_in-box" type="search" size="14"></icon> ? ? ? ? ? ? ? ? ? ? <input type="text" class="weui-search-bar__input" placeholder="請(qǐng)輸入搜索內(nèi)容"/> ? ? ? ? ? ? ? ? </view> ? ? ? ? ? ? </view> ? ? ? ? ? ? <!-- 取消搜索 --> ? ? ? ? ? ? <view class="weui-search-bar__cancel-btn" bindtap='hideInput'>取消</view> ? ? ? ? </view> ? ? </view> </view>
wxss
.weui-search-bar {
? position: relative;
? padding: 8px 10px;
? display: -webkit-box;
? display: -webkit-flex;
? display: flex;
? box-sizing: border-box;
? background-color: #EFEFF4;
? border-top: 1rpx solid #D7D6DC;
? border-bottom: 1rpx solid #D7D6DC;
}
.weui-icon-search_in-box {
? position: absolute;
? left: 10px;
? top: 7px;
}
.weui-search-bar__form {
? position: relative;
? -webkit-box-flex: 1;
? -webkit-flex: auto;
? ? ? ? ? flex: auto;
? border-radius: 5px;
? background: #FFFFFF;
? border: 1rpx solid #E6E6EA;
}
.weui-search-bar__box {
? position: relative;
? padding-left: 30px;
? padding-right: 30px;
? width: 100%;
? box-sizing: border-box;
? z-index: 1;
}
.weui-search-bar__input {
? height: 28px;
? line-height: 28px;
? font-size: 14px;
}
.weui-search-bar__cancel-btn {
? margin-left: 10px;
? line-height: 28px;
? color: #09BB07;
? white-space: nowrap;
}js
Page({
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
??
? },
? // 取消搜索,返回主頁面
? hideInput: function () {
wx.navigateTo({
//跳轉(zhuǎn)，返回主頁面路徑
? ? ? url: '../log1/log1' ??
? ? })
? }
});以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Javascript 中的 && 和 || 使用小結(jié)
Javascript 中的 && 和 || ，有時(shí)候用作條件判斷，非常的簡(jiǎn)潔，不熟悉的朋友可能不太了解，這里最后有個(gè)朋友補(bǔ)充，非常的好。2010-04-04
這篇文章主要介紹了JavaScript彈出窗口方法,非常實(shí)用的功能,需要的朋友可以參考下2014-08-08
JavaScript中止網(wǎng)絡(luò)請(qǐng)求的常見方法
在JavaScript中,中止網(wǎng)絡(luò)請(qǐng)求通常依賴于所使用的網(wǎng)絡(luò)請(qǐng)求庫或框架,本文給大家介紹了是一些常見的方法和庫,以及它們?nèi)绾沃С种兄咕W(wǎng)絡(luò)請(qǐng)求,并通過代碼講解的非常詳細(xì),需要的朋友可以參考下2024-10-10
這篇文章主要介紹了詳解JavaScript 中的 replace 方法的相關(guān)資料,需要的朋友可以參考下2016-01-01
Js中的FileReader相關(guān)操作方法總結(jié)
FileReader是前端進(jìn)行文件處理的一個(gè)重要的API,特別是在對(duì)圖片的處理上,這篇文章主要給大家介紹了關(guān)于Js中FileReader相關(guān)操作方法的相關(guān)資料,需要的朋友可以參考下2024-07-07
圖片翻書效果想必大家都有見過吧，在本文將為大家介紹下使用js是如何實(shí)現(xiàn)的，具體的代碼如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要給大家分享了js中toString方法的3個(gè)作用，文章圍繞js中toString方法的相關(guān)資料展開全文內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2021-12-12
函數(shù)和作用域是JavaScript的重要組成部分，我們?cè)谑褂肑avaScript編寫程序的過程中經(jīng)常要用到這兩部分內(nèi)容，借助此文一起來鞏固下學(xué)習(xí)的內(nèi)容吧。2016-12-12
bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07