跌跌撞撞从新手写UniAPP(四):列表滚动效果

这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

大家好，我是前端SkyRain，一个大重量级别的前端工程师(240+)。

上一文中，完成了底部导航栏的配置，包括uniAPP的原生导航栏和自定义tabBar导航栏的配置。处理过之后，就可以完成其他页面的开发了。

但是正常的页面开发，按照设计图的效果按部就班的开发即可。这里分享一个移动端常用的效果：左边分类列表和右侧列表内容，两侧都可以滚动。

高度计算

由于需要滚动，所以整体的高度是动态变化的，需要经过计算的，高度等于系统屏幕高度 - 标题部分高度 - 底部导航栏高度

<view class="content" :style="{height:screenHeight+'px'}"></view>

mounted(){
  this.screenHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(114);
},

列表滚动

两侧列表的滚动效果，是通过滚动标签来实现的。

在uniApp中有一个原生组件，视图容器中的scroll-view标签，意为可滚动视图区域，用于区域滚动。

该组件的几个关键属性如下：

scroll-x 允许横向滚动
scroll-y 允许竖向滚动
upper-threshold 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold 距底部/右边多远时（单位px），触发 scrolltolower 事件

在本文的列表滚动效果中，使用到的是scroll-y属性，设置该属性为true。使用scroll-view标签将内容包裹住，则在内容超出屏幕区域时，会出现滚动效果

<!--左侧列表-->
<scroll-view scroll-y="true">
  <view :class="['item',curIndex == index ?'active':'']" v-for="(item,index) in cateList" :key="index" @click="selectCategory(index)">
    <text>{{item.name}}</text>
  </view>
</scroll-view>
<!--右侧列表-->
<scroll-view scroll-y="true">
  <view class="item" v-for="(item,index) in dataList" :key="index">
    <text>{{item.name}}</text>
  </view>
</scroll-view>
// 选择效果
selectCategory(index){
  this.curIndex = index;
  this.dataList = this.cateList[index].dataList;
},

这里的效果只是简单版本，各种复杂的东西并未添加，可自行实现。