直播商城源码，配置首页搜索框

直播商城源码，配置首页搜索框

1.找到pages.json文件，配置搜索框

在pages配置项中，找到我们需要配置搜索框的页面位置，添加style配置项。示例代码如下：

{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": {
"searchInput": {
"align": "left",
"backgroundColor": "#F6F7F8",
"borderRadius": "40px",
"disabled": true,
"placeholder": "默认提示文本",
"placeholderColor": "#959FA0"
},
"buttons": [{
"float": "right",
"text": "分类",
"fontSize": "14px",
"color": "#959FA0",
"colorPressed": "#333333" // 按下状态按钮颜色
}]
}
}
}
}

​2.监听搜索框与按钮的点击事件

 

<script>
export default {
data() {
return {
}
},
onLoad() {
},
// 监听原生搜索框的点击事件
onNavigationBarSearchInputClicked() {
console.log("在这里指定我们的跳转路径")
/* uni.navigateTo({
url: 'pages/search/search'
}); */
},
// 监听原生标题栏按钮的点击事件
onNavigationBarButtonTap() {
console.log("监听到了原生标题栏按钮的点击事件");
},
methods: {
}
}
</script>

 

以上就是直播商城源码，配置首页搜索框， 更多内容欢迎关注之后的文章