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

微信小程序实现 TabLayout 并带有过渡效果,第1张

下图是小程序 小米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 的样式

布局文件 index.wxml 中:

样式文件 index.wxss 中

布局文件 index.wxml 中

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

可能出现问题:

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

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

2.当 item-page 或 item-tab 中调用 this.setData ( ) 之后,发现自定义属性 item 获取值为 null ?

出现该种情况,应在 this.setData ( ) 之后,执行 this.triggerEvent("updata") 触发 tab-layout 的 onPageUpdata 方法重新得到 item 值

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

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

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

第一阶段:Web基础

1.HTML

知识要点:web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签

2.CSS+布局

知识要点:CSS基本语法、基本选择器、复合选择器、背景吵兆图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器

第二阶段:JavaScript

3.ECMA基础

知识要点:ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String

4.DOM

知识要点:DOM模型、节点类型、节点的基本 *** 作、JS *** 作样式表、克隆节点、获取中腔坐标位置、获取元素尺寸、节点的各种属性和方法。

5.BOM+jQuery

知识要点:History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架

第三阶段:企业级框架

6.vue框架基本语法

知识要点:vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3

7.vue案例

知识要点:将知识点融会贯通到案例中。

8.react基本语法

知识要点:react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux

9.react案例

知识要点:将知识点融会贯通到案例中

新增内容:微信小程序及uni-app框架卖碰衫

知识要点:

小程序框架(配置/程序与页面注册/路由),开发者工具

小程序框架组件学习(基础/视图/表单/地图/媒体/导航/开发能力)

小程序框架组件学习(地图/媒体/导航/开发能力)

小程序API(基础/路由/界面/网络/数据缓存/位置服务)

小程序API(设备/媒体/开放接口/授权/登录/支付)

第四阶段:前端全栈

10.Node服务器与数据库及框架

知识要点:Node原生模块、跨域、安全校验、数据加密、数据库基本 *** 作、express框架、koa框架

11.Node 项目周/WebPack

知识要点:需求、效果图、编码


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12490467.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-25
下一篇 2023-05-25

发表评论

登录后才能评论

评论列表(0条)

保存