微信小程序顶部标签页的问题

offsider 2017-01-21 12:16:31

京东的微信小程序（京东购物）中的“我的订单”列表上面的标签页是怎么实现的？

关键是下面的列表滚动条不好实现，懂的进来。

...全文

705 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

叶飘尾 2017-02-17

打赏
举报

回复

标签页用view就行了下面滚动的用 scroll-view

于传统网页开发中的标签页切换效果不同的是，小程序的标签页切换更接近原生APP的交互体验！也就是可以通过左右滑动页面进行切换，类似于网页开发中的焦点图切换的效果。 ——这当然是通过微信小程序强大的组件和API实现的。目前为止，笔者知道的可以“完美”实现这一功能的，有两种方式。 1、Swiper组件方式实现如图顶部的3个标签页标题用数字0、1、2来表示——这也代表绑定后页面的位置。当用户向左滑...

欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！问题描述在使用...

欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述如何在小程序实现一个顶部导航标签栏并展示对应页面...

一概述创建项目并进行初始化标签页结构分析 swiper组件介绍二创建项目并进行初始化 2.1 创建项目使用微信开发者工具创建空白项目。创建成功后，项目下有3个文件路径说明 app.js 应用程序的逻辑文件 app.json 应用程序的配置文件 project.config.json 项目配置文件 2.2 项目说明 app.js为应用程序的逻辑文件，此时内容为空 app.json中输入如下内容，保存后刷新，生成index页面相关文件 { "page

外层的view添加2个事件，一个是触摸开始，一个触摸结束，在事件里可以根据target的坐标判断是否发生左右滑动，以此改变页面及标签的转变。发生改变时，标签动态改变active样式，内容则用translate实现左右平移。 view class="page" catch:touchstart="pageTouchStartHandler" catch:touchend="pageTouchEndH

3,160

社区成员

3,829

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章