資訊專欄INFORMATION COLUMN
摘要：最近公司要開發(fā)一套線上付費(fèi)的會(huì)員，是和原生一起混合式的開發(fā)，有一個(gè)會(huì)員權(quán)益模塊是全部使用開發(fā)，想給大家看下需要做成的案例其實(shí)沒(méi)什么難點(diǎn)，主要就是功能有頂部導(dǎo)航欄可以左右滑動(dòng)，點(diǎn)擊某一個(gè)欄目按鈕內(nèi)容跟著切換并且加載一次之后，第二次就重新加載被
最近公司要開發(fā)一套線上付費(fèi)的會(huì)員App，是和原生一起混合式的開發(fā)，有一個(gè)會(huì)員權(quán)益模塊是全部使用H5開發(fā)，想給大家看下需要做成的案例：
其實(shí)沒(méi)什么難點(diǎn)，主要就是功能有：
1、頂部導(dǎo)航欄可以左右滑動(dòng)，點(diǎn)擊某一個(gè)欄目按鈕內(nèi)容跟著切換；
2、并且加載一次之后，第二次就重新加載；
3、被點(diǎn)擊的欄目按鈕居中顯示，左右會(huì)跟隨點(diǎn)擊的位置滾動(dòng)
4、手機(jī)物理返回按鍵對(duì)路由的影響
感覺(jué)自己表達(dá)不是特別的清楚，來(lái)一張動(dòng)圖把：
好了 廢話不多說(shuō) 開始說(shuō)代碼相關(guān)的東西了：
頂部導(dǎo)航的實(shí)現(xiàn)方案：
使用 swiper3 實(shí)現(xiàn)導(dǎo)航回彈和左右滑動(dòng)效果
html內(nèi)容：：
我使用了vuejs的循環(huán)渲染li
swiper.js的調(diào)用：
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;
// 被點(diǎn)擊slide的中心點(diǎn)
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)
}
})
上面的代碼就可以實(shí)現(xiàn)1、3的要求了 我上傳的代碼不是很全，細(xì)節(jié)代碼我會(huì)附上github地址。
我們接下來(lái)看第2個(gè)要求，就是點(diǎn)擊加載一次之后，再次點(diǎn)擊不會(huì)重新加載，這里我使用了vue-router
結(jié)構(gòu)如下：
頭部導(dǎo)航在主路由里面，router-view顯示每個(gè)欄目對(duì)應(yīng)的內(nèi)容，可以給每個(gè)路由設(shè)置keep-alive，實(shí)現(xiàn)條件3。
從事移動(dòng)端web開發(fā)的小伙伴們應(yīng)該對(duì)手機(jī)的物理返回鍵“深惡痛絕”把，同樣我們做完了上面那個(gè)demo，當(dāng)你點(diǎn)擊安卓的物理返回鍵的時(shí)候，demo會(huì)一步一步的返回，顯然，這不是我們要的結(jié)果，我們要的效果應(yīng)該是“指哪打哪，自我掌控”
1、首先，我們新建一個(gè) global變量 這個(gè)用于記錄路由的訪問(wèn)來(lái)源
2、在對(duì)應(yīng)的路由文件里面添加路由衛(wèi)士：
3、在mounted里面配置popstate和配置goBack方法：
4、銷毀組件的時(shí)候 移除popstate
我的三個(gè)路由的名稱分別為：mpos、payPhoneBill、movieTicket，接下來(lái)看動(dòng)圖：
可以看到 我們只需要判斷 global.beforeRouteName 和 路由的名稱作為判斷條件，就可以做任何操作和交互了，可以自己很好的控制物理鍵啦！
demo在線預(yù)覽：
demo的代碼地址：https://github.com/yulongwuko...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109141.html
摘要：目前，京東云金秋上云特惠也只是針對(duì)企業(yè)用戶的，云主機(jī)核限量秒殺僅元年。除非有相反證據(jù)證明外，用戶參與活動(dòng)所獲得的全部權(quán)益和相應(yīng)責(zé)任，均歸屬于參與活動(dòng)的該京東云賬號(hào)所對(duì)應(yīng)的實(shí)名認(rèn)證主體。2021京東云金秋上云特惠早就開始了!一直忘記給大家傳達(dá)，不好意思哦，不過(guò)京東云體量小，買的個(gè)人用戶不并不多。目前，2021京東云金秋上云特惠也只是針對(duì)企業(yè)用戶的，云主機(jī)2核4G限量秒殺,僅155元/年。大家可...
摘要：修改記錄版本的通知欄消息功能上并未發(fā)生變化，右上角的縮減為了。增加了，允許可穿戴設(shè)備遠(yuǎn)程控制通知欄消息。鎖屏狀態(tài)下，可以控制通知欄消息的隱私程度。但是谷歌規(guī)定，自定義布局展示的通知欄消息最大高度是。具體適配不正常的機(jī)型有。 此文已由作者黎星授權(quán)網(wǎng)易云社區(qū)發(fā)布。 歡迎訪問(wèn)網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營(yíng)經(jīng)驗(yàn)。 由于歷史原因，Android在發(fā)布之初對(duì)通知欄Notification的設(shè)...
摘要：服務(wù)教程在它提出十多年后的今天，已經(jīng)成為最重要的應(yīng)用技術(shù)之一。全方位提升網(wǎng)站打開速度前端后端新的技術(shù)如何在內(nèi)完整打開網(wǎng)站會(huì)直接影響用戶的滿意度及留存率，在前端后端數(shù)據(jù)緩存加速等等方面都有諸多可以提升。 HTTPS 原理剖析與項(xiàng)目場(chǎng)景 最近手頭有兩個(gè)項(xiàng)目，XX 導(dǎo)航和 XX 產(chǎn)業(yè)平臺(tái)，都需要使用 HTTPS 協(xié)議，因此，這次對(duì) HTTPS 協(xié)議做一次整理與分享。 使用緩存應(yīng)該注意哪些問(wèn)題...
摘要：服務(wù)教程在它提出十多年后的今天，已經(jīng)成為最重要的應(yīng)用技術(shù)之一。全方位提升網(wǎng)站打開速度前端后端新的技術(shù)如何在內(nèi)完整打開網(wǎng)站會(huì)直接影響用戶的滿意度及留存率，在前端后端數(shù)據(jù)緩存加速等等方面都有諸多可以提升。 HTTPS 原理剖析與項(xiàng)目場(chǎng)景 最近手頭有兩個(gè)項(xiàng)目，XX 導(dǎo)航和 XX 產(chǎn)業(yè)平臺(tái)，都需要使用 HTTPS 協(xié)議，因此，這次對(duì) HTTPS 協(xié)議做一次整理與分享。 使用緩存應(yīng)該注意哪些問(wèn)題...
閱讀 1973·2023-04-26 01:59
閱讀 3276·2021-10-11 11:07
閱讀 3307·2021-09-22 15:43
閱讀 3388·2021-09-02 15:21
閱讀 2572·2021-09-01 10:49
閱讀 912·2019-08-29 15:15
閱讀 3100·2019-08-29 13:59
閱讀 2839·2019-08-26 13:36
