重构components下的ListScroll、SimpleHeader、Swiper为vue3 setup语法

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>

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>
 

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>