實現 頁面某些 效果

一、彈出遮罩層後禁止滾動效果：https://www.cnblogs.com/huangenai/p/6236426.html 或 https://www.cnblogs.com/JimmyBright/p/6647045.html 或 https://blog.csdn.net/weixin_40785245/article/details/80520524 （親測有效）

body,html 的 overflow: hidden; 就能夠了

二、js獲取圖片的主題色c插件 rgbaster.js  ：http://www.php.cn/js-tutorial-410349.html （親測有效） 或 https://www.jianshu.com/p/2d435817e872

三、JS刪除上一條瀏覽器歷史記錄的方法 ： https://blog.csdn.net/weixin_42325340/article/details/82659988 （使用 location.replace 把當前的url替換掉，至關於刪除了當前的url記錄）

　　或  https://blog.csdn.net/qq_40963664/article/details/78561086

四、（這裏研究Vue中的實現）跳轉下一個頁面，點擊 瀏覽器返回按鈕 再返回上一個頁面，上一個頁面數據不變。 https://www.jianshu.com/p/d1ccef6d8c58

　  說明：這個用戶體驗是很重要的，好比，一個很長的產品列表頁，點擊進入詳情頁。返回產品列表頁時，從新刷新的話，

　　　　  客戶又得從頭開始下拉去找到以前看過的那個產品，繼續往下看其它的產品。（若是返回產品列表頁時，仍是進入產品詳情頁前的那個產品列表頁，用戶體驗會很是好）

 　實現：這種需求的實現 仍是使用vue自帶的  keep-alive 組件進行來實現。具體實現能夠  參考  github上 vue2-elm 項目的實現

            <keep-alive>
                <router-view v-if="$route.meta.keepAlive"></router-view>  <!-- 須要緩存起來的組件在這顯示 -->
            </keep-alive>

            <router-view v-if="!$route.meta.keepAlive"></router-view> <!-- 不須要緩存起來的組件在這顯示 -->

        //全部商鋪列表頁
        {
            path: '/msite',
            component: msite,
            meta: { keepAlive: true }, // 須要緩存起來的組件在這設置
        },
        //特點商鋪列表頁
        {
            path: '/food',
            component: food
        },

 　　keep-alive實踐總結 參考：https://www.cnblogs.com/sysuhanyf/p/7454530.html

五、很長的列表（如產品列表），拉到下面，須要有一個 回到頂部  的按鈕。  https://blog.csdn.net/qq_36070288/article/details/84765139

六、進入頁面時，數據沒有請求完成，灰底背景 佔位。兩種實現

　　a、使用 vue-occupy 插件實現。http://www.javashuo.com/article/p-tukzmdts-eb.html （不推薦，這種方式，每一個動態顯示數據的標籤都須要額外添加屬性）

　　b、使用 與頁面相同結構的圖片 先佔位顯示。github上 vue2-elm 項目 就是經過這種方法實現的，使用  svg圖片 代替  整塊DOM結構。

　　　（能夠經過一些工具實現svg圖片代碼，如 http://www.zuohaotu.com/svg/ 能夠 直接生成 svg文件。也可使用png圖片，淘寶是經過png圖片實現的，有彩色）

                                    

 

七、

 

 

 

 

 

n、H5 頁面要實現分享 的功能 是經過跳連接實現的，把當前頁面的 url 做爲一個參數傳遞給分享的連接。 https://github.com/overtrue/share.js

　  沒有分享連接的平臺（如 微信，經過生成一個二維碼，進入微信平臺分享）

 

 

---

 

實際開發中 須要 考慮的問題：

一、實際稿上是全部的數據，和內容都是有的。可是用戶使用時，頁面上有的內容若是是經過後臺配置的，這個時候須要考慮，配置的這塊內容的 字數多少 或 圖片有無。

　  必須項（這個是能夠在後管中規定好的）：基本就是考慮文字的多少、和圖片的大小。

　  非必須項：就要  考慮文字或、圖片 沒有的時候  是否影響頁面佈局。

二、圖片(背景圖也同樣)要設置 寬高，不能只是設置一個寬度。由於設計稿上圖片，在H5頁面中是經過後臺上傳的，後臺上傳的圖片和設計稿上是圖片不必定會是同樣的寬高的。

　   即便上傳的是同樣的，可是在傳送過程，壓縮圖片，都會存在寬（或高）相差幾個像素的問題。相差幾個像素進行拉伸是不會變形很大的（幾像素的拉伸，用戶是看不出來變形的）。