119.【Uniapp】(六)

简介: 119.【Uniapp】
(11).分支的合并与提交
  1. 将本地的 home 分支进行本地的 commit 提交:
查看是否在分支目录上
git branch
查看哪些数据可以添加(红色)
git status
添加的操作
git add .
查看是否添加成功(绿色成功)
git status
提交本地仓库
git commit -m "完成了 home 首页的开发"

  1. 将本地的 home 分支推送到远程仓库进行保存:
git push -u origin home

  1. 将本地的 home 分支合并到本地的 master 分支:
git checkout master
git add .
git commit -m "完成了home开发"
git merge home
强制推送到远程仓库
git push -f origin master 
  1. 删除本地的 home 分支:
git branch -d home

.

3.配置页面 - 分类

(1).创建cate分支

运行下面的命令,基于master分支在本地创建cate分支,用来开发分类页面相关的功能:

git checkout -b cate

修改编译模式:

(2).渲染分裂页面的基本结构
  1. 定义页面结构如下:

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>

  1. 动态计算窗口的剩余高度:

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>

  1. 美化页面结构

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>



相关文章
|
开发框架 小程序 JavaScript
|
小程序
119.【Uniapp】(四)
119.【Uniapp】
102 0
|
JavaScript 小程序 API
119.【Uniapp】(三)
119.【Uniapp】
119 0
|
小程序 开发工具 git
119.【Uniapp】(二)
119.【Uniapp】
202 0
|
8月前
uniapp配置tarBar
uniapp配置tarBar
99 0
|
8月前
|
JSON API 数据格式
uniapp-获取手机型号
uniapp-获取手机型号
333 0

相关实验场景

更多