前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序|实现界面滑动切换

微信小程序|实现界面滑动切换

作者头像
算法与编程之美
发布2020-02-21 14:28:28
3.7K0
发布2020-02-21 14:28:28
举报
文章被收录于专栏:算法与编程之美

问题描述

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

解决方案

图 1 标签页切换

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

问题解决

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

<swiper> <swiper-item style=”background:#aaa”>0</swiper-item> <swiper-item style=”background:#bbb”>1</swiper-item> <swiper-item style=”background:#ccc”>2</swiper-item> </swiper>

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

微信小程序并没有严格规定<swiper-item>标签内可以嵌套哪些组件,如果放入image组件,就实现了轮播图效果;如果放入一块页面内容,就实现了标签页切换的效果了。

Include代码引用

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

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

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

下面演示<include>标签的使用:

<include src=”index.wxml”/> //引入index.wxml文件 <view>body</view> <include scr=”logs.wxml”/> //引入logs.wxml文件

结语

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

END

实习编辑 | 王文星

责 编 | 李 娇

where2go 团队

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-01-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 算法与编程之美 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档