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

refactor(Sku): rename indicator

Browse Source
This commit is contained in:
chenjiahan 2020-06-25 17:34:58 +08:00 committed by neverland
parent fed5f1b44f
commit 04b78e6c49
2 changed files with 28 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,27 +49,28 @@ export default createComponent({
this.present = content.scrollLeft / distance; this.present = content.scrollLeft / distance;
}); });
}, },
genIndicator() {
if (this.scrollable) {
return (
<div class={bem('indicator-wrapper')}>
<div class={bem('indicator')}>
<div class={bem('indicator-active')} style={this.scrollStyle} />
</div>
</div>
);
}
},
}, },
render() { render() {
const { item, scrollable } = this; const { item } = this;
const { largeImageMode } = item; const { largeImageMode } = item;
const multipleNode = item.is_multiple && ( const multipleNode = item.is_multiple && (
<span class={bem('title-multiple')}>（{t('multiple')}）</span> <span class={bem('title-multiple')}>（{t('multiple')}）</span>
); );
const SkuScroll = (
<div class={bem('scroll')}>
<div class={bem('scroll__content')} ref="skuScroll">
<div
class={bem('scroll__content--active')}
style={this.scrollStyle}
></div>
</div>
</div>
);
const SkuContent = ( const SkuContent = (
<div class={bem('content')} ref="content"> <div class={bem('content')} ref="content">
<div class={bem('content__top')} ref="contentTop"> <div class={bem('content__top')} ref="contentTop">
@ -88,7 +89,7 @@ export default createComponent({
{multipleNode} {multipleNode}
</div> </div>
{largeImageMode ? SkuContent : this.slots()} {largeImageMode ? SkuContent : this.slots()}
{largeImageMode && scrollable && SkuScroll} {this.genIndicator()}
</div> </div>
); );
}, },

26
src/sku/index.less
View File

@ -301,25 +301,23 @@
} }
} }
&__scroll { &__indicator {
display: flex;
justify-content: center;
height: 4px;
padding-bottom: 16px;
&__content {
position: relative;
width: 40px; width: 40px;
height: 4px; height: 4px;
background: #ebedf0; background: @gray-3;
border-radius: 2px; border-radius: 2px;
&--active { &-wrapper {
width: 20px; display: flex;
height: 4px; justify-content: center;
background: #f44; padding-bottom: 16px;
border-radius: 2px;
} }
&-active {
width: 50%;
height: 100%;
background-color: @red;
border-radius: 2px;
} }
} }
} }