blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-23 09:52:57 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] List: jsx (#2539)

Browse Source
This commit is contained in:
neverland 2019-01-16 20:19:46 +08:00 committed by GitHub
parent 4c4b44df7b
commit 024defbc23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/list/index.vue → packages/list/index.js
View File

@ -1,34 +1,11 @@
<template> import { use } from '../utils';
<div :class="b()">
<slot />
<div
v-if="loading"
:class="b('loading')"
>
<slot name="loading">
<loading :class="b('loading-icon')" />
<span
v-text="loadingText || $t('loading')"
:class="b('loading-text')"
/>
</slot>
</div>
<div
v-if="finished && finishedText"
v-text="finishedText"
:class="b('finished-text')"
/>
</div>
</template>
<script>
import create from '../utils/create';
import utils from '../utils/scroll'; import utils from '../utils/scroll';
import Loading from '../loading';
import { on, off } from '../utils/event'; import { on, off } from '../utils/event';
export default create({ const [sfc, bem, t] = use('list');
name: 'list',
export default sfc({
model: { model: {
prop: 'loading' prop: 'loading'
}, },
@ -108,9 +85,7 @@ export default create({
reachBottom = scroller.scrollHeight - targetBottom < this.offset; reachBottom = scroller.scrollHeight - targetBottom < this.offset;
} else { } else {
const elBottom = const elBottom =
utils.getElementTop(el) - utils.getElementTop(el) - utils.getElementTop(scroller) + utils.getVisibleHeight(el);
utils.getElementTop(scroller) +
utils.getVisibleHeight(el);
reachBottom = elBottom - scrollerHeight < this.offset; reachBottom = elBottom - scrollerHeight < this.offset;
} }
@ -128,6 +103,24 @@ export default create({
(bind ? on : off)(this.scroller, 'scroll', this.check); (bind ? on : off)(this.scroller, 'scroll', this.check);
} }
} }
},
render(h) {
return (
<div class={bem()}>
{this.$slots.default}
{this.loading && (
<div class={bem('loading')}>
{this.$slots.loading || [
<Loading class={bem('loading-icon')} />,
<span class={bem('loading-text')}>{this.loadingText || t('loading')}</span>
]}
</div>
)}
{this.finished && this.finishedText && (
<div class={bem('finished-text')}>{this.finishedText}</div>
)}
</div>
);
} }
}); });
</script>

5
packages/list/test/__snapshots__/demo.spec.js.snap
View File

@ -10,10 +10,7 @@ exports[`renders demo correctly 1`] = `
<!----> <!---->
<!----> <!---->
</div> </div>
<div class="van-list"> <div class="van-list"></div>
<!---->
<!---->
</div>
</div> </div>
</div> </div>
</div> </div>