miox-vuc2x-pull-control
v0.0.1
Published
miox-vuc-refresh
Downloads
12
Readme
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);
});
});