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

資訊專欄INFORMATION COLUMN

記微信網(wǎng)頁開發(fā)單頁面返回不刷新的實現(xiàn)

cuieney / 1165人閱讀

摘要:使用語法與要跳轉(zhuǎn)到的對應(yīng)的狀態(tài)信息。頁面名字,方便調(diào)試。要跳轉(zhuǎn)到的地址,不能跨域,對于單頁應(yīng)用來說沒用,傳空即可。

需求

在微信網(wǎng)頁開發(fā)中,點擊返回按鈕不刷新頁面,進行頁面切換,且實現(xiàn)"傳值"功能.

問題由來

在做微信網(wǎng)頁開發(fā)時,由于微信的左上角返回按鈕會返回上一個頁面并且刷新,無法做成打開頁面選擇內(nèi)容后關(guān)閉當(dāng)前頁面,并且給前一個頁面?zhèn)髦档墓δ?

實現(xiàn)方法

想實現(xiàn)此功能一開始想到的是不進行頁面跳轉(zhuǎn)了,把選擇內(nèi)容的頁面也做在當(dāng)前頁面里,然后使用js來控制顯隱.

// 點擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");
})

在微信實際頁面中,由于整頁顯示,用戶會點擊到左上角返回按鈕,會造成關(guān)閉頁面.

需要對返回按鈕進行一些操作來修改返回后的效果.

pushState

history提供了一個方法pushState,可以手動的添加頁面進棧。

使用語法:

history.pushState(state, title, url);
state:Object,與要跳轉(zhuǎn)到的URL對應(yīng)的狀態(tài)信息。
title:頁面名字,方便調(diào)試。
url:要跳轉(zhuǎn)到的URL地址,不能跨域,對于單頁應(yīng)用來說沒用,傳空即可。

修改點擊事件

// 點擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");
    // 歷史記錄中插入一條記錄,防止微信返回按鈕會關(guān)閉頁面
    var state = {
        title: "選擇學(xué)校",
        url: "#school" // 這個url可以隨便填,只是為了不讓瀏覽器顯示的url地址發(fā)生變化,對頁面其實無影響
    };
    window.history.pushState(state, state.title, state.url);
})
onpopstate

history.go和history.back(包括用戶按瀏覽器歷史前進后退按鈕)觸發(fā),并且頁面無刷的時候(由于使用pushState修改了history)會觸發(fā)popstate事件,事件發(fā)生時瀏覽器會從history中取出URL和對應(yīng)的state對象替換當(dāng)前的URL和history.state

對返回按鈕添加監(jiān)聽

// 添加微信返回前進事件監(jiān)聽
window.addEventListener("popstate", function(e) {
    // 選擇地址頁面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
}, false);

此時進入選擇地址頁面后,點擊返回按鈕,能實現(xiàn)頁面切換

選擇學(xué)校后也要實現(xiàn)該操作,用 history.go(-1);實現(xiàn)手動去除歷史記錄中添加的記錄

// 選擇學(xué)校
mui("#choose-school").on("tap", "li", function() {
    var schoolName = this.querySelector(".em-left-name").innerText;
    var schoolAddress = this.querySelector(".em-left-address").innerText;
    document.querySelector(".em-left-name").innerText = schoolName;
    document.querySelector(".em-left-address").innerText = schoolAddress;

    // 手動去除歷史記錄中插入的記錄
    history.go(-1);
    // 選擇地址頁面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
})

修改完善代碼,實現(xiàn)后退,前進功能

/**
 * @description 初始化監(jiān)聽
 */
initListeners: function() {
    var self = this;

    // 添加微信返回前進事件監(jiān)聽
    window.addEventListener("popstate", function(e) {
    //處于選擇學(xué)校頁面
    if(self.chooseSchool) {
        // 選擇地址頁面隱藏
        document.querySelector(".em-address").classList.add("mui-hidden");
        // 簽到頁面顯示
        document.querySelector(".em-sign").classList.remove("mui-hidden");
    }
    
    // 頁面前進后如果為選擇學(xué)校頁面
    if(/#school/.test(window.location.href)){
        self.chooseSchool = true;
        document.querySelector(".em-sign").classList.add("mui-hidden");
        document.querySelector(".em-address").classList.remove("mui-hidden");
    }

}, false);


// 點擊修改學(xué)校按鈕
document.querySelector(".em-school-right").addEventListener("tap", function() {
    self.chooseSchool = true;
    document.querySelector(".em-sign").classList.add("mui-hidden");
    document.querySelector(".em-address").classList.remove("mui-hidden");

    // 歷史記錄中插入一條記錄,防止微信返回按鈕會關(guān)閉頁面
    var state = {
        title: "選擇學(xué)校",
        url: "#school" // 這個url可以隨便填,只是為了不讓瀏覽器顯示的url地址發(fā)生變化,對頁面其實無影響
    };
    window.history.pushState(state, state.title, state.url);
})

// 選擇學(xué)校
mui("#choose-school").on("tap", "li", function() {
    self.chooseSchool = false;
    var schoolName = this.querySelector(".em-left-name").innerText;
    var schoolAddress = this.querySelector(".em-left-address").innerText;
    document.querySelector(".em-left-name").innerText = schoolName;
    document.querySelector(".em-left-address").innerText = schoolAddress;

    // 手動去除歷史記錄中插入的記錄
    history.go(-1);
    // 選擇地址頁面隱藏
    document.querySelector(".em-address").classList.add("mui-hidden");
    // 簽到頁面顯示
    document.querySelector(".em-sign").classList.remove("mui-hidden");
})
}
實現(xiàn)效果

感覺通過這些操作實現(xiàn)了簡單的頁面路由的功能,適用于不是特別復(fù)雜的頁面切換選擇

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/93633.html

相關(guān)文章

  • 徹底理清前端頁面應(yīng)用(SPA)實現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗,再也不是以前的點擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項目: ...

    xiaodao 評論0 收藏0
  • 徹底理清前端頁面應(yīng)用(SPA)實現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗,再也不是以前的點擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項目: ...

    崔曉明 評論0 收藏0
  • 徹底理清前端頁面應(yīng)用(SPA)實現(xiàn)原理 【精讀源碼】

    showImg(https://segmentfault.com/img/bVbvOmp?w=1612&h=888); 隨著React Vue前端框架的興起,出現(xiàn)了Vue-router,react-router-dom等前端路由管理庫,利用他們構(gòu)建出來的單頁面應(yīng)用,也是越來越接近原生的體驗,再也不是以前的點擊標(biāo)簽跳轉(zhuǎn)頁面,刷新整個頁面了,那么他們的原理是什么呢? 優(yōu)質(zhì)gitHub開源練手項目: ...

    sunny5541 評論0 收藏0
  • 網(wǎng)頁程序遷移至微信小程序web-view詳解

    摘要:網(wǎng)頁引入網(wǎng)頁發(fā)起支付由后臺返回,主要是需要統(tǒng)一下單平臺的微信支付頁面支付參數(shù)錯誤,請稍后重試支付成功支付失敗支付錯誤分享功能小程序直接分享的所在的頁面,如果需要加上頁面參數(shù),那我們就需要處理一下了。 小程序現(xiàn)在越來越流行,但是公司的很多項目都是用網(wǎng)頁寫的,小程序語法不兼容原生網(wǎng)頁,使得舊有項目遷移至小程序代價很高; 小程序之前開放了webview功能,可以說是網(wǎng)頁應(yīng)用的一大福音了,但...

    junbaor 評論0 收藏0

發(fā)表評論

0條評論

cuieney

|高級講師

TA的文章

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