1. 程式人生 > >MUI框架前端開發知識點

MUI框架前端開發知識點

1、mui-table-view列表

列表拉動反彈動畫效果,只需將列表放置在mui-scroll-wrapper、mui-scroll容器內。

<div class="mui-scroll-wrapper">
	<div class="mui-scroll">
		//列表具體內容                         
	</div>
</div>

列表需要用javaScript進行初始化才能滾動,如果列表的內容沒有超出螢幕範圍,也是不能滾動的,如果對.mui-table-view使用了絕對定位position: absolute,即使列表超出螢幕範圍,也是不能滾動的。

<script>
		
	mui('.mui-scroll-wrapper').scroll({
			
	});
</script>

注意:如需整個頁面具有反彈效果,則在預載入中的styles中新增屬性bounce: 'vertical',表示垂直方向可滑動反彈。此時則無需將列表放置在mui-scroll-wrapper、mui-scroll容器內。

mui.init({
    swipeBack: false,
    statusBarBackground: '#f7f7f7',
    gestureConfig: {
		    doubletap: true
		   },
    subpages: [{
	         id: 'list',
	         url: 'list.html',
                 styles: {
	                   top: '45px',
	                   bottom: 0,
	                   bounce: 'vertical'
	                 }
              }]
});

2、本地資料儲存

使用plus.storage物件,呼叫該物件的以下方法:

//根據key獲取對應的value
plus.storage.getLength();

//增加或修改key-value對  
plus.storage.setItem('key', 'value'); 

//根據key值刪除對應的key-value對  
plus.storage.removeItem('key');  

//清除所有key-value對
plus.storage.clear();

//獲取對應索引處的key值
plus.storage.key(index);

3、系統控制元件預設高度

頂部導航欄:44px

底部工具條:51px