一个类似于京东Plus权益介绍的小功能

codergarden 发布于2019-08-05 18:13 / 2411人阅读

摘要：最近公司要开发一套线上付费的会员，是和原生一起混合式的开发，有一个会员权益模块是全部使用开发，想给大家看下需要做成的案例其实没什么难点，主要就是功能有顶部导航栏可以左右滑动，点击某一个栏目按钮内容跟着切换并且加载一次之后，第二次就重新加载被

最近公司要开发一套线上付费的会员App，是和原生一起混合式的开发，有一个会员权益模块是全部使用H5开发，想给大家看下需要做成的案例：

其实没什么难点，主要就是功能有：
1、顶部导航栏可以左右滑动，点击某一个栏目按钮内容跟着切换；
2、并且加载一次之后，第二次就重新加载；
3、被点击的栏目按钮居中显示，左右会跟随点击的位置滚动
4、手机物理返回按键对路由的影响

感觉自己表达不是特别的清楚，来一张动图把：

好了废话不多说开始说代码相关的东西了：

顶部导航的实现方案：

使用 swiper3 实现导航回弹和左右滑动效果

html内容：：


            
                
                    
                        
                            {{i.title}}

我使用了vuejs的循环渲染li

swiper.js的调用：

               var myNav = new Swiper("#nav", {
                    freeMode: true,
                    freeModeMomentumRatio: 0.5,
                    slidesPerView: "3",
                });
                let swiperWidth = myNav.container[0].clientWidth
                let maxTranslate = myNav.maxTranslate();
                let maxWidth = -maxTranslate + swiperWidth / 2

                myNav.on("tap",function(swiper,e){
                    
                    let slide = swiper.slides[swiper.clickedIndex]
                    let slideLeft = slide.offsetLeft
                    let slideWidth = slide.clientWidth
                    let slideCenter = slideLeft + slideWidth / 2;

                    // 被点击slide的中心点
                    myNav.setWrapperTransition(300)
                    if (slideCenter < swiperWidth / 2) {
                        myNav.setWrapperTranslate(0)
                    } else if (slideCenter > maxWidth) {
                        myNav.setWrapperTranslate(maxTranslate)
                    } else {
                        let nowTlanslate = slideCenter - swiperWidth / 2
                        myNav.setWrapperTranslate(-nowTlanslate)
                    }

                })

上面的代码就可以实现1、3的要求了我上传的代码不是很全，细节代码我会附上github地址。

我们接下来看第2个要求，就是点击加载一次之后，再次点击不会重新加载，这里我使用了vue-router

结构如下：

头部导航在主路由里面，router-view显示每个栏目对应的内容，可以给每个路由设置keep-alive，实现条件3。

从事移动端web开发的小伙伴们应该对手机的物理返回键“深恶痛绝”把，同样我们做完了上面那个demo，当你点击安卓的物理返回键的时候，demo会一步一步的返回，显然，这不是我们要的结果，我们要的效果应该是“指哪打哪，自我掌控”

1、首先，我们新建一个 global变量这个用于记录路由的访问来源

2、在对应的路由文件里面添加路由卫士：

3、在mounted里面配置popstate和配置goBack方法：

4、销毁组件的时候移除popstate

我的三个路由的名称分别为：mpos、payPhoneBill、movieTicket，接下来看动图：

可以看到我们只需要判断 global.beforeRouteName 和路由的名称作为判断条件，就可以做任何操作和交互了，可以自己很好的控制物理键啦！

demo在线预览：

demo的代码地址：https://github.com/yulongwuko...

私有云专线服务类似于类似于vps Vps类似于类似于云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60779.html

一个类似于京东Plus权益介绍的小功能

摘要：最近公司要开发一套线上付费的会员，是和原生一起混合式的开发，有一个会员权益模块是全部使用开发，想给大家看下需要做成的案例其实没什么难点，主要就是功能有顶部导航栏可以左右滑动，点击某一个栏目按钮内容跟着切换并且加载一次之后，第二次就重新加载被最近公司要开发一套线上付费的会员App，是和原生一起混合式的开发，有一个会员权益模块是全部使用H5开发，想给大家看下需要做成的案例： showIm...

acrazing 2019-08-26 13:36 评论0 收藏0
2021京东云金秋上云特惠：企业上云专享受,云主机2核4G限量秒杀,仅155元/年

摘要：目前，京东云金秋上云特惠也只是针对企业用户的，云主机核限量秒杀仅元年。除非有相反证据证明外，用户参与活动所获得的全部权益和相应责任，均归属于参与活动的该京东云账号所对应的实名认证主体。2021京东云金秋上云特惠早就开始了!一直忘记给大家传达，不好意思哦，不过京东云体量小，买的个人用户不并不多。目前，2021京东云金秋上云特惠也只是针对企业用户的，云主机2核4G限量秒杀,仅155元/年。大家可...

neuSnail 2021-09-10 11:24 评论0 收藏0
Android通知栏介绍与适配总结（上篇）

摘要：修改记录版本的通知栏消息功能上并未发生变化，右上角的缩减为了。增加了，允许可穿戴设备远程控制通知栏消息。锁屏状态下，可以控制通知栏消息的隐私程度。但是谷歌规定，自定义布局展示的通知栏消息最大高度是。具体适配不正常的机型有。此文已由作者黎星授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。由于历史原因，Android在发布之初对通知栏Notification的设...

fai1017 2019-06-28 11:02 评论0 收藏0
后端技术精选

摘要：服务教程在它提出十多年后的今天，已经成为最重要的应用技术之一。全方位提升网站打开速度前端后端新的技术如何在内完整打开网站会直接影响用户的满意度及留存率，在前端后端数据缓存加速等等方面都有诸多可以提升。 HTTPS 原理剖析与项目场景最近手头有两个项目，XX 导航和 XX 产业平台，都需要使用 HTTPS 协议，因此，这次对 HTTPS 协议做一次整理与分享。使用缓存应该注意哪些问题...

GitCafe 2019-06-28 16:13 评论0 收藏0
后端技术精选

摘要：服务教程在它提出十多年后的今天，已经成为最重要的应用技术之一。全方位提升网站打开速度前端后端新的技术如何在内完整打开网站会直接影响用户的满意度及留存率，在前端后端数据缓存加速等等方面都有诸多可以提升。 HTTPS 原理剖析与项目场景最近手头有两个项目，XX 导航和 XX 产业平台，都需要使用 HTTPS 协议，因此，这次对 HTTPS 协议做一次整理与分享。使用缓存应该注意哪些问题...

explorer_ddf 2019-06-24 17:55 评论0 收藏0