mui 区域滚动

最新推荐文章于 2022-03-03 14:55:52 发布

cery_csdn

最新推荐文章于 2022-03-03 14:55:52 发布

阅读量5.2k

点赞数 2

分类专栏： js 文章标签： mui 区域滚动滚动条

本文链接：https://blog.csdn.net/cery_csdn/article/details/52702044

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我在实际使用中，这样代码虽然能用，但是有些地方他还没有讲明白，如果贸然添加这样的一个区块代码，不一定能实现滚动效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
	
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">区域滚动例子</h1>
    </header>
    
    <div class="mui-content">
        <div id="scroll1" class="mui-scroll-wrapper" style="top: 50px; bottom: 50px;">
            <!--MUI默认是position是absolute-->
            <div class="mui-scroll">
             
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-1
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-2
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-3
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-4
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-5
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-6
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-7
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-8
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-9
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-10
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-11
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-12
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-13
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-14
                    </li>
                    <li class="mui-table-view-cell">
                        第一个选项卡子项-15
                    </li>
                </ul>
            </div>
        </div>
    </div>
   <script type="text/javascript" src="js/jquery-1.6.1.min.js" ></script>
    <script type="text/javascript">
      
       	$(function(){
       		$('#scroll').scroll({
                indicators: true //是否显示滚动条
            });
        	
        	mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
            });
       
       	})
       
         
    </script>
</body>
</html>