Переглянути джерело

跨页面锚点跳转实现

ming 11 місяців тому
батько
коміт
79e679429a
2 змінених файлів з 29 додано та 5 видалено
  1. 6 3
      src/components/layout/feedFix.vue
  2. 23 2
      src/views/about/index.vue

+ 6 - 3
src/components/layout/feedFix.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useRouter } from "vue-router";
+const router = useRouter()
+
 if (typeof window !== 'undefined' && typeof window.globalThis.addEventListener === 'function') {
     globalThis.scrollTo(0, 0)
     globalThis.addEventListener('scroll', function() {
@@ -22,8 +25,8 @@ function scrollToTop() {
 <template>
 <div class="feedBackBox">
     <div class="contactOne">
-        <img src="@/assets/img/home/f_phone.png" alt="">
-        <ul class="contactInner">
+        <a href="/about#hasAhchor"><img src="@/assets/img/home/f_phone.png" alt="" ></a>
+        <!-- <ul class="contactInner">
             <li style="font-size:25px;margin-bottom:5px">合作共赢</li>
             <li>
                 <span>智&nbsp;  慧&nbsp;  消&nbsp;&nbsp;  防:</span>
@@ -42,7 +45,7 @@ function scrollToTop() {
                 <span>孙先生 17721169552</span>
             </li>
             <li style="margin-top:10px">其他智慧城市相关应用合作: 021-65376655</li>
-        </ul>
+        </ul> -->
     </div>
     <div class="contactQr">
         <!-- 二维码 -->

+ 23 - 2
src/views/about/index.vue

@@ -8,6 +8,24 @@ export default defineComponent({
         const requestParams = ref({})//active类型
         let paramsData = reactive({})
         let oldCategoryId= ref()
+
+        console.log(store.state.columnTypes)
+        if (store.state.route.hash) {
+            setTimeout(()=>{
+
+                var  ids = store.state.columnTypes.filter(item => item.title == '联系我们');
+                console.log(ids[0].id)
+                
+                var ahchorEle = ids[0].id
+                console.log(document.getElementById(ahchorEle))
+                document.getElementById(ahchorEle).scrollIntoView({
+                    behavior: 'smooth' // 可选,平滑滚动效果
+                })
+            },1)
+        }
+    
+        
+
         //类型切换
         function facilityClick(item:any){
             //防抖
@@ -36,6 +54,9 @@ export default defineComponent({
     },
     asyncData({ store, route } :any){
         let params = reactive(route.value) //路由参数
+
+         store.commit("setRoute",params)
+
         //获取菜单列表
         return store.dispatch('getMenuList',params).then(()=>{
             const data = store.state.menuList
@@ -66,8 +87,8 @@ export default defineComponent({
         <div class="common-bradcrumb-section">
             <banner />
         </div>
-        <section class="about-introduce-section course-section pt-40 pb-60 about-sec" v-for="(arr,index) in store.state.columnTypes" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
-            <div :id="arr.id" class="pointOffset">0</div>
+        <section :id="arr.id" class="about-introduce-section course-section pt-40 pb-60 about-sec" v-for="(arr,index) in store.state.columnTypes" :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
+            <div  class="pointOffset">0</div>
             <div class="container">
                 <div class="row">
                     <div class="col-md-2 col-sm-12 text-center">