实现界面滑动切换

欢迎点击「算法与编程之美」关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

在许多用户体验效果较好的微信小程序中，用户通过左右滑动界面也能实现页面的切换，方便了用户使用，那它们是如何实现的呢？

解决方案

图1标签页切换

在图1中，顶部的3个标签页标题用、1、2来表示，当前显示为标签页。当用户向左滑动页面时，标签页就会被划到左边的不可见区域，而标签页1被划入可见区域。如果用户在向右滑动页面，则标签页1被滑动到右边的不可见区域，标签页被划入可见区域。

问题解决

Swiper组件是滑块视图容器，经常用于实现轮播图，现在我们将他用于实现标签页的切换。代码如下所示：

在上述代码中，标签是外层容器，里面有3个标签，表示当前一共有3项，在初始状态下只显示第1项，向左滑动显示第2项，再向右滑动可以返回第1项。

Include代码引用

在wxml文件中可以使用标签引用其他文件中的代码，相当于把引用的代码复制到标签的位置。标签的用途主要有两点：

当一个wxml页面中的代码过多时，会给代码的维护带来麻烦，有时为了找到某一处代码可能翻阅几百行。而利用将代码拆分到多个文件中，这样就可以方便的查找代码。

当多个wxml页面中有相同的部分时，可以将这些公共的部分抽取出来，保存到一个单独的wxml文件中，然后在用到的地方通过引入。这样可以减少重复的代码，并且修改时只需要修改一次。

下面演示标签的使用：

结语

在调试代码的过程中会遇上很多问题，有可能一个错误你调试了大半天还是没能解决，这个时候我们要做的就是暂时放下它，等再过一会再来仔细的分析错误原因和代码逻辑。

END

实习编辑 | 王文星

责 编 | 李 娇