本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
前言
MUI提供了區域滾動的組件，使用時遵循DOM結構就可以。若是需要使用區域滾動的組件，就需要初始化scroll控件。本次在製作頁面時關於區域滾動遇到了一些問題將會在下文展開。
問題描述
在創建好區域滾動之後不能夠按照預想狀態橫向滾動，按照MUI官網上給出的代碼敲入之後所有的內容都停留在了最左的界面，不能夠根據橫向滾動的class來具體放置。
示例：
圖上的商品介紹、商家、評價原本應爲區域滾動的三個部分，在將各個部分的內容對應添加上去時，全部都呈現在了一個頁面。而且在滾動時下方的藍色條並不能隨之滾動，但字體會變爲藍色。
解決方案
查看html上的代碼，可以發現在<div id="item1mobile" class="md-f1 mui-slider-item mui-control-contentdetailInfos md-box md-ver mui-active">和<div>之後是直接使用了divclass加上之後的圖片內容。
其實我們只用加入ul組件，再去調用圖片與內容，就不會出現以上的情況了。比如：<ulclass="mui-table-view"></ul>，在每一個滾動區域都這樣使用，就可以正常的進行區域滾動了
結語
這次的問題是在對頁面進行優化時發現的，修改之後整個頁面都美觀了許多。當遇到這類的問題的時候其實應該仔細檢查，只要是有一定的基礎都可以發現這個問題並進行改正。
實習編輯：衡輝
稿件來源：深度學習與文旅應用實驗室（DLETA）
本文分享自微信公衆號 - 算法與編程之美（algo_coding）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。