原生UI

​​http://dev.dcloud.net.cn/mui/ui/ ​​

最近开始做mui移动端的项目用到了列表，数据多的时候，回到顶部的快捷的功能是很有必要的，找了资料，最后整理如下：

  1.回到顶部元素的html代码，代码可以直接放在mui-content里面：



  1. <!--回到顶部-->  
  2. <a id="scrollToTop" class="backTop hide"> <span class="mui-icon mui-icon-arrowup"></span> </a>  

 2.添加一些样式修饰，好让元素悬浮



  1. .hide { display: none; }   
  2. .backTop { background: #DDDDDD; border-radius: 50%; position: fixed; right: 10px; bottom: 15px; width: 38px; height: 38px; z-index: 9999; text-align: center; font-size: 18px; color: #666666; padding-top: 8px; opacity: 0.8; }  

3.回到顶部的方法要配合上拉，下滑使用：



  1. //回到顶部  
  2. function scrollUp() {  
  3. var scrollToTopBox = document.getElementById('scrollToTop'); //返回按钮tap    
  4. 'tap', function(e) {  
  5.     e.stopPropagation();  
  6. '#pullrefresh').pullRefresh().scrollTo(0, 0, 100); //滚动到顶部    
  7.     });  
  8. // Android上监听原生滚动，iOS上监听div滚动，上拉超过一屏后显示按钮，否则隐藏，可自行在条件判断中修改    
  9. if(mui.os.android) {  
  10. 'scroll', function(e) {  
  11. if(window.pageYOffset >= window.innerHeight && scrollToTopBox.classList.contains('hide')) {  
  12. 'hide');  
  13. else if(window.pageYOffset < window.innerHeight && !scrollToTopBox.classList.contains('hide')) {  
  14. 'hide');  
  15.                         }  
  16.                     });  
  17. else {  */
  18. 'pullrefresh').addEventListener('scroll', function() {  
  19. if(mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1) && scrollToTopBox.classList.contains('hide')) {  
  20. 'hide');  
  21. else if(mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1) && !scrollToTopBox.classList.contains('hide')) {  
  22. 'hide');  
  23.                         }  
  24.                     });  
  25.                 //}  
  26.             }
  27.