心然
心然
  • 发布:2016-03-18 15:26
  • 更新:2016-03-18 15:28
  • 阅读:4653

scroll 局部滚动滚不动

分类:MUI

代码:

<!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" />  
        <script type="text/javascript" charset="UTF-8">  
            mui.init();  
            mui('.mui-scroll-wrapper').scroll({  
                bounce: false,  
                indicators: true, //是否显示滚动条  
                deceleration: 0.0006  
            });  
        </script>  
        <style type="text/css">  
            .mui-scroll-wrapper {  
                top: 10px;  
                height: 200px;  
                position: relative;  
            }  
        </style>  
    </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>  
        <nav class="mui-bar mui-bar-tab">  
            <a class="mui-tab-item mui-active">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item">  
                <span class="mui-icon mui-icon-phone"></span>  
                <span class="mui-tab-label">电话</span>  
            </a>  
            <a class="mui-tab-item">  
                <span class="mui-icon mui-icon-email"></span>  
                <span class="mui-tab-label">邮件</span>  
            </a>  
            <a class="mui-tab-item">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">设置</span>  
            </a>  
        </nav>  
        <div class="mui-content">  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <h1>页面固定部分</h1>  
            <div class="mui-scroll-wrapper">  
                <div class="mui-scroll">  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                    <h1>局部滚动部分</h1>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

整个页面可以实现有丑滚动条的滚动,但是局部滚动没效果,求解!

2016-03-18 15:26 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

需要调用js初始化

mui('.mui-scroll-wrapper').scroll();
  • 心然 (作者)

    在第12行

    ···mui('.mui-scroll-wrapper').scroll({

    bounce: false,

    indicators: true, //是否显示滚动条

    deceleration: 0.0006

    });

    ···

    2016-03-18 15:31

  • DCloud_UNI_FXY

    回复 心然:js代码放到dom节点后边。或者放到mui.ready内部,你现在提前执行的时候dom还不存在。

    2016-03-18 15:35

  • 心然 (作者)

    回复 DCloud_UNI_FXY:终于有效果了,谢谢!!!!

    2016-03-18 15:41

该问题目前已经被锁定, 无法添加新回复