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