步骤
- 首页搜索框为自定义组件,所以按添加自定义组件的步骤添加新的组件
- 然后添加样式
searchInput.wxml
<view class="search_input">
<!-- //超链接标签 -->
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
- navigator为超链接标签
- url属性为跳转的界面
- open-type=“navigate” 表示跳转的界面不是tabbar
searchInput.less
.search_input{
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
navigator{
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
}
}
- 此处可使用less语法进行编辑
- vscode使用less语法需要安装插件easy less自动生成css文件
- 生成css文件微信小程序无法识别,更改配置或者需要手动更改wxss
setting.json中添加此代码
"less.compile": {
"outExt": ".wxss"
}
searchInput.wxss
.search_input {
height: 90rpx;
padding: 10rpx;
background-color:var(--themeColor);
}
.search_input navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 15rpx;
color: #666;
}