一、创建 cate 分支
运行如下的命令,基于 master 分支在本地创建 cate 子分支,用来开发分类页面相关的功能:
git checkout -b cate
1.1 渲染分类页面的基本结构
-
定义页面结构如下:
<template> <view> <view class="scroll-view-container"> <!-- 左侧的滚动视图区域 --> <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="left-scroll-view-item active">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">xxx</view> <view class="left-scroll-view-item">多复制一些节点,演示纵向滚动效果...</view> </scroll-view> <!-- 右侧的滚动视图区域 --> <scroll-view class="right-scroll-view" scroll-y :style="{height: wh + 'px'}"> <view class="left-scroll-view-item">zzz</view> <view class="left-scroll-view-item">zzz</view> <view class="left-scroll-view-item">zzz</view> <view class="left-scroll-view-item">zzz</view> <view class="left-scroll-view-item">多复制一些节点,演示纵向滚动效果</view> </scroll-view> </view> </view> </template>
-
动态计算窗口的剩余高度:
<script> export default { data() { return { // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度 wh: 0 }; }, onLoad() { // 获取当前系统的信息 const sysInfo = uni.getSystemInfoSync() // 为 wh 窗口可用高度动态赋值 this.wh = sysInfo.windowHeight } } </script>
3.