最美的时光|05.小程序项目实战：设置首页搜索框( 二 ) 旁友们

5、给搜索框加外观效果。
将searchinput.wxss 文件修改为searchinput.less 文件，
并写入如下代码：
.search_input{height: 90rpx;padding: 10rpx;background-color: var(--themeColor);navigator{height: 100%;display: flex; /* 伸缩盒子 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */background-color: #fff; /* 设置导航颜色：白色 */border-radius: 15rpx; /* 圆角边框 */color: #666;}}保存，就会自动编译生成 searchinput.wxss 文件，
小程序的界面效果也出现，如下图：
6、设置跳转效果。
打开 searchinput.wxml 文件，
在navigator标签后面加入 open-type 有效值，
就可实现跳转tarbBar 页面。
完整的代码如下：
搜索 保存后，点击页面上的搜索框，就会发生跳转，跳转后页面如下：
经过以上6个步骤，
我们已成功将搜索框设置为自定义组件，
完成了首页页面的搜索框设置。
1、点击components 文件夹，新建文件夹 searchinput ；
2、在 index.json文件中进行声明引用；
3、在 index.wxml文件中引入组件；
4、将组件设为搜索框，即小程序页面中展示的样子；
5、给搜索框加外观效果；
6、设置跳转效果。
你学会了吗？？

最美的时光|05.小程序项目实战：设置首页搜索框( 二 )

推荐阅读

「医院门诊」2020年春节放假期间北京市部分医院门诊信息

「体育测试」教育部：逐步提高中考体育测试分值

@“双十一”即将付尾款的你！网络购物诈骗的套路要当心

格陵兰岛是地球上最大的岛屿,形成世界上最大的岛格陵兰岛的面积约是216万

福州新闻网|韩釜山港一俄籍船新增12例确诊仁川港首现确诊船员

「我们是有故事的人」顺手又生了个皇子太得意，太后出手打压，炩妃又害如懿失子失宠

井尚美怎么样_井尚美防晒霜怎么样?

与涉世未深充满童真的人怎么样打交道或者交谈

「季后赛」心疼！东部球队直接被剥夺季后赛资格？为了保送胖虎NBA拼了

天下长河|看完7集《天下长河》，我心情复杂，连连感叹，写下这篇文章

之江高复提分英雄榜揭幕

创新”产学研”一体化，联想来酷携手新华教育助推新基建人才培养

环球网|美国收到可怕警告！

随着多北京校划片、租房入学等政策的推进，“学区房”的价格会受到影响吗

单身男|七夕相亲会人气火爆，大批单身男女现场寻姻缘，祝福彼此幸福

葛根异黄酮雌激素能补充吗

刘德华 |刘德华替身八年翻身当影帝还娶刘德华前任做妻子这是在复制刘德华

国民闺蜜|后来被他老爸发现了，开心一刻：我一个朋友昨晚心情不太好

「港区国安法」香港国安法正式实施！反中乱港行为不会再有避风港

座高铁@全球“最深”高铁站即将建成，埋入地下102米处，就位于