微信小程序?qū)崿F(xiàn)簡單搜索框
更新時間：2022年09月09日 10:53:42 作者：richest_qi
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xià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;
}
改動下.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;
}效果圖如下
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Eclipse編輯jsp、js文件時卡死現(xiàn)象的解決辦法匯總
使用Eclipse編輯jsp、js文件時，經(jīng)常出現(xiàn)卡死現(xiàn)象，在網(wǎng)上百度了N次，經(jīng)過N次優(yōu)化調(diào)整后，卡死現(xiàn)象逐步好轉(zhuǎn),下面通過腳本之家平臺給大家分享幾種解決辦法，需要的朋友參考下2016-02-02
由于項目上需要解析xml，于是各種百度，然后自己總結(jié)了下各個主流瀏覽器解析xml的方法，下面通過本文給大家詳細介紹下使用JS讀取XML文件的方法，一起看看吧2016-11-11
在JavaScript中查找字符串中最長單詞的三種方法(推薦)
這篇文章主要介紹了在JavaScript中查找字符串中最長單詞的三種方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
最近加入到新項目組負責前端技術(shù)預研和選型，其中涉及到一個熟悉又陌生的需求——國際化＆本地化。熟悉的是之前的項目也玩過，陌生的是之前的實現(xiàn)僅僅停留在"有"的階段而已。趁著這個機會好好學習整理一下，為后面的技術(shù)選型做準備2016-09-09
Three.js中實現(xiàn)一個OBBHelper實例詳解
這篇文章主要介紹了Three.js中實現(xiàn)一個OBBHelper,本文參考Box3Helper源碼，并寫出一個OBBHelper，本文結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-09-09
基于JS定義回車事件的實現(xiàn)代碼，需要的朋友可以參考下2013-07-07
如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)
這篇文章主要給大家介紹了關(guān)于如何利用Three.js實現(xiàn)web端顯示點云數(shù)據(jù)的相關(guān)資料,最近在項目中遇到需求,需要在web端顯示點云數(shù)據(jù),將我的實現(xiàn)步驟介紹在這里供大家參考,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了超酷的照片墻展示效果圖附源碼下載的相關(guān)資料,需要的朋友可以參考下2015-10-10
DOM就是Html頁面的模型，將每個標簽都做為一個對象，JavaScript通過調(diào)用DOM中的屬性、方法就可以對網(wǎng)頁中的文本框、層等元素進行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設置文本框中的值。2015-07-07
這篇文章主要介紹了JS實現(xiàn)字符串轉(zhuǎn)駝峰格式的方法,結(jié)合實例形式分析了傳統(tǒng)的字符串遍歷轉(zhuǎn)換及正則替換兩種操作技巧,需要的朋友可以參考下2016-12-12