06_我的页面开发.md · jeffery0211/zhufeng_uni_music2104

接下来我们就进行开发 `我的页面`  部分。

### 页面开发

本次页面也是没有导航栏标题的，所以在根目录下 `pages.json 文件`  上进行相关配置:

```json
{
  "path": "pages/mine/mine",
  "style": {
    "navigationBarTitleText": "我的",
    "navigationStyle": "custom", //取消默认的原生导航栏
    "app-plus": {
      "titleNView": false ////去掉页面的导航栏
    }
  }
}
```

在这儿学到的比较重要的一点就是 `差异化平台` :由于 H5 是运行在浏览器中的，我们并不能对标题栏进行样式设置，故在差异化下，H5 没有应用头部。但是在 app 我们是可以设置标题栏的，新版的小程序也开始支持标题栏的设置。我们的 uni-app 项目并不是操作原生 app 组件，因此标题栏的设置可以说是 webview 的一个样式模拟。取消标题栏的是以手机状态栏（电池栏）开始自上而下排版的，这一块我们也要隔开。

![19_app](https://images.gitee.com/uploads/images/2021/0504/183938_8aea241d_1720749.png "19_app.png")

要想更接近 app 的原生效果，就要看页面的组成。我们在写页面的时候可以把导航栏固定，然后内容区用 scroll-view 组件撑开整个页面。

```js
<view>
	<view class="navbar">
		这里是标题栏
	</view>F
	<scroll-view scroll-y="true" class="page-content">
		这里是内容区
	</scroll-view>
</view>

.navbar{
	position: fixed;
	top:0;
	width:100%;
	height:44px;
}
.page-content {
	position: fixed;
	top: 44px;   // 距离标题栏高度
	left: 0;
	right: 0;
	bottom: 0px;
}
```

这样就可以实现基本的页面布局，内容区铺满整个页面（除标题栏外和底部导航）。

在这里我们可以使用 uni-app 官方的扩展组件 NavBar 导航栏。可以友好的处理左右边的事件，甚至可以以插槽的方式自定义功能复杂的标题栏。因此可以改造代码：

```js
<view>
	
	<uni-nav-bar fixed :status-bar="true" title="我的音乐" @clickLeft="goCloud" @clickRight="goCloud">
		<block slot="left"><image class="top-img left" src="/static/image/mine/l.png"></image></block>
		
		<block slot="right"><image class="top-img" src="/static/image/mine/r.png"></image></block>
		
	</uni-nav-bar>
	
	
	<scroll-view scroll-y="true" class="page-content">
	
		这里是内容区
	
	</scroll-view>
	
</view>
```

固定导航栏在 `uni-nav-bar`  组件中添加 fixed，添加 `:status-bar="true"`  适配状态栏的高度下渲染，并添加左右触发事件回调。由于这一块仅在 app 中需要设置标题栏，因此代码进行了条件编译。
添加完头部标题栏的微信小程序页面效果图：

![19_xiaowo](https://images.gitee.com/uploads/images/2021/0504/184142_593abe74_1720749.png "19_xiaowo.png")

添加完头部标题栏的 APP 页面效果图：

![19_appwo](https://images.gitee.com/uploads/images/2021/0504/184232_920a0d38_1720749.png "19_appwo.png")

在设计整个项目之初，哪些功能是否适用的，是否可以在这个端使用的，都要做出评估，功能设计上也要有所取舍。如果产品经理设计一个功能需要在 H5 中调用用户的通讯录，就算程序员再优秀或者框架再实用，H5 也是做不到的调用通讯录的。**开发之前要考虑他们所提供的 API 和性能能否满足产品需求**。

### 平台对比

- App 能够承载更多产品功能，一些复杂的功能能够通过原生实现；
- 小程序可承载产品核心功能，较复杂的功能难以实现，优点是用完就走，缺点是需要在某个平台的 app 下打开，数据难以共享；
- H5 能够脱离生态下运行，打开即可。一个网站多终端匹配。但是数据难以持久化，网页关闭后需要重新加载。根据手机的性能用户体验各有差别，流畅度不够高。

小改动，顶部右侧的功能图标不在小程序显示。

```vue


<block
  slot="right"
><image class="top-img" src="/static/image/mine/r.png"></image></block>

```

![19_xiaogood](https://images.gitee.com/uploads/images/2021/0504/184209_d0e723bd_1720749.png "19_xiaogood.png")

### solt 插槽

父组件向子组件传递 dom 时会用到插槽。插槽 --- slot，是组件的一块模板，这块模板是否显示以及怎样显示是由父组件来决定的。

```js
<uni-nav-bar fixed :status-bar="true" title="我的音乐" @clickLeft="goCloud" @clickRight="goCloud">
	<block slot="left"><image class="top-img left" src="/static/image/mine/l.png"></image></block>
	<block slot="right"><image class="top-img" src="/static/image/mine/r.png"></image></block>
</uni-nav-bar>

<view class="uni-navbar">
	<slot name="left" /> 
	<view>标题</view>
	<slot name="right" />
</view>
```

`slot="left"` ， `slot="right"` ，这两个指定名字因此叫具名插槽，会在子组件指定的位置渲染。比如 `slot="left"`  的这个元素会在组件 uni-nav-bar 中<slot name="left" />显示，是相当于替换掉。插槽显示的位置由子组件自身决定，slot 在子组件中的位置，决定了父组件传过来的显示模板的位置。

### scroll-view 导航栏

页面的整个内容区由 scroll-view 组件包裹，当前页面的导航栏也是由 scroll-view 组件组成，内容区主要负责用户上下浏览设置  `scroll-y`，而导航栏负责左右浏览设置  `scroll-x`。
接下来就是要进行开发云村页面啦！

jeffery0211/zhufeng_uni_music2104

简介

发行版

贡献者

近期动态

jeffery0211/zhufeng_uni_music2104 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

jeffery0211/zhufeng_uni_music2104