微信小程序?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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù),可以為空
? ?*/
? data: {
?
? },
? // 查詢搜索的接口方法
? a: function () {
? ?
? }
})那么最簡(jiǎn)單的學(xué)會(huì)了 進(jìn)階版的呢？
這是一個(gè)復(fù)雜點(diǎn)的搜索框樣式：初始搜索框無法編輯和輸入，點(diǎn)擊搜索框使搜索框進(jìn)入可編輯狀態(tài)（在同一個(gè)頁(yè)面完成），在搜索框內(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({
? // 頁(yè)面的初始數(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è)頁(yè)面，然后才可以編輯
主頁(yè)代碼如下
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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
?
? },
? // 跳轉(zhuǎn)到搜索頁(yè)面
? search: function () {
? ? wx.navigateTo({
? ? ? url: '../search/search'
? ? })
? }
})搜索頁(yè)面基礎(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({
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data: {
??
? },
? // 取消搜索,返回主頁(yè)面
? hideInput: function () {
wx.navigateTo({
//跳轉(zhuǎn)，返回主頁(yè)面路徑
? ? ? url: '../log1/log1' ??
? ? })
? }
});以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript改變position值實(shí)現(xiàn)菜單滾動(dòng)至頂部后固定
現(xiàn)在很多網(wǎng)站都有這樣的一個(gè)效果，當(dāng)頁(yè)面滾動(dòng)到一定高度時(shí)，菜單欄會(huì)固定在頁(yè)面頂部;該效果在 ie6 下不支持，因?yàn)閕e6不支持 position:fixed,效果很不錯(cuò)，感興趣的朋友可以了解下啊2013-01-01
這篇文章主要為大家詳細(xì)介紹了JS控制GIF圖片的停止與顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
js Canvas實(shí)現(xiàn)圓形時(shí)鐘教程
這篇文章主要為大家詳細(xì)介紹了HTML5 Canvas實(shí)現(xiàn)圓形時(shí)鐘簡(jiǎn)易教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
一直想為 SWFObject 這個(gè)JS的類庫(kù)寫一個(gè)推薦帖，因?yàn)樗p便，同時(shí)功能強(qiáng)大，為我們的開發(fā)帶來了很大的便捷。2008-07-07
微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁(yè)面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之跳轉(zhuǎn)頁(yè)面、傳遞參數(shù)獲得數(shù)據(jù)操作,結(jié)合實(shí)例形式分析了微信小程序基于navigator組件的頁(yè)面跳轉(zhuǎn)及數(shù)據(jù)傳遞相關(guān)操作技巧,并結(jié)合圖文形式進(jìn)行詳細(xì)說明,需要的朋友可以參考下2019-03-03
javascript實(shí)現(xiàn)炫酷的拖動(dòng)分頁(yè)
非常酷的javascript拖動(dòng)分頁(yè)功能，無縫循環(huán)分頁(yè)，拖動(dòng)鼠標(biāo)即可完成分頁(yè)，鼠標(biāo)向左拖動(dòng)回到前一頁(yè)，向右拖動(dòng)則翻開第二頁(yè)，還帶有動(dòng)畫特效，著實(shí)很不錯(cuò)，界面黑色，非主流風(fēng)格，相信很多人會(huì)喜歡的。2015-05-05
基于JavaScript實(shí)現(xiàn)通用tab選項(xiàng)卡(通用性強(qiáng))
選項(xiàng)卡在大量的網(wǎng)站都有應(yīng)用，雖然形式各有不同，但是索要達(dá)成的目的都是一樣的，一般都是為了進(jìn)行分類或者節(jié)省網(wǎng)頁(yè)空間只用，算是一件利器，下面就是一個(gè)選項(xiàng)卡的代碼實(shí)例，通用性很強(qiáng)，下面就和大家分享一下2016-01-01
Javascript 函數(shù)parseInt()轉(zhuǎn)換時(shí)出現(xiàn)bug問題
天測(cè)試的測(cè)出來的。parseInt(1.13*100)，實(shí)際返回值是112，下面有個(gè)示例，大家可以看看下2014-05-05
javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)根據(jù)日期和時(shí)間排序功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08