微信小程序?qū)崿F(xiàn)簡(jiǎn)單搜索框
更新時(shí)間：2022年09月09日 10:53:42 作者：richest_qi
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)簡(jiǎn)單搜索框的具體代碼，供大家參考，具體內(nèi)容如下
app.json
{
? "pages":[
? ? "pages/index/index"
? ],
? "window":{
? ? "backgroundTextStyle":"light",
? ? "navigationBarBackgroundColor": "#16C4AF",
? ? "navigationBarTitleText": "Weixin",
? ? "navigationBarTextStyle":"white"
? },
? "style": "v2",
? "sitemapLocation": "sitemap.json"
}index.wxml
<!--index.wxml--> <view class="search-container"> ? <view class="search-left"> ? ? <image src="../../images/search.png" /> ? ? <input type="text" placeholder="搜索"/> ? </view> ? <view class="search-right"> ? ? <image src="../../images/add.png" /> ? </view> </view>
index.wxss
/**index.wxss**/
.search-container{
? display: flex;
? justify-content: space-between;
? align-items: center;
? padding: 10rpx 20rpx;
? box-sizing: border-box;
? background-color: #ddd;
}
.search-left{
? background-color: #eee;
? flex: 2;
}
.search-left image{
? width: 48rpx;
? height: 48rpx;
? padding: 10rpx 20rpx 10rpx 10rpx;
? vertical-align: middle;
??
}
.search-left input{
? display: inline-block;
? vertical-align: middle;
? width: calc(100% - 88rpx);
}
.search-right{
? padding-left: 20rpx;
}
.search-right image{
? width: 80rpx;
? height: 80rpx;
? vertical-align: middle;
}
改動(dòng)下.search-left、.search-left image的樣式，修改后的內(nèi)容如下：
/**index.wxss**/
.search-container{
? display: flex;
? justify-content: space-between;
? align-items: center;
? padding: 10rpx 20rpx;
? box-sizing: border-box;
? background-color: #ddd;
}
.search-left{
? background-color: #eee;
? flex: 2;
? border-radius: 40rpx;
? padding-right: 40rpx;
? box-sizing: border-box;
}
.search-left image{
? width: 48rpx;
? height: 48rpx;
? padding: 10rpx 20rpx;
? vertical-align: middle;
??
}
.search-left input{
? display: inline-block;
? vertical-align: middle;
? width: calc(100% - 88rpx);
}
.search-right{
? padding-left: 20rpx;
}
.search-right image{
? width: 80rpx;
? height: 80rpx;
? vertical-align: middle;
}效果圖如下
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Eclipse編輯jsp、js文件時(shí)卡死現(xiàn)象的解決辦法匯總
使用Eclipse編輯jsp、js文件時(shí)，經(jīng)常出現(xiàn)卡死現(xiàn)象，在網(wǎng)上百度了N次，經(jīng)過N次優(yōu)化調(diào)整后，卡死現(xiàn)象逐步好轉(zhuǎn),下面通過腳本之家平臺(tái)給大家分享幾種解決辦法，需要的朋友參考下2016-02-02
由于項(xiàng)目上需要解析xml，于是各種百度，然后自己總結(jié)了下各個(gè)主流瀏覽器解析xml的方法，下面通過本文給大家詳細(xì)介紹下使用JS讀取XML文件的方法，一起看看吧2016-11-11
在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
最近加入到新項(xiàng)目組負(fù)責(zé)前端技術(shù)預(yù)研和選型，其中涉及到一個(gè)熟悉又陌生的需求——國際化＆本地化。熟悉的是之前的項(xiàng)目也玩過，陌生的是之前的實(shí)現(xiàn)僅僅停留在"有"的階段而已。趁著這個(gè)機(jī)會(huì)好好學(xué)習(xí)整理一下，為后面的技術(shù)選型做準(zhǔn)備2016-09-09
Three.js中實(shí)現(xiàn)一個(gè)OBBHelper實(shí)例詳解
這篇文章主要介紹了Three.js中實(shí)現(xiàn)一個(gè)OBBHelper,本文參考Box3Helper源碼，并寫出一個(gè)OBBHelper，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
基于JS定義回車事件的實(shí)現(xiàn)代碼，需要的朋友可以參考下2013-07-07
如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)web端顯示點(diǎn)云數(shù)據(jù)的相關(guān)資料,最近在項(xiàng)目中遇到需求,需要在web端顯示點(diǎn)云數(shù)據(jù),將我的實(shí)現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下2023-11-11
js實(shí)現(xiàn)超酷的照片墻展示效果圖附源碼下載
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-10-10
DOM就是Html頁面的模型，將每個(gè)標(biāo)簽都做為一個(gè)對(duì)象，JavaScript通過調(diào)用DOM中的屬性、方法就可以對(duì)網(wǎng)頁中的文本框、層等元素進(jìn)行編程控制。比如通過操作文本框的DOM對(duì)象，就可以讀取文本框中的值、設(shè)置文本框中的值。2015-07-07
JS實(shí)現(xiàn)字符串轉(zhuǎn)駝峰格式的方法
這篇文章主要介紹了JS實(shí)現(xiàn)字符串轉(zhuǎn)駝峰格式的方法,結(jié)合實(shí)例形式分析了傳統(tǒng)的字符串遍歷轉(zhuǎn)換及正則替換兩種操作技巧,需要的朋友可以參考下2016-12-12