当前位置：首页 > news >正文

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

news 来源：原创 2024/9/29 1:25:25

分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>