magix-components/tmpl/mx-loading/__test__/mask.html

magix组件

<h2>mx-loading</h2>
<h3>mask mixin</h3>
<div class="pt20 clearfix">
    <p>
        loading mixin只要view启用即可，不需要修改view中的任何方法即可完成相应的效果
    </p>
    <p>
        通常某个view首次渲染时我们会在节点内部增加一个loading动画，而在view后续渲染时，不能把内容整个销毁换成动画，这个成本太高了。
    </p>
    <p>
        为了解决后续也能显示一个加载动画，可启用该mixin，解决后续的动画显示。
    </p>
    <p class="mt10 mb10">
        第<%=count%>次渲染页面
    </p>
    <button mx-click="refresh()" class="btn btn-brand mt10">点此按钮2s后重新渲染当前view</button>
</div>

<div class="pt20">
    <div>HTML Code:</div>
    <pre>&lt;p&gt;
    loading mixin只要view启用即可，不需要修改view中的任何方法即可完成相应的效果
&lt;/p&gt;
&lt;p&gt;
    通常某个view首次渲染时我们会在节点内部增加一个loading动画，而在view后续渲染时，不能把内容整个销毁换成动画，这个成本太高了。
&lt;/p&gt;
&lt;p&gt;
    为了解决后续也能显示一个加载动画，可启用该mixin，解决后续的动画显示。
&lt;/p&gt;
&lt;p class="mt10 mb10"&gt;
    第&lt;%=count%&gt;次渲染页面
&lt;/p&gt;
&lt;button mx-click="refresh()" class="btn btn-brand mt10"&gt;点此按钮2s后重新渲染当前view&lt;/button&gt;</pre>
<div class="pt10">Javascript Code:</div>
    <pre>let Magix = require('magix');
let MLoading = require('app/gallery/loading/mask');
module.exports = Magix.View.extend({
    tmpl: '@mask.html',
    mixins: [MLoading],
    init() {
        this.count = 1;
    },
    render() {
        let me = this;
        setTimeout(me.wrapAsync(() => {
            me.updater.digest({
                count: this.count++
            });
        }), 2e3);
    },
    'refresh&lt;click&gt;' () {
        this.render();
    }
});</pre>
</div>