微信小程序-漂亮的搜索框【样式】_心得技巧

上一篇: 身份证中匹配查找出生日期下一篇:c++runtime

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

发布时间：2022-07-01 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了微信小程序-漂亮的搜索框【样式】，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

十年河东，十年河西，莫欺少年穷

学无止境，精益求精

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

凌晨四点半写博客，你们做的到么？

加班通宵了，虽说我的事情不算多，但也不能白白浪费时间，于是乎就有了这篇博客

话多多说，直接上代码了。

组件：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 中是可以使用变量的*/
}