scroll属性使用

当有垂直方向的滚动条的时候，获取的数据才是正确的。

scrollHeight 获取的是整个页面的高度，包括页面看不到的部分

scrollTop 是被滑动到看不到的部分到视图顶部的距离

clientHeight 是显示在页面上的高度（整个不需要有垂直滚动条，每个元素都可以获取到这个数据，当没有滚动条的时候获取的是元素的高度）

借用知乎网友的一张图

下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

原生端 TabLayout 常见的功能就是我们的目标效果，所以 目标效果 如下：

通过了解小程序组件及技术支持，选定通过 scroll-view 、swiper 、swiper-item 、movable-area 、movable-view 配合 插槽 和 抽象节点 来实现自定义组件 tab-layout 。

具体如下图所示 ：

主要实现（点击跳转查看源码）

1复制 tab-layout 组件到项目中 （点击跳转至源码 TabLayout 目录）

4在布局文件中使用 TabLayout 组件，并通过抽象节点 generic:item-tab 和 generic:item-page 分别与自定义的 Tab 和 Page 绑定

5使用自定义属性 indexAreaHeight 为 Index 及其活动区域设置高度

6使用自定义属性 tabList 设置数据源，根据数据源将自动生成对应数量的 Tab 和 Page

7按需选择可采用插槽 slot = "index" 或自定义属性 indexStyle 设置 Index 的样式

布局文件 indexwxml 中：

样式文件 indexwxss 中

布局文件 indexwxml 中

PS： 还有一个很重要的方法 onPageUpdata ，用于抽象节点 item-tab 和 item-page 通知父节点 tab-layout 刷新数据，在子控件中通过 thistriggerEvent("updata") 触发

可能出现问题：

1 当 item-page 中存在竖直滚动的 scroll-view 时出现滑动冲突该如何解决？

在 item-page 组件 attached 方法中按需为 scroll-view 设置固定高度或占满屏幕剩余位置 （点击跳转查看参考写法）

2当 item-page 或 item-tab 中调用 thissetData ( ) 之后，发现自定义属性 item 获取值为 null

出现该种情况，应在 thissetData ( ) 之后，执行 thistriggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

3如何实现 " 懒加载 " ，即当 Tab 首次被选中时，才进行对应 Page 的数据加载？

为自定义组件 item-page 设置一个懒加载标志位暂定为 isLoadData ，通过订阅自定义属性 currentIndex ，在 currentIndex 属性变化或组件进行到 attached 生命周期时，通过判断 isLoadData 和 currentIndex 是否与 position 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

在小程序越来越普及的现状下，如何使得小程序能给用户带来更完善的显示效果和使用体验，是每一个开发者都应该力尽其责的事。鉴于本人当前对小程序和网页端的熟悉程度，该组件或许还存在很多瑕疵，如有更好的见解或建议，欢迎留言。

最近在做一个uniapp的项目的时候，碰到了一个Tab选项卡的需求，我立马就想到了曾经在视频里看到的利用swiper实现丝滑选项卡的功能。

但是很遗憾，我并没有光看就会的本事，本着遇事不决先百度的原则，就在百度找了一篇真实有用，但是有小小bug的，下面是原po地址：

uni-app使用swiper切换页面每个滑块高度自适应

懒得点的可以接着往下看哈，我也会把详细步骤以及碰到的bug贴出来。下面是我改造后的效果图

首先就是Tab选项卡的点击切换块，这里我是用了小程序自带的scroll-view来实现的，同时给该元素添加scroll-into-view属性来实现点击跟踪（其实这效果不是特别好，我期望的效果是点击这个的时候还留点位置给上一个，但是我太菜了加上为了省事所以就直接用这个了）

scroll-into-view的用法可自行查阅官方文档

接着是swiper标签块，这里因为实现都一样，所以我就直接把原博客那边的贴过来了，大家根据自己的需求更改类名及swiper-item内部的组件即可

这里有个注意点，就是要给swiper-item内部的组件(盒子)一个相同的类名，后面获取高度时需要用到。

初始数据方面，这里我也把我的初始数据贴出来，大家根据需求自行修改即可

后面的方法本来想一个个贴的，但是发现好像有点乱，所以就直接全贴出来了，里面的逻辑大伙应该能理清吧哈哈

到这里js部分也结束了，最后是css部分，我就是在这里踩坑的。原博最后面说要给swiper-item里面的组件设置一个min-height: 100%。这样设置之后就会有个问题，也就是

因此大家在初始化css数据的时候需要注意一下，这里我也把我的初始css贴出来，大家根据需求自行修改即可

到这里这一块的内容就全部结束了，噢对了关于setSwiperHeight里面获取dom元素的方法，也就是

unicreateSelectorQuery() 。这玩意说实话我也搞不太懂，总之就跟selectorQuery选择器差不多，CVM大法：复制粘贴，然后修改数据即可。

第一次正经写文还是很紧张的哈哈，希望能帮到有需要的人。谢谢各位

解决方法如下：

1、在swiper标签中的view标签改成scroll-view标签。

2、动态获取窗口高度应用到swiper和所有的scroll-view标签。事实上，内容显示不全就是因为获取的高度过小，这样就可以解决微信小程序中显示不全的问题。WordPress是使用PHP语言开发的博客平台，用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。

以上就是关于scroll属性使用全部的内容，包括:scroll属性使用、微信小程序实现 TabLayout 并带有过渡效果、【uni-app】记一个 scroll-view +swiper实现顺滑Tab选项卡等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！