十年河东,十年河西,莫欺少年穷
学无止境,精益求精
凌晨四点半写博客,你们做的到么?
加班通宵了,虽说我的事情不算多,但也不能白白浪费时间,于是乎就有了这篇博客
话多多说,直接上代码了。
组件: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的博客