微信小程序实现 TabLayout 并带有过渡效果

下图是小程序 小米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 相等来进行数据加载并调整标志位 （点击跳转查看参考写法）

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

在设计小程序页面的时候，想要设置滚动页面左右滚动，写了scroll-view的scroll-x，但是还是不能左右滚动。测试很多style样式，最后发现设置了min-width就可以实现滚动。

class样式：

效果如下：

如果您的滚动屏小程序无法打开，可以尝试以下几种方法：

1 检查网络连接：确保您的手机已经连接到互联网，并且信号良好。

2 清除缓存和数据：进入手机设置-应用管理-找到滚动屏小程序并点击，选择清除缓存和数据。然后重新启动该小程序。

3 更新微信版本：如果您使用的是微信打开滚动屏小程序，请检查是否有新版本可供更新。在微信中点击“我”-“设置”-“关于”，查看当前版本是否为最新版。

4 重启手机：有时候只需要简单地重启一下手机就能解决问题。

5 卸载并重新安装：如果以上方法都没有效果，可以尝试卸载该小程序并重新下载安装。

如果上述方法仍然无法解决问题，建议联系相关技术支持或者寻求其他专业人士帮助处理。

最近公司开发的小程序中，用到了小程序的picker组件，写了个二级级联动（三级联动同理）。从页面上看，明显数据已经是加载上去了，而且也确实是正确的

从这张图上可以看到，明明第二列的数组已经设置是长度为一个，但是在页面上，却显示了两个。

排查下来，就是文本中，name不能重名。必须保持是唯一的。

当我们把name设置成唯一值的时候，就不会有问题了。

scroll-view为滚动视图，分为水平滚动和垂直滚动。

注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。

滚动视图常用的地方一般都是Item项比较多的界面，！

以上就是关于微信小程序实现 TabLayout 并带有过渡效果全部的内容，包括:微信小程序实现 TabLayout 并带有过渡效果、小程序滚动页面不能滚动解决方案一、滚动屏小程序打不开怎么办等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！