本节主要讲解利用 swiper 组件滚动展示信息，利用 flexbox 瀑布流布局实现浏览卡片式产品。
# 页面主体布局
当前页面的布局沿用在上一节中提到的布局。如上图所示分为两部分：头部标题栏 + 滚动浏览区域。头部标题栏 fixed 固定，内容区用 scroll-view 组件撑开整个页面。
相关代码：
<view>
<!-- 头部 -->
<uni-nav-bar fixed :status-bar="true">
头部内容
</uni-nav-bar>
<!-- 滚动区域 -->
<view class="page-content">
<mescroll-uni ref="mescroll" :fixed="false" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
滚动区域内容
</mescroll-uni>
</view>
</view>
.page-content {
position: fixed;
top: 64px;
left: 0;
right: 0;
bottom: 0px;
/* #ifdef H5 */
top:44px; // h5 无状态栏
/* #endif */
}
@前端进阶之旅: 代码已经复制到剪贴板
在样式方面需要注意 .page-content 向下偏移一个头部标题栏的高度才可实现内容区铺满。由于不同端屏幕展示起点不同，需要做样式的调整，先看一下头部标题栏组成：
头部标题栏固定高度(64px) = 状态栏/电池栏(20px) + 标题栏(44px)
H5 的渲染起点并没有状态栏，样式需要条件编译，H5 中页面实际的标题高度展示为 44px ，因此 page-content 内容区需向下偏移 44px ，而不是 64px。
H5 未进行条件编译的状态
/* #ifdef H5 */
top:44px; // h5 无状态栏
/* #endif */
@前端进阶之旅: 代码已经复制到剪贴板
添加条件编译后，page-content 内容区偏移程度与其他端保持一致（页面正常）。里面的长列表用 mescroll-uni 上拉加载组件解决浏览交互。
# swiper 组件展示滚动信息
关于这样的信息滚动展示的功能，可能会一大波小伙伴感觉有点吃力。其实分析这一块滚动的特性，可以联想到使用 swiper 组件便能轻松实现这样的一个小功能。
相关代码：
<!-- 日期信息bar -->
<view class="date-bar flex-box">
<view class="date-bar-left">
云村热评墙 <text class="iconfont"></text>
<swiper class="date-bar-swiper" :autoplay="true" :duration="500" :circular="true" :vertical="true">
<swiper-item v-for="(item, index) in dateMsg.msgList" :key="index">
{{item.name}}
</swiper-item>
</swiper>
</view>
<view>
<view>{{dateMsg.curDate[1]}}.</view>
<view class="date-bar-num">{{dateMsg.curDate[2]}}</view>
</view>
</view>
dateMsg: {
curDate: String(new Date()).split(' '),
msgList: [
{ name: '他是我见过最年少有为的人', id: ''},
{ name: '因为一个人而失眠，这真的好吗', id: ''},
{ name: '花开花落，没有悲愁怎么是少年？', id: ''},
],
},
.date-bar-swiper{
width:430rpx;
height:40rpx;
line-height: 40rpx;
color:#d0d2d3;
font-size: 24rpx;
}
@前端进阶之旅: 代码已经复制到剪贴板
这个功能对 swiper 属性进行设置 :autoplay="true" :duration="500" :circular="true" :vertical="true"，自动滚动，滑动动画时长500毫秒，采用衔接滑动，滑动方向为纵向。即可实现滚动信息展示。
# flexbox 瀑布流布局实现浏览卡片式产品
瀑布流又称瀑布流式布局，是一种比较流行的页
