微信小程序 — css样式学习（实现列表区域滑动）

如图我们要实现以下效果。列表在区域内上下滚动，查看数据。由于我们的底部tabbar是自定义的底部view.所以有底部组件的高度。如何实现：

 实现思路一：

我们设置整体布局flex, 方向column，设置高度100%，

然后设置滑动部分的布局flex, 方向column,同时设置margin-bottom:(底部自定义tabbar的高度)

整体布局结构如下图：

 用到的css样式：

page {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.column {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

实现思路二：

计算中间可滑动区域的高度

//calc可以动态计算css的宽高。运算符（+ - ）左右两边必须加空格，否则运算会失效

//视口单位vh wh 1vh = 1%的视口高度   1wh = 1%的视口宽度

/* 屏幕的总高度 - 上部分高度 - 底部高度 = 中间内容高度。 */

.scrollHeight {
  height: calc(100vh - 20rpx - 100rpx);
}

实现思路三：

中间列表滚动区域。设置一个flex布局。然后设置flex:1;overflow-y:auto;margin-bottom:

根据实际效果设置margin-bottom。 flex:1;overflow-y:auto; 则滑动的时候在自己区域滑动。

<!-- 图片缩略图列表 -->
  <view class="rowFlex wrap " style="flex:1;overflow-y:auto;margin-bottom:20rpx;">
  </view>