miox-vuc2x-pull-control v0.0.1

Miox Pull Control

下拉上拉情况的事件

Usage

引入:

import PullControl from 'miox-vuc-pull-control';
// ...
components['pull-control'] = PullControl;

标签:

<pull-control>content</pull-control>

Pull Down

你必须在标签上写入

<pull-control pull-down @refresh="refresh">content</pull-control>

refresh为refresh事件。

如果需要传入额外的参数,需要在标签上写入: :pull-down-options="{downContent:'abc'}"

pull Up

你必须在标签上写入

<pull-control pull-up @load="load">content</pull-control>

load为load事件。

如果需要传入额外的参数,需要在标签上写入: :pull-up-options="{downContent:'abc'}"

Example

import bootStrap from 'miox-core';
import animate from 'miox-animate';
import { engine, webview } from 'miox-vue';
import Refresh from 'miox-vuc-pull-control';

class IndexPage extends webview {
    constructor(el){
        super(el);
    }

    components(components){
        components.refresh = Refresh;
    }

    methods(methods){
        methods.refresh = async function(next){
            await new Promise(resolve => {
                setTimeout(() => {
                    console.log('refreshed');
                    resolve();
                }, 3000);
            });
            next();
        };

        methods.load = async function(next){
            await new Promise(resolve => {
                setTimeout(() => {
                    console.log('loaded');
                    resolve();
                }, 3000);
            });
            next();
        };
    }

    render(){
        const result = [];

        for ( let item = 0; item < 100; item++ ) {
            result.push(`<div style="height: 50px; line-height: 50px; padding: 0 15px; border-top: 1px solid #eee;">[${item + 1}] Pull Down Control line </div>`);
        }

        return result;
    }

    template(){
        return `<refresh pull-down pull-up @refresh="refresh" @load="load"><div>这里演示pull-down</div>${this.render().join('')}</refresh>`;
    }
}

bootStrap(async app => {
    app.animate(animate());
    app.engine(engine);
    app.use(async ctx => {
        await ctx.render(IndexPage);
    });
});