MUI框架前端开发知识点

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/black_hole2009/article/details/52787568

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