|
|
@ -3,7 +3,7 @@ |
|
|
<div class="brand-content" ref="content"> |
|
|
<div class="brand-content" ref="content"> |
|
|
<div |
|
|
<div |
|
|
class="groups" |
|
|
class="groups" |
|
|
v-for="(item, i) of list" |
|
|
|
|
|
|
|
|
v-for="(item, i) of filteredList" |
|
|
:ref=" |
|
|
:ref=" |
|
|
el => { |
|
|
el => { |
|
|
groups[i] = el |
|
|
groups[i] = el |
|
|
@ -32,7 +32,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="indicator" :style="{ visibility: hasScollBar ? 'visible' : 'hidden' }" id="indicator" ref="indicatorWrapper"> |
|
|
<div class="indicator" :style="{ visibility: hasScollBar ? 'visible' : 'hidden' }" id="indicator" ref="indicatorWrapper"> |
|
|
<div class="handle">{{ list[indicatorIndex]?.name }}</div> |
|
|
|
|
|
|
|
|
<div class="handle">{{ filteredList[indicatorIndex]?.name }}</div> |
|
|
</div> |
|
|
</div> |
|
|
</ScrollView> |
|
|
</ScrollView> |
|
|
</template> |
|
|
</template> |
|
|
@ -55,6 +55,7 @@ const groups = ref([]) |
|
|
const { height: containerHeight } = useElementSize(scroll) |
|
|
const { height: containerHeight } = useElementSize(scroll) |
|
|
|
|
|
|
|
|
const { height: contentHeight } = useElementSize(content) |
|
|
const { height: contentHeight } = useElementSize(content) |
|
|
|
|
|
const filteredList = computed(() => props.list.filter(({ shopList }) => shopList.length > 0)) |
|
|
const hasScollBar = computed(() => containerHeight.value < contentHeight.value) |
|
|
const hasScollBar = computed(() => containerHeight.value < contentHeight.value) |
|
|
const heights = computed(() => groups.value.map(useElementSize).map(({ height }) => height)) |
|
|
const heights = computed(() => groups.value.map(useElementSize).map(({ height }) => height)) |
|
|
const bounds = computed(() => |
|
|
const bounds = computed(() => |
|
|
|