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