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): 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;
});
},
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() {
const { item, scrollable } = this;
const { item } = this;
const { largeImageMode } = item;
const multipleNode = item.is_multiple && (
<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 = (
<div class={bem('content')} ref="content">
<div class={bem('content__top')} ref="contentTop">
@ -88,7 +89,7 @@ export default createComponent({
{multipleNode}
</div>
{largeImageMode ? SkuContent : this.slots()}
{largeImageMode && scrollable && SkuScroll}
{this.genIndicator()}
</div>
);
},

30
src/sku/index.less
View File

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