記在閱讀器上遇到的不常見的bug及實現思路

分欄佈局column-width,colunm-count,...這些在通常的web需求仍是不經常使用的，然鵝，需求來了，要作閱讀，仍是橫向翻頁，後端給的內容是string類型。不是那種epub...這種電子書格式。首要的問題，怎麼渲染每一屏，後來幾經參照網上在線的web閱讀類型的網站，column-width這個api出如今眼前，二話不說，寫唄。

分欄佈局粗來的ui大概是以下：

設置基本須要設置個每一個章節容器寬度，和column-width = 屏幕寬度，基本可實現。可是問題來了，容器寬度哪裏來？必需要先渲染後，再得到當前章節的scrollWidth。

經過scrollWidth得到的居然不是屏幕寬度的整數倍。hack向下取整整屏屏幕寬度倍數，而後，測試小姐姐反饋，怎麼每一屏沒有填充滿，然而，翻css屬性，發現column-fill：默認值是balance，意思就平衡每一欄的填充高度，個人理解是儘量同樣高，改爲auto，效果好不少，測試反饋好不少，然而在安卓的x5內核上，仍是感受比蘋果上少填充2行，經過打日誌看window的height,和screen的height，發現高度差居然有70px多（我拿測試機打出來的），但很明顯，安卓頂部狀態欄高度明顯沒有70px那麼高，然而打在微信裏看結果也同樣，可能x5內核統一設置了，咱們網頁除去頂部狀態欄，其餘地方全是網頁可控制的（包括導航欄），在分欄佈局不熟悉下，形成這個問題還覺得是瀏覽器渲染問題呢，最後才hack判斷安卓，手動加了50px,看起來效果和ios差很少，基本是填充滿整屏幕的。===此佈局還沒完，再有些章節內容，設置了column-fill會形成機率性形成最後一屏白屏，沒內容。hack在追後追加章節結束標準，獲取其offsetLeft.尷尬的是當章節內容最後一屏正好一屏，標誌位獨佔一屏，經過判斷標誌位offsetTop來處理。

ios上緩慢側滑居然抖動，問題緣由，是當我設置touchmove時，設置了過渡。在touchmove的時候沒處理transition-duration：0,但在安卓上確實沒問題。奇葩。。。

魅藍5s第一次進主頁（無緩存），居然沒數據？？？經過移動端打log看，居然是一個封裝的route.js爲undfined,可是抓包看確實加載了，若是殺進程進頁面，數據居然都有。主頁正常，多是無緩存加載機制問題吧。其次，進入閱讀頁，居然未分css欄目，不是想要的效果。經過log看，html行內樣式就沒設置column-width，但一樣殺進程進去，閱讀頁顯示正常，樣式也顯示成功。說他不支持column-width，也不對，加了-webkit-column-width,倒第一次進去也正常了。。。誰能解釋下。

ios一直側滑很快，會出現空白頁。一直點擊翻頁則不會。在側滑上更改了過渡時長，效果會稍微好些，出現機率很是低。但仍是存在，在看其餘相關閱讀也存在這個問題。未解決。

關於閱讀進度的統計,假設每一頁字數都同樣。這樣統計的方式。

html結構

<div class="reader-swiper" style="min-height: 690px; min-width: 360px; height: 690px; overflow: hidden; transition: all 0s ease 0s; width: 11520px; transform: translate3d(-7200px, 0px, 0px);">
    <div class="reading-section" id="reading-section-16" data-section-id="16" data-width="360" data-height="690" style="height: 690px; column-width: 360px; width: 360px; opacity: 1;">
        <h2 class="reading-paragraph paragraph-1" data-paragraph="1" data-txt="16">16</h2>
        <p class="reading-paragraph paragraph-2" data-paragraph="2">16</p>
        <span id="end-16" style="height:0;width:0"></span>
            
          <div class="title-wrap" style="width: 360;display: block; top: 0px">
            <div class="section-title" style="width: 360px">
            第16章  16
            </div>
            <div class="section-title" style="width: 360px">
            第16章  16
            </div>
          </div>
    </div>
</div>

複製代碼

性能

• reader-swiper容器內不能無限添加，最多添加3章，超過，則刪除前面或後面的章節。
• 作本地緩存，根據章節md5和後端md作對比。
• 初次進去預渲染前一章或後一章，根據進度去處理。
• 。。。