邢臺網站建設,邢臺系統開發
邢臺網站建設,邢臺網站制作,邢臺網絡公司,邢臺系統開發,邢臺網站設計,邢臺網頁制作
15081754822
網站首頁 網站建設 系統開發 系統開發知識 手機網站 外貿網站 網站維護 網站案例 選課系統 域名注冊 微信開發 行業交流 聯系我們
 
邢臺區縣網站建設
邢臺行業門戶網站建設
邢臺網站策劃
公司主營業務
  系統開發
網站建設
手機網站
網站案例
成品網站
網站維護
域名注冊
虛似主機
機房工程
弱電工程
視頻主持人
 
增值服務
 
SSL證書申請
微信小程序
 
關于我們
 
公司簡介
公司視頻
支付方式
人才招聘
企業文化
服務承諾
合作伙伴
下載中心
 
你所處的位置:首頁 - 微信小程序 - 微信小程序:搜索框&搜索按鈕效果實現
微信小程序:搜索框&搜索按鈕效果實現
發布日期:2020-3-8 15:50:29  瀏覽次數:127次

搜索框&搜索按鈕

輸入框用Input實現,但是給input組件加邊框用boder是沒有用的,需要在外面加一個view,給view設置border

搜索框自帶輸入提示詞是給input組件設置placeholder="XXX"

微信小程序的按鈕不能自定義圖片,所以給image設置點擊事件來實現搜索按鈕

搜索框和搜索按鈕是在同一個view里面的,為了讓二者并排,給此view設置布局,display: flex;

圖片的大小需要給image標簽設置樣式,給其所在的容器設置大小沒用,圖片大小不會變的。

.wxml


<view class='container1'>

   <view class="inputView" >

     <input placeholder="爆漿芝士奶酪海綿蛋糕" auto-focus='true' class='input'/>

   </view>

   <view class="imageView">

     <image src='/images/search.png' class='image'></image>

   </view>

</view>

.wxss


.container1{

 width: 100%;

 margin-top: 0;

 padding: 0;

 height: 44px;

 /* background-color: #FFCB57; */

 display: flex;

}


.inputView{

   border: px solid0 #000;

   border-radius: 6px;

   margin-left: 15px;

   margin-top: 3px;

   margin-bottom: 3px;

   background-color: #F5F7F9;

   width: 76%;

   /* background-color: #EDD3ED;*/

}


.input{

   margin-left: 30px;

   padding-left: 10px;

   height: 40px;

   font-family: Arial, Helvetica, sans-serif;

}


.imageView{

   margin-left: 4px;

   width: 20%;

   /* background-color: #C8EFD4; */

}


.image{

 width: 44px;

 height: 44px;

}






作者:未知 上一條: 微信小程序開發之前后端打通小demo
來源:互聯網 下一條: 微信小程序:最終詳情頁面樣式
奧祥介紹 聯系我們
域名注冊 成品網站
成功案例 客戶服務
行業交流 支付方式
版權所有: © 2005-2015 邢臺奧祥網絡™
聯系電話:15081754822  15102693855
公司郵箱:[email protected] 《信息產業部備案 冀ICP備09043254號》
本站關鍵詞:邢臺網站建設 邢臺網站設計 河北邢臺網絡公司 邢臺網站制作公司 邢臺網站推廣邢臺網站制作
網站統計:
黑色沙漠造船赚钱 辽宁体彩11选5计算方法 fg美人捕鱼规律 长沙麻将技巧十句口诀 白小姐四肖期期必选一肖 深市股票代码查询 怎样看股票的k线图 体彩黑龙江6 1开奖结果 手机麻将神器免费下 怎么利用网络赚钱 黑龙江36选7中奖查询 期货配资定诈骗 快乐扑克开奖查询 北京塞车pk10官网开奖 股票指标涨停 福建体育彩票11选5现场开奖 十一运夺金遗漏一定牛