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