微信小程序?qū)崿F(xiàn)簡單搜索框
本文實(shí)例為大家分享了微信小程序?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; }
改動(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; }
效果圖如下
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 嚴(yán)格模式(use strict)用法實(shí)例分析
這篇文章主要介紹了JavaScript 嚴(yán)格模式(use strict)用法,結(jié)合實(shí)例形式分析了JavaScript 嚴(yán)格模式的基本功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03Next.js使用getServerSideProps進(jìn)行服務(wù)器端渲染demo
這篇文章主要為大家介紹了Next.js使用getServerSideProps進(jìn)行服務(wù)器端渲染demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯
這篇文章主要介紹了Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景詳解
forEach是沒有返回值并且不直接改變?cè)瓟?shù)組的,今天發(fā)現(xiàn)是不能直接改變,下面這篇文章主要給大家介紹了關(guān)于Js中forEach修改原數(shù)組與sort排序經(jīng)典場(chǎng)景的相關(guān)資料,需要的朋友可以參考下2022-05-057道關(guān)于JS this的面試題,你能答對(duì)幾個(gè)
這篇文章主要給大家介紹了7道關(guān)于JS this的面試題,來看看你能答對(duì)幾個(gè),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03