国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一個類似于京東Plus權益介紹的小功能

acrazing / 2828人閱讀

摘要：最近公司要開發一套線上付費的會員，是和原生一起混合式的開發，有一個會員權益模塊是全部使用開發，想給大家看下需要做成的案例其實沒什么難點，主要就是功能有頂部導航欄可以左右滑動，點擊某一個欄目按鈕內容跟著切換并且加載一次之后，第二次就重新加載被

最近公司要開發一套線上付費的會員App，是和原生一起混合式的開發，有一個會員權益模塊是全部使用H5開發，想給大家看下需要做成的案例：

其實沒什么難點，主要就是功能有：
1、頂部導航欄可以左右滑動，點擊某一個欄目按鈕內容跟著切換；
2、并且加載一次之后，第二次就重新加載；
3、被點擊的欄目按鈕居中顯示，左右會跟隨點擊的位置滾動
4、手機物理返回按鍵對路由的影響

感覺自己表達不是特別的清楚，來一張動圖把：

好了 廢話不多說 開始說代碼相關的東西了：

頂部導航的實現方案：

使用 swiper3 實現導航回彈和左右滑動效果

html內容：：

我使用了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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109141.html

相關文章

  • 2021京東云金秋上云特惠：企業上云專享受,云主機2核4G限量秒殺,僅155元/年

    摘要：目前，京東云金秋上云特惠也只是針對企業用戶的，云主機核限量秒殺僅元年。除非有相反證據證明外，用戶參與活動所獲得的全部權益和相應責任，均歸屬于參與活動的該京東云賬號所對應的實名認證主體。2021京東云金秋上云特惠早就開始了!一直忘記給大家傳達，不好意思哦，不過京東云體量小，買的個人用戶不并不多。目前，2021京東云金秋上云特惠也只是針對企業用戶的，云主機2核4G限量秒殺,僅155元/年。大家可...

    neuSnail 評論0 收藏0

  • Android通知欄介紹與適配總結（上篇）

    摘要：修改記錄版本的通知欄消息功能上并未發生變化，右上角的縮減為了。增加了，允許可穿戴設備遠程控制通知欄消息。鎖屏狀態下，可以控制通知欄消息的隱私程度。但是谷歌規定，自定義布局展示的通知欄消息最大高度是。具體適配不正常的機型有。 此文已由作者黎星授權網易云社區發布。 歡迎訪問網易云社區，了解更多網易技術產品運營經驗。 由于歷史原因，Android在發布之初對通知欄Notification的設...

    fai1017 評論0 收藏0

  • 后端技術精選

    摘要：服務教程在它提出十多年后的今天，已經成為最重要的應用技術之一。全方位提升網站打開速度前端后端新的技術如何在內完整打開網站會直接影響用戶的滿意度及留存率，在前端后端數據緩存加速等等方面都有諸多可以提升。 HTTPS 原理剖析與項目場景 最近手頭有兩個項目，XX 導航和 XX 產業平臺，都需要使用 HTTPS 協議，因此，這次對 HTTPS 協議做一次整理與分享。 使用緩存應該注意哪些問題...

    GitCafe 評論0 收藏0

  • 后端技術精選

    摘要：服務教程在它提出十多年后的今天，已經成為最重要的應用技術之一。全方位提升網站打開速度前端后端新的技術如何在內完整打開網站會直接影響用戶的滿意度及留存率，在前端后端數據緩存加速等等方面都有諸多可以提升。 HTTPS 原理剖析與項目場景 最近手頭有兩個項目，XX 導航和 XX 產業平臺，都需要使用 HTTPS 協議，因此，這次對 HTTPS 協議做一次整理與分享。 使用緩存應該注意哪些問題...

    explorer_ddf 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<