vue 锚点跳转,适用移动端和web端

分3步，

第一步，创建个 锚点组件，文件名indexData.js，TopicBg1之类名字的需要和页面id对应上，在后面代码可以看到

import Vue from 'vue'
const vm = new Vue()

const dialog = (text) => {
  vm.$dialog.alert({
    title: '温馨提示',
    message: text
  })
}
// 锚点跳转
const goAnchor = (selector) => {
  document.querySelector(selector).scrollIntoView({
    // behavior: 'smooth', // 加这个动画在网页上瞄点跳转有问题
    block: 'start'
  })
}

export const verificationForn = (form) => {
  if (form.phone1 === '') {
    dialog('第1道题未回答')
    goAnchor('#TopicBg1')
    return false
  }
  if (form.phone2 === '') {
    dialog('第2道题未回答')
    goAnchor('#TopicBg2')
    return false
  }
  if (form.phone3 === '') {
    dialog('第3道题未回答')
    goAnchor('#TopicBg3')
    return false
  }
  if (form.phone4 === '') {
    dialog('第4道题未回答')
    goAnchor('#TopicBg4')
    return false
  }
  if (form.phone5 === '') {
    dialog('第5道题未回答')
    goAnchor('#TopicBg5')
    return false
  }
  if (form.phone6 === '') {
    dialog('第6道题未回答')
    goAnchor('#TopicBg6')
    return false
  }
  if (form.phone7 === '') {
    dialog('第7道题未回答')
    goAnchor('#TopicBg7')
    return false
  }
  return true
}

第二步，因为是一块块白色的样式，所以又封装了一个组件，用做样式展示，文件名goToHome.vue

<template>
  <div>
    <div class="box">
      <div class="title">{{title}}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  props: {
    title: {
      default: ''
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  padding: 20px;
  margin: 20px;
  box-sizing: border-box;
  border-radius: 4px;
  .title {
    font-weight: bold;
  }
}
</style>

第三步，页面

<template>
  <div>
    <van-form>
      <GoToHome title="学不会" id="TopicBg1">
        <van-field v-model="form.phone1" label="1.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会2" id="TopicBg2">
        <van-field v-model="form.phone2" label="2.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会3" id="TopicBg3">
        <van-field v-model="form.phone3" label="3.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会4" id="TopicBg4">
        <van-field v-model="form.phone4" label="4.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会5" id="TopicBg5">
        <van-field v-model="form.phone5" label="5.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会6" id="TopicBg6">
        <van-field v-model="form.phone6" label="6.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
      <GoToHome title="学不会7" id="TopicBg7">
        <van-field v-model="form.phone7" label="7.紧急联系人手机号" type="digit" placeholder="请输入" maxlength="11" label-width="180px" input-align="right" />
      </GoToHome>
    </van-form>
    <van-button type="primary" @click="onSubmit()">提交</van-button>

  </div>
</template>

<script>
import GoToHome from './goToHome.vue'
import { verificationForn } from './indexData'
export default {
  data () {
    return {
      form: {
        phone1: '',
        phone2: '',
        phone3: '',
        phone4: '',
        phone5: '',
        phone6: '',
        phone7: ''
      }
    }
  },
  methods: {
    onSubmit () {
      if (verificationForn(this.form)) {
        console.log(1111)
      }
    }
  },
  components: {
    GoToHome
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  border: 1px solid black;
  border-radius: 4px;
}
</style>