首页添加下拉刷新

src/views/home/index.vue

@@ -14,31 +14,34 @@
       </div>
       </div>
     </nafm-header>
     </nafm-header>
     <main>
     <main>
-      <HomeBanner :data="HomeData" />
-      <MenuModule :data="HomeData" />
-      <HotScrollBar :data="HomeData" />
-      <DataModule
-        v-for="(item, idx) in modules"
-        :key="idx"
-        v-bind="item"
-        :datas="item.datas"
-        @clickMore="handleMore(item)"
-        @clickItem="handleItem"
-        @clickTop="handleTop(item)"
-      />
+      <NafmPullRefresh v-model="refresh" @refresh="fetchData">
+        <HomeBanner :data="HomeData" />
+        <MenuModule :data="HomeData" />
+        <HotScrollBar :data="HomeData" />
+        <DataModule
+          v-for="(item, idx) in modules"
+          :key="idx"
+          v-bind="item"
+          :datas="item.datas"
+          @clickMore="handleMore(item)"
+          @clickItem="handleItem"
+          @clickTop="handleTop(item)"
+        />
+      </NafmPullRefresh>
     </main>
     </main>
   </div>
   </div>
 </template>
 </template>
 <script>
 <script>
 import { mapState } from "vuex";
 import { mapState } from "vuex";
 import SearchInput from '@/components/SearchInput'
 import SearchInput from '@/components/SearchInput'
+import NafmPullRefresh from '@/components/NafmPullRefresh'
 import HomeBanner from './components/HomeBanner'
 import HomeBanner from './components/HomeBanner'
 import MenuModule from './components/MenuModule'
 import MenuModule from './components/MenuModule'
 import HotScrollBar from './components/HotScrollBar'
 import HotScrollBar from './components/HotScrollBar'
 import DataModule from '@/components/HomeDataListModule'
 import DataModule from '@/components/HomeDataListModule'
 export default {
 export default {
   name: "Home",
   name: "Home",
-  components: { HomeBanner, MenuModule, HotScrollBar, DataModule, SearchInput },
+  components: { NafmPullRefresh, HomeBanner, MenuModule, HotScrollBar, DataModule, SearchInput },
   data () {
   data () {
     const datas = [
     const datas = [
       {
       {
@@ -61,6 +64,7 @@ export default {
       }
       }
     ]
     ]
     return {
     return {
+      refresh: false,
       modules: [
       modules: [
         { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), datas, showTop: false },
         { type: '1', name: this.$t('home.disclosure'), dateText: this.$t('home.disclosureDate'), datas, showTop: false },
         { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), datas, showTop: true },
         { type: '2', name: this.$t('home.news'), dateText: this.$t('home.updateDate'), datas, showTop: true },
@@ -81,6 +85,12 @@ export default {
       this.$router.push({ name: 'GlobalSearch' })
       this.$router.push({ name: 'GlobalSearch' })
     },
     },
 
 
+    fetchData () {
+      this.$store.dispatch('home/AGetHomeData').then(res => {
+        this.refresh = false
+      })
+    },
+
     handleTop (module) {
     handleTop (module) {
       const modules = []
       const modules = []
       for (const item of this.modules) {
       for (const item of this.modules) {
@@ -99,7 +109,7 @@ export default {
     }
     }
   },
   },
   mounted () {
   mounted () {
-    this.$store.dispatch('home/AGetHomeData')
+    this.fetchData()
   }
   }
 };
 };
 </script>
 </script>