diff --git a/package.json b/package.json index bb257e6..040616d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "@better-scroll/indicators": "^2.5.0", "@better-scroll/observe-image": "^2.4.2", "@better-scroll/scroll-bar": "^2.4.2", "@vueuse/core": "^9.9.0", diff --git a/src/base/ScrollView/ScrollView.vue b/src/base/ScrollView/ScrollView.vue index 4a773be..88ba47a 100644 --- a/src/base/ScrollView/ScrollView.vue +++ b/src/base/ScrollView/ScrollView.vue @@ -10,9 +10,11 @@ import { useStore } from '@/store/root' import BScroll from '@better-scroll/core' import ScrollBar from '@better-scroll/scroll-bar' import ObserveImage from '@better-scroll/observe-image' +import Indicators from '@better-scroll/indicators' BScroll.use(ScrollBar) BScroll.use(ObserveImage) +BScroll.use(Indicators) const props = defineProps({ list: [Array, String], @@ -20,7 +22,6 @@ const props = defineProps({ type: Boolean, default: false }, - observeImage: { type: Boolean, default: false @@ -40,6 +41,10 @@ const props = defineProps({ autoTop: { type: Boolean, default: true + }, + indicators: { + type: Object, + default: undefined } }) @@ -61,7 +66,9 @@ function _initScroll() { stopPropagation: props.stopPropagation, scrollbar: props.scrollbar, observeImage: props.observeImage, - probeType: props.probeType + probeType: props.probeType, + indicators: document.getElementById('indicator') ? [{ relationElement: document.getElementById('indicator'), relationElementHandleElementIndex: 0 }] : undefined + // ...(props.indicators ? { indicators: props.indicators } : {}) }) } diff --git a/src/components/BrandScroll/BrandScroll.vue b/src/components/BrandScroll/BrandScroll.vue index 195001f..623edc0 100644 --- a/src/components/BrandScroll/BrandScroll.vue +++ b/src/components/BrandScroll/BrandScroll.vue @@ -1,5 +1,10 @@ @@ -32,7 +40,7 @@ import { storeToRefs } from 'pinia' import { useStore } from '@/store/root' const store = useStore() const { currentFloor } = storeToRefs(store) - +const indicatorWrapper = ref(null) const scroll = ref(null) const props = defineProps({ list: Array, @@ -88,10 +96,23 @@ watch([scroll, () => props.shop], () => {