(11).分支的合并与提交
- 将本地的 home 分支进行本地的 commit 提交：
查看是否在分支目录上 git branch 查看哪些数据可以添加(红色) git status 添加的操作 git add . 查看是否添加成功(绿色成功) git status 提交本地仓库 git commit -m "完成了 home 首页的开发"
- 将本地的 home 分支推送到远程仓库进行保存：
git push -u origin home
- 将本地的 home 分支合并到本地的 master 分支：
git checkout master git add . git commit -m "完成了home开发" git merge home 强制推送到远程仓库 git push -f origin master
- 删除本地的 home 分支：
git branch -d home
.
3.配置页面 - 分类
(1).创建cate分支
运行下面的命令，基于master分支在本地创建cate分支，用来开发分类页面相关的功能:
git checkout -b cate
修改编译模式:
(2).渲染分裂页面的基本结构
- 定义页面结构如下：
cate.vue
<template> <view> <!-- 滑动区域 --> <view class="scroll-view-container"> <!-- 左侧的滑动区域 --> <scroll-view scroll-y="true" style="height: 300px;" class="left-scroll-view"> <view>xxxx</view> <view>xxxx</view> <view>xxxxx</view> </scroll-view> <!-- 右侧的滑动区域 --> <scroll-view scroll-y="true" style="height: 300px;"> <view>xxxx</view> <view>xxxx</view> <view>xxxx</view> <view>xxxx</view> <view>xxxx</view> </scroll-view> </view> </view> </template> <script> export default { data() { return { }; } } </script> <style lang="scss"> .scroll-view-container { display: flex; .left-scroll-view { width: 120px; } } </style>
- 动态计算窗口的剩余高度：
Uniapp提供了 getsysteminfosync()获取屏幕宽度的方法
cate.vue
<script> export default { data() { return { // 当前设备可用的高度 wh: 0 }; }, onLoad() { const systemInfo = uni.getSystemInfoSync() console.log('手机设备信息->', systemInfo) this.wh = systemInfo.windowHeight } } </script>
<template> <view> <!-- 滑动区域 --> <view class="scroll-view-container"> <!-- 左侧的滑动区域 --> <scroll-view scroll-y="true" class="left-scroll-view" :style="{height:wh+'px'}"> <view>xxxx</view> <view>xxxxx</view> <view>xxxxx</view> </scroll-view> <!-- 右侧的滑动区域 --> <scroll-view scroll-y="true" :style="{height:wh+'px'}"> <view>xxxx</view> <view>xxxx</view> <view>xxxx</view> <view>xxxx</view> </scroll-view> </view> </view> </template> <script> export default { data() { return { // 当前设备可用的高度 wh: 0 }; }, onLoad() { const systemInfo = uni.getSystemInfoSync() console.log('手机设备信息->', systemInfo) this.wh = systemInfo.windowHeight } } </script> <style lang="scss"> .scroll-view-container { display: flex; .left-scroll-view { width: 120px; } } </style>
- 美化页面结构
cate.vue
// 左侧选中区域 $.xxx 就是说如果说 即包括.left-scroll-view-item又包括这个 active类名的话，我们就对其设置样式
<style lang="scss"> // 滑动块布局 .scroll-view-container { display: flex; // 左侧滑总区域 .left-scroll-view { width: 120px; // 左侧滑动区域项目 .left-scroll-view-item { background-color: #f7f7f7; line-height: 60px; text-align: center; font-size: 12px; // 左侧选中区域 $.xxx 就是说如果说 即包括.left-scroll-view-item又包括这个 active类名的话，我们就对其设置样式 &.active { background-color: #FFFFFF; position: relative; &::before { content: ''; display: block; width: 3px; height: 30px; background-color: #C00000; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } } } } } </style>
<template> <view> <!-- 滑动区域 --> <view class="scroll-view-container"> <!-- 左侧的滑动区域 --> <scroll-view scroll-y="true" class="left-scroll-view" :style="{height:wh+'px'}"> <view class="left-scroll-view-item active">xxxx</view> <view class="left-scroll-view-item">xxxx</view> </scroll-view> <!-- 右侧的滑动区域 --> <scroll-view scroll-y="true" :style="{height:wh+'px'}"> <view class="right-scroll-view-item">xxxx</view> </scroll-view> </view> </view> </template>
