simzlj
simzlj
  • 发布:2015-11-11 16:44
  • 更新:2015-12-01 21:05
  • 阅读:3346

switch开关动画问题

分类:MUI

业务场景:页面A是一个表单页面,有一个switch开关标签,从页面B进入页面A时,等到A页面开关状态修改后,再关闭加载动画,显示A页面。

问题:A页面显示时,用户可以看到switch开关由关闭->打开的整个动画。如何屏蔽这个动画?实现:A页面显示时,开关已经是打开状态。

页面A html代码:

    <div class='mui-input-row input-row'>  
        <label>是否生成</label>  
        <div id='generateToggle' class='mui-switch'>  
            <div class='mui-switch-handle'></div>  
        </div>  
    </div>  

页面A js代码:

mui.plusReady(function() {  
    app.ready(function() {  

        app.page.ready(function() {  
            document.getElementById('generateToggle').classList.add('mui-active');  

            setTimeout(function(){  
                plus.nativeUI.closeWaiting();  
                plus.webview.currentWebview().show('slide-in-right');  
            }, 50);  
        });  

    });  
});  

从其它页面进入页面A时js代码:

    mui.openWindow({  
        url: 'A.html',  
        id: 'A',  
        show: {  
            autoShow: false  
        },  
        waiting: {  
            autoShow: true  
        },  
        extras: {  
            'houseId': self.houseId,  
            'type': type  
        }  
    });  
2015-11-11 16:44 负责人:无 分享
已邀请:
Danny

Danny - QQ125904483

这个问题我也遇到了,简单的说就是:
A页面上有一个switch,默认是关闭的,但是每次打开A页面时需要从storage中动态读取switch实际的状态,如果读取switch是on状态,那么得执行JS代码来改变其状态(由off改为on),这时,用户就可以看见switch有off滑动到on的动画。

  • Danny

    @57

    2015-11-13 17:24

Danny

Danny - QQ125904483

A页面上有一个switch,默认是关闭的,但是每次打开A页面时需要从storage中动态读取switch实际的状态,如果读取switch是on状态,那么得执行JS代码来改变其状态(由off改为on),这时,用户就可以看见switch有off滑动到on的动画。

DCloud_UNI_CHB

DCloud_UNI_CHB

把.mui-active直接写在dom中就可以了,为何要通过js动态添加呢?

  • Danny

    @57 动态控制时这个动画看着很不好啊。A页面上有一个switch,默认是关闭的,但是每次打开A页面时需要从storage中动态读取switch实际的状态,如果读取switch是on状态,那么得执行JS代码来改变其状态(由off改为on),这时,用户就可以看见switch有off滑动到on的动画。

    2015-12-01 21:07

  • DCloud_UNI_CHB

    回复 Danny:最新版本的mui,switch控件的toggle方法增加animate参数,当为false时,无动画切换,默认为有动画

    2015-12-07 14:10

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