weex踩坑之底部元素固定懸浮，其他內容滑動瀏覽

Shania發表於2018-04-25
如圖，我想實現底部固定不動，其他內容上下滑動的效果。圖片有點難看，第一次將mp4轉gif，將就看下就好哈。

weex踩坑之底部元素固定懸浮，其他內容滑動瀏覽

  1. <div>標籤在native中是不可以滑動的，即使設定了告訴也不能滑動
  2. weex中提供了一個滾動器<scroller>標籤，只要子元件的總告訴高於<scroller>標籤，那麼所有的子元件都可以滑動。

看到這裡我的實現思路是：將除底部元素塊以外的其他所有元素都用一個<scroller>標籤包起來，這時候你會發現，依然不能滑動。因為沒有給<scroller>加高度，子元件的高度與<scroller>的高度一致。

這時候又想，可我並不知道scroller的高度應該定義為多少才準確。試過用標準的1334px-260px（底部固定元素塊的總高度），但是在真機上跑高度不準確。導致下面的內容滑不上去看不到。

這樣的話就意味著我需要知道裝置的高度，然後再減去底部固定元素的高度，動態改變<scroller>的高度了。WXEnvironment變數可以換取裝置的螢幕或環境資訊。用獲取到的裝置高度-底部固定元素高度，理論上就應該是<scroller>的高度了。

然而事實是，依然不準確。

本來想截圖上來的，但是編輯這篇文章的時候網路卡，開不了服務，後面我再補哈哈哈

最後的解決方案：

給<scroller>標籤增加以下樣式：

background-color: rgb(238, 238, 238);
position: fixed;
top: 0px;
bottom: 260px;  //底部元素塊的總高度
left: 0px; 
right: 0px;複製程式碼

完美，搞定。

這裡還有兩個問題：

  1. <scroller>標籤的最外層標籤，如果加了background-color樣式是不會有效果的。

    <div style="background-color:#f00">
<scroller>
    <div></div></scroller>
      <div>
          //底部固定元素塊
      </div>
</div>

//這樣背景顏色是無效的，必須將背景顏色樣式載入<scroller>標籤上。因為<scroller>脫離文件流了複製程式碼
  2. <scroller>標籤中的子代元素必須加上寬度
    <div>
    <scroller>
      <div style='width:750px;'>
    <div>
       //這個可不加
    </div>      </div>
      <div style='width:750px;'></div>
    </scroller>
    <div>
      //底部固定元素塊
    </div>
</div>
複製程式碼


相關文章