搜搜页效果图

demo_20 搜索页导航栏修改

1. 创建及跳转到搜索页

1.1 创建搜索页

demo_20 搜索页导航栏修改

 1.2 从导航栏实现跳转

demo_20 搜索页导航栏修改

 2. 编辑home-search 自定义导航栏

2.1 禁止原生导航

demo_20 搜索页导航栏修改

 2.2 对home-search页面导航栏修改

2.2.1 navbar传参识别是哪个页面调用,以方便对navbar修改

demo_20 搜索页导航栏修改

 接收传参

demo_20 搜索页导航栏修改

 2.3 添加搜索栏样式

2.3.1 添加返回标签,动态添加serach样式

demo_20 搜索页导航栏修改

2.3.2 样式

 demo_20 搜索页导航栏修改

效果图

demo_20 搜索页导航栏修改

 2.4 修改搜索框内容

2.4.1 添加搜索页input,并可点击输入

demo_20 搜索页导航栏修改

效果图

demo_20 搜索页导航栏修改

 2.4.2 添加原样式,字体增大2px

       font-size: 14px;

demo_20 搜索页导航栏修改

3. 搜索页内容

3.1 添加内容view及样式

demo_20 搜索页导航栏修改

 3.2 内容实现

demo_20 搜索页导航栏修改

 3.3 样式实现

 demo_20 搜索页导航栏修改

相关文章: