小程序做一个能够左右滑动切换的多tab页面

主要原理：使用 <swiper> 和 <scroll-view> 组件
代码片段： https://developers.weixin.qq.com/s/mLx4FWmF757Z
GitHub: github.com/WozHuang/Miniprogram-Demo

小程序是轻量级的app，本应小巧精悍、用完即走，但是很多企业还是想要在这辆自行车上装发动机，要求拥有原生APP的操作体验。作为一介码农也只能默默想办法实现了，总不能说这东西我不想做吧

有兴趣可以在Github看看另外几个需求实现

效果图

这次要实现的是在APP中常见的多TAB滑动切换功能，没有什么可介绍的，直接上成果图：

本来如果在web端上实现，直接去找现成的轮子使用就可以了（避免重复造轮子，而且我造的轮子也不见得有别人的好）

奈何小程序与web还有些区别，现成的轮子都用不上，还是只能自己动手造一个了。幸运的是小程序自带的部分组件也能用得上，不用从头开始造。

组件结构

<page><bar />             // 顶部的tab选择器<swiper>            // 能够左右滑动的swiper组件<list>          // 某一个tab的列表<item />    // 数据项...</list>...</swiper>
</page>

组件结构也并不复杂，这样层层嵌套只是为了保证组件各司其职、利于维护。除了上面这些组件还有一个我常用的加载状态组件和tab组件，与这个需求的实现关系不大故没有写出来。

所利用的属性：

swiper
- 可以左右滑动
- 通过current属性切换到指定的项
- 监听手动滑动的change事件
scroll-view
- 用 scroll-into-view 属性滑动到指定的位置
- scroll-with-animation="{{true}}" 平滑滚动
- duration="{{200}}" 属性指定动画时长

存在的不足

从第一项切换到第三项时swiper会 1 -> 2 -> 3 的顺序切换，似乎没有直接切换的办法（设置swiper的duration属性为0可以瞬间切换，但是滑动的效果会变得奇怪）
切换动画偶尔会掉帧，原因未知，优化方式未知

转载于:https://www.cnblogs.com/wozho/p/10779598.html

小程序做一个能够左右滑动切换的多tab页面相关推荐

html仿今日头条下拉刷新,小程序仿今日头条带滑动切换的文章列表
小程序仿今日头条带滑动切换的文章列表发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...
uniappp小程序做一个红包雨的功能
uniappp小程序做一个红包雨的功能需求: 首先,您需要在页面中添加一个画布元素,用于绘制红包雨效果. 在页面加载完成后,使用JavaScript中的setInterval()方法定时执行绘制红包 ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
微信小程序做一个调查问卷
用微信小程序做了一个调查问卷功能描述: 用户一天只能进行一次问卷调查=>用户登录功能获取用户意见信息题目分为单选题.多选题.简答题 *设置有其他选项,可进行手动输入选项多选题选择个数设置 ...
使用微信小程序做一个简易的下拉框，无动画效果，纯原生写法（下拉列表框）
最近在开发的时候,需要使用下拉的效果,但是之前并没有进行书写过,今天做一个简单的demo,来记录一下微信小程序开发的下拉框效果. 微信小程序和jquery最大的区别就是是否操作dom, 微信小程序无需 ...
微信小程序|做一个底部评论视图
使用微信小程序开发工具做一个和微信一样的评论视图: 首先我们捋一下这个视图的结构: 黑色的容器最大包含三个横向并列的三个红色的容器第一个红色的容器包含两个橘色的纵向并列的容器. 这样,ind ...
干洗店小程序做一个预约小程序有什么优点
洗衣店洗鞋店为什么要开发一个下单小程序冬季衣服厚羽绒服和大衣在家不好清洗,不少人会选择送去干洗店,为了提高竞争力也提高服务水平,不少店铺提供干洗衣物上门取送的服务,而开发小程序,不仅能大大帮助干洗店 ...
uni-app小程序利用动画做出左右滑动切换的效果
需求:场景类似驾校刷题,手指从左往右大幅度滑动切换至上一题,手指从右往左大幅度滑动切换至下一题.已答题目直接显示正确与否和答案状态,所选答案不存在后端,后端只保存该题是否答过.答对还是答错的状态.获取 ...
微信小程序做一个调查问卷（二）
即将不定期的开放代码核心代码呈现源码下载在微信小程序如何展示富文本编辑器设置的内容多使用缓存技术,防止过多无效的访问题目分为单选题.多选题.简答题设置有其他选项,可进行手动输入选项多选题 ...

小程序做一个能够左右滑动切换的多tab页面

效果图

组件结构

存在的不足

小程序做一个能够左右滑动切换的多tab页面相关推荐

最新文章

热门文章