From f626288dad2154cec381e9fdac0dd35dd276426f Mon Sep 17 00:00:00 2001
From: jiannibang <271381693@qq.com>
Date: Mon, 16 Jan 2023 14:36:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AF=BC=E8=A7=88=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 1 +
src/base/ScrollView/ScrollView.vue | 11 ++++++--
src/components/BrandScroll/BrandScroll.vue | 27 +++++++++++++++++---
src/components/BrandScroll/handle.png | Bin 0 -> 9180 bytes
src/views/Guide/Guide.vue | 28 ++++++++++++++++++---
5 files changed, 59 insertions(+), 8 deletions(-)
create mode 100644 src/components/BrandScroll/handle.png
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], () => {