微信小程序?qū)崿F(xiàn)搜索框功能
本文實例為大家分享了微信小程序?qū)崿F(xiàn)搜索框功能的具體代碼,供大家參考,具體內(nèi)容如下
效果:
wxml文件:
<view class="search_input" > <navigator url="/pages/search/search" open-type="navigate" class="navigator"> <text class="iconfont icon-guanbi"></text> 搜索 </navigator> </view>
text中需要導(dǎo)入圖標(biāo)樣式,這里利用的是iconfont
url是要跳轉(zhuǎn)的頁面
.search_input { height: 90rpx; background-color: #eb4450; padding: 10rpx; } .search_input .navigator{ background-color: #fff; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 15rpx; color: #999; font-size: 32rpx; }
.js中:
如果是組件引用全局樣式,需要加如下屬性
options:{ addGlobalClass:true, },
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法,分別是處理異步回調(diào)、多個異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯誤處理,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-07-07JavaScript實現(xiàn)復(fù)選框全選或全取消操作
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)復(fù)選框全選或全取消操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09微信小程序 調(diào)用遠(yuǎn)程接口 給全局?jǐn)?shù)組賦值代碼實例
這篇文章主要介紹了微信小程序 調(diào)用遠(yuǎn)程接口 給全局?jǐn)?shù)組賦值代碼實例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08Javascript仿PHP $_GET獲取URL中的參數(shù)
這篇文章主要介紹了Javascript仿PHP $_GET獲取URL中的參數(shù)代碼實例,需要的朋友可以參考下2014-05-05使用ef6創(chuàng)建oracle數(shù)據(jù)庫的實體模型遇到的問題及解決方案
這篇文章主要介紹了使用ef6創(chuàng)建oracle數(shù)據(jù)庫的實體模型遇到的問題及解決方案,需要的朋友可以參考下2017-11-11JavaScript中5種調(diào)用函數(shù)的方法
這篇文章主要介紹了JavaScript中5種調(diào)用函數(shù)的方法,本文詳細(xì)的介紹了Javascript中各種函數(shù)調(diào)用的方法及其原理,對于理解JavaScript的函數(shù)有很大的幫助,需要的朋友可以參考下2015-03-03Kettle中使用JavaScrip調(diào)用jar包對文件內(nèi)容進(jìn)行MD5加密的操作方法
這篇文章主要介紹了Kettle中使用JavaScrip調(diào)用jar包對文件內(nèi)容進(jìn)行MD5加密的方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-09