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

refactor(Sku): remove scrollCon

Browse Source
This commit is contained in:
chenjiahan 2020-06-25 17:20:51 +08:00 committed by neverland
parent f555ebb030
commit fed5f1b44f
1 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/sku/components/SkuRow.js
View File

@ -8,12 +8,8 @@ const [createComponent, bem, t] = createNamespace('sku-row');
export default createComponent({ export default createComponent({
mixins: [ mixins: [
BindEventMixin(function (bind) { BindEventMixin(function (bind) {
if (this.scrollable) { if (this.scrollable && this.$refs.content) {
if (!this.scrollCon) { bind(this.$refs.content, 'scroll', this.onScroll);
this.scrollCon = this.$refs.skuContent;
}
bind(this.scrollCon, 'scroll', this.onScroll);
} }
}), }),
], ],
@ -25,9 +21,9 @@ export default createComponent({
data() { data() {
return { return {
present: 0, present: 0,
scrollLeft: 0,
contentWidth: 0, contentWidth: 0,
contentItemWidth: 0, contentItemWidth: 0,
scrollLeft: 0,
}; };
}, },
@ -48,10 +44,9 @@ export default createComponent({
methods: { methods: {
onScroll() { onScroll() {
this.$nextTick(() => { this.$nextTick(() => {
const contentWidth = this.scrollCon.clientWidth; const { content, contentTop } = this.$refs;
const contentItemWidth = this.$refs.skuContentItem.clientWidth; const distance = contentTop.offsetWidth - content.offsetWidth;
const distance = contentItemWidth - contentWidth; this.present = content.scrollLeft / distance;
this.present = this.scrollCon.scrollLeft / distance;
}); });
}, },
}, },
@ -76,8 +71,8 @@ export default createComponent({
); );
const SkuContent = ( const SkuContent = (
<div class={bem('content')} ref="skuContent"> <div class={bem('content')} ref="content">
<div class={bem('content__top')} ref="skuContentItem"> <div class={bem('content__top')} ref="contentTop">
{this.slots('sku-item-group-one')} {this.slots('sku-item-group-one')}
</div> </div>
<div class={bem('content__bottom')}> <div class={bem('content__bottom')}>