微信小程序實現頂部搜索框
更新時間：2022年05月22日 09:35:44 作者：瑾！
這篇文章主要為大家詳細介紹了微信小程序實現頂部搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現頂部搜索框的具體代碼，供大家參考，具體內容如下
這是一個最簡單的頂部搜索框，代碼如下
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> ? ? ? ? ? ? </view> ? ? ? ? ? ? <!-- 搜索按鈕,調用搜索查詢方法 --> ? ? ? ? ? ? <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({
? /**
? ?* 頁面的初始數據,可以為空
? ?*/
? data: {
?
? },
? // 查詢搜索的接口方法
? a: function () {
? ?
? }
})那么最簡單的學會了 進階版的呢？
這是一個復雜點的搜索框樣式：初始搜索框無法編輯和輸入，點擊搜索框使搜索框進入可編輯狀態(tà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({
? // 頁面的初始數據
? data: {
? ? inputShowed: false, ?//初始文本框不顯示內容
? },
? // 使文本框進入可編輯狀態(tài)
? showInput: function () {
? ? this.setData({
? ? ? inputShowed: true ? //設置文本框可以輸入內容
? ? });
? },
? // 取消搜索
? hideInput: function () {
? ? this.setData({
? ? ? inputShowed: false
? ? });
? }
});進階版的也完成了，最后，我想到了京東的點擊搜索跳轉一個頁面，然后才可以編輯
主頁代碼如下
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({
? /**
? ?* 頁面的初始數據
? ?*/
? data: {
?
? },
? // 跳轉到搜索頁面
? search: function () {
? ? wx.navigateTo({
? ? ? url: '../search/search'
? ? })
? }
})搜索頁面基礎代碼如下：
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> ? ? ? ? ? ? </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({
? /**
? ?* 頁面的初始數據
? ?*/
? data: {
??
? },
? // 取消搜索,返回主頁面
? hideInput: function () {
wx.navigateTo({
//跳轉，返回主頁面路徑
? ? ? url: '../log1/log1' ??
? ? })
? }
});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js實現鼠標移動到圖片產生遮罩效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Javascript 中的 && 和 || ，有時候用作條件判斷，非常的簡潔，不熟悉的朋友可能不太了解，這里最后有個朋友補充，非常的好。2010-04-04
這篇文章主要介紹了JavaScript彈出窗口方法,非常實用的功能,需要的朋友可以參考下2014-08-08
在JavaScript中,中止網絡請求通常依賴于所使用的網絡請求庫或框架,本文給大家介紹了是一些常見的方法和庫,以及它們如何支持中止網絡請求,并通過代碼講解的非常詳細,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了詳解JavaScript 中的 replace 方法的相關資料,需要的朋友可以參考下2016-01-01
FileReader是前端進行文件處理的一個重要的API,特別是在對圖片的處理上,這篇文章主要給大家介紹了關于Js中FileReader相關操作方法的相關資料,需要的朋友可以參考下2024-07-07
圖片翻書效果想必大家都有見過吧，在本文將為大家介紹下使用js是如何實現的，具體的代碼如下，感興趣的朋友可以參考下2013-09-09
這篇文章主要給大家分享了js中toString方法的3個作用，文章圍繞js中toString方法的相關資料展開全文內容，需要的小伙伴可以參考一下，希望對你的學習有所幫助2021-12-12
函數和作用域是JavaScript的重要組成部分，我們在使用JavaScript編寫程序的過程中經常要用到這兩部分內容，借助此文一起來鞏固下學習的內容吧。2016-12-12
bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07