transparentBar（透明状态栏）在监听mui scroll控件时无效

分类：MUI

DOM文档检查了几遍都没问题，不管是个性化定制还是通过JS调用，transparent在mui scroll组件下没有任何效果，求解

2017-02-28 15:12 负责人:无分享

3 个回复

BoredApe - 有问题就会有答案。

请参考文档:http://dev.dcloud.net.cn/mui/ui/#transparentBar

data-scrollby 监听区域滚动容器 (*mui 3.5版本+支持) 默认window默认监听原生滚动,
如监听mui scroll控件滚动,则: document.querySelector('.mui-scroll-wrapper')

csharp (作者)

都看了一上午了，还是无法解决

2017-02-28 15:25
BoredApe

上代码..

2017-02-28 15:27

csharp (作者)

<!doctype html>  
<html>  

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

    <body>  
        <header class="mui-bar mui-bar-transparent">  
            <h1 class="mui-title">标题</h1>  
        </header>  
        <section class="mui-content mui-scroll-wrapper">  
            <div class="mui-scroll">  
            <ul class="mui-table-view">  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
                <li class="mui-table-view-cell">Item 1</li>  
                <li class="mui-table-view-cell">Item 2</li>  
                <li class="mui-table-view-cell">Item 3</li>  
            </ul>  
            </div>  
        </section>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  

        </script>  
    </body>  
    <script>  
        mui.ready(function(){  
            mui(".mui-scroll-wrapper").scroll();  

            mui('.mui-bar-transparent').transparent({  
                top: 0,  
                offset: 150,  
                duration: 16,  
                scrollby: document.querySelector('.mui-scroll-wrapper')  
            });  
        });  

    </script>  
</html>

我用官方的HB写了一个DEMO也不行