From bd9e044ba29c759ef61e430c29c928a9fc20489e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B1=AA=E5=BF=97=E5=BC=BA?= <younglina0409@outlook.com>
Date: Tue, 21 Feb 2023 15:08:53 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84components?=
 =?UTF-8?q?=E4=B8=8B=E7=9A=84ListScroll=E3=80=81SimpleHeader=E3=80=81Swipe?=
 =?UTF-8?q?r=E4=B8=BAvue3=20setup=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ListScroll.vue   | 147 ++++++++++++++++----------------
 src/components/SimpleHeader.vue |  57 ++++++-------
 src/components/Swiper.vue       |  16 ++--
 3 files changed, 106 insertions(+), 114 deletions(-)

diff --git a/src/components/ListScroll.vue b/src/components/ListScroll.vue
index 05aa444..bac8894 100644
--- a/src/components/ListScroll.vue
+++ b/src/components/ListScroll.vue
@@ -14,85 +14,86 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import BScroll from 'better-scroll'
-export default {
-  props: {
-    /**
-     * 1 滚动的时候会派发scroll事件，会截流。
-     * 2 滚动的时候实时派发scroll事件，不会截流。
-     * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
-     */
-    probeType: {
-      type: Number,
-      default: 1
-    },
-    // 点击列表是否派发click事件
-    click: {
-      type: Boolean,
-      default: true
-    },
-    // 是否开启横向滚动
-    scrollX: {
-      type: Boolean,
-      default: false
-    },
-    // 是否派发滚动事件
-    listenScroll: {
-      type: Boolean,
-      default: false
-    },
-    // 列表的数据
-    scrollData: {
-      type: Array,
-      default: null
-    },
-    // 是否派发滚动到底部的事件，用于上拉加载
-    pullup: {
-      type: Boolean,
-      default: false
-    },
-    // 是否派发顶部下拉的事件，用于下拉刷新
-    pulldown: {
-      type: Boolean,
-      default: false
-    },
-    // 是否派发列表滚动开始的事件
-    beforeScroll: {
-      type: Boolean,
-      default: false
-    },
-    // 当数据更新后，刷新scroll的延时
-    refreshDelay: {
-      type: Number,
-      default: 20
-    }
+import { ref, onMounted, nextTick, onUpdated } from 'vue';
+defineProps({
+  /**
+   * 1 滚动的时候会派发scroll事件，会截流。
+   * 2 滚动的时候实时派发scroll事件，不会截流。
+   * 3 除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
+   */
+  probeType: {
+    type: Number,
+    default: 1
   },
-  mounted() {
-    // 在 DOM 渲染完毕后初始化 better-scroll
-    this.$nextTick(() => {
-      this.initScroll()
-    })
+  // 点击列表是否派发click事件
+  click: {
+    type: Boolean,
+    default: true
+  },
+  // 是否开启横向滚动
+  scrollX: {
+    type: Boolean,
+    default: false
+  },
+  // 是否派发滚动事件
+  listenScroll: {
+    type: Boolean,
+    default: false
+  },
+  // 列表的数据
+  scrollData: {
+    type: Array,
+    default: null
+  },
+  // 是否派发滚动到底部的事件，用于上拉加载
+  pullup: {
+    type: Boolean,
+    default: false
   },
-  updated() {
-    this.bs.refresh()
+  // 是否派发顶部下拉的事件，用于下拉刷新
+  pulldown: {
+    type: Boolean,
+    default: false
   },
-  methods: {
-    initScroll() {
-      // better-scroll 初始化
-      this.bs = new BScroll(this.$refs.wrapper, {
-        probeType: 3,
-        click: true
-      })
-      this.bs.on('scroll', () => {
-          console.log('scrolling-')
-        })
-        this.bs.on('scrollEnd', () => {
-          console.log('scrollingEnd')
-        })
-    } 
+  // 是否派发列表滚动开始的事件
+  beforeScroll: {
+    type: Boolean,
+    default: false
+  },
+  // 当数据更新后，刷新scroll的延时
+  refreshDelay: {
+    type: Number,
+    default: 20
   }
+})
+
+onMounted(()=>{
+    nextTick(() => {
+      initScroll()
+    })
+})
+
+const wrapper = ref('wrapper')
+let bs = null
+const initScroll = () => {
+  // better-scroll 初始化
+  bs = new BScroll(wrapper.value, {
+    probeType: 3,
+    click: true
+  })
+  bs.on('scroll', () => {
+    console.log('scrolling-')
+  })
+  bs.on('scrollEnd', () => {
+    console.log('scrollingEnd')
+  })
 }
+
+onUpdated(()=>{
+  bs.refresh()
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/SimpleHeader.vue b/src/components/SimpleHeader.vue
index 9e8c3f1..1cd1e38 100644
--- a/src/components/SimpleHeader.vue
+++ b/src/components/SimpleHeader.vue
@@ -18,41 +18,36 @@
   <div class="block" />
 </template>
 
-<script>
+<script setup>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-export default {
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    back: {
-      type: String,
-      default: ''
-    },
-    noback: {
-      type: Boolean,
-      default: false
-    }
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: ''
   },
-  emits: ['callback'],
-  setup(props, ctx) {
-    const isback = ref(props.noback)
-    const router = useRouter()
-    const goBack = () => {
-      if (!props.back) {
-        router.go(-1)
-      } else {
-        router.push({ path: props.back })
-      }
-      ctx.emit('callback')
-    }
-    return {
-      goBack,
-      isback
-    }
+  back: {
+    type: String,
+    default: ''
+  },
+  noback: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emits = defineEmits(['callback'])
+
+const isback = ref(props.noback)
+const router = useRouter()
+const goBack = () => {
+  if (!props.back) {
+    router.go(-1)
+  } else {
+    router.push({ path: props.back })
   }
+  emits('callback')
 }
 </script>
 
diff --git a/src/components/Swiper.vue b/src/components/Swiper.vue
index 374380d..d80c5c4 100755
--- a/src/components/Swiper.vue
+++ b/src/components/Swiper.vue
@@ -16,16 +16,12 @@
   </van-swipe>
 </template>
 
-<script>
-export default {
-  props: {
-    list: Array
-  },
-  methods: {
-    goTo(url) {
-      window.open(url)
-    }
-  }
+<script setup>
+defineProps({
+  list: Array
+})
+const goTo = (url) => {
+  window.open(url)
 }
 </script>