MUI初學1
阿新 • • 發佈:2018-09-13
anti event www chat spa art mui 註意 table
1.1)官網: http://www.dcloud.io/
2)案例: http://www.dcloud.io/case/#group-1
3)文檔:http://dev.dcloud.net.cn/mui/ui/
4)簡單的註意事項等:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/122
2.MUI,整體感覺還是不錯的。初步引入mui.min.js和mui.min.css即可,後邊添加自帶的圖標icon,引入fonts文件即可。
3.Hbuilder可以選擇文件=》新建=》移動App,進行mui的應用。
4.應用裏邊簡單的輪播圖和底部tabbar示例。頁面中的普通內容都要包在mui-content中。定位的導航除外(mui的示例是輪播圖有定時按鈕的,這裏去掉之後,在js中直接操作輪播圖的定時時間即可)
<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#tabbar"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item"href="#tabbar-with-chat"> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" href="#tabbar-with-contact"><span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通訊錄</span> </a> <a class="mui-tab-item" href="#tabbar-with-map"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav>
<!--所有的內容都要包在mui-content中--> <div class="mui-content"> <!--定時輪播的按鈕--> <!--<ul class="mui-table-view mui-table-view-chevron"> <li id="switch" class="mui-table-view-cell"> 定時輪播 <div class="mui-switch"> <div class="mui-switch-handle"></div> </div> </li> </ul>--> <!--輪播圖--> <div id="slider" class="mui-slider" > <div class="mui-slider-group mui-slider-loop"> <!-- 額外增加的一個節點(循環輪播:第一個節點是最後一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="img/yuantiao.jpg"> </a> </div> <!-- 第一張 --> <div class="mui-slider-item"> <a href="#"> <img src="img/shuijiao.jpg"> </a> </div> <!-- 第二張 --> <div class="mui-slider-item"> <a href="#"> <img src="img/muwu.jpg"> </a> </div> <!-- 第三張 --> <div class="mui-slider-item"> <a href="#"> <img src="img/cbd.jpg"> </a> </div> <!-- 第四張 --> <div class="mui-slider-item"> <a href="#"> <img src="img/yuantiao.jpg"> </a> </div> <!-- 額外增加的一個節點(循環輪播:最後一個節點是第一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="img/shuijiao.jpg"> </a> </div> </div> <div class="mui-slider-indicator"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <!--main--> </div>
這裏需要用js初始化,mui。
<script type="text/javascript" charset="utf-8"> mui.init({ swipeBack:true //啟用右滑關閉功能 }); var slider = mui("#slider"); slider.slider({ interval: 5000 }); //不開啟選擇自動播放的按鈕 /*document.getElementById("switch").addEventListener(‘toggle‘, function(e) { if (e.detail.isActive) { slider.slider({ interval: 5000 }); } else { slider.slider({ interval: 0 }); } });*/ </script>
MUI初學1