微信小程序-漂亮的搜索框【樣式】

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

 

凌晨四點半寫博客，你們做的到么？

加班通宵了，雖說我的事情不算多，但也不能白白浪費時間，於是乎就有了這篇博客

話多多說，直接上代碼了。

組件：SearchInput.wxml

<view class="searchInput">
  <navigator url="/pages/search/search" open-type="navigate">
    搜索
  </navigator>
</view>

樣式：SearchInput.wxss

/* Components/SearchInput/SearchInput.wxss */
.searchInput{
height: 90rpx;
padding: 10rpx; /*注意，這里用的是 rpx*/
background-color: var(--TheamColor); /*這是less的寫法  使用了變量*/
}
navigator{
width: 100%;
height: 100%; /*繼承父組件的高度*/
display: flex; /*定義成伸縮盒子*/
justify-content: center; /* 內容居中 */
align-items: center;  /*垂直居中*/
background-color: #fff; /*背景色*/
border-radius: 18rpx;  /*圓形邊框*/
color:#666 ;
}

全局樣式：app.wxss ，這里面有上面定義的Less 變量值

@import "./Styles/iconFont.wxss";
page,view,text,swiper,swiper-item{
  padding:0;
  margin:0;
  box-sizing:border-box;
}
page{
  font-size:32rpx;
   --TheamColor:#eb4450; /*Less 格式 變量值 CSS 中是可以使用變量的*/
}

最終的效果為：

 

 這個不是一個簡單的輸入框，而是一個跳轉鏈接，點擊下搜索，進入搜索頁面，效果如下：

 

 當然，搜索頁面還沒做，哈哈

 @天才owl的博客