页面滚动条定位到指定位置

需求:页面数据保存时,如页面必填区域存在未填写的部分,滚动条定位到相对应区域,提示输入

 前提:我写的是带锚点的定位,所以滚动跳转 是定位到某个对应的锚点位置上的

点击保存按钮的时候,根据template里面写的锚点id 去跳转

 

      <div class="navigation">
        <p style="font-size: 16px">车型目录</p>
        <ul>
          <li v-for="(item, index) in navigationList" :key="index" class="navigationList" @click="roll(item.id)">
            <a>{{ item.name }}</a>
          </li>
        </ul>
      </div>


 navigationList: [
        {
          name: '车型基础信息',
          id: 'carmodelInfo'
        },
        {
          name: '项目体制',
          id: 'projectSystem'
        }
      ],
//保存事件
save(){
     
     // 调用检查函数,checkFormCompleteness是校验必填项是否填写完整
const baseInfo = ['','',''] // 这个是表单存在必填项的prop
      const isFormComplete = this.checkFormCompleteness(baseInfo, this.ruleForm)
      if (isFormComplete == false) {
        this.roll('carmodelInfo')
        return this.$message.warning(`请检查未填写的车型基础信息`)
      }
   
 },
//表单校验
 checkFormCompleteness(baseInfo, ruleForm) {
      for (const field of baseInfo) {
        if (Array.isArray(ruleForm[field])) {
          if (ruleForm[field].length === 0) {
            return false // 如果是数组且长度为0,则返回false
          }
        } else {
          if (!ruleForm[field]) {
            return false // 如果不是数组且值不存在,则返回false
          }
        }
      }
      return true // 所有字段都有值或者数组长度大于0,则返回true
    },
//跳转,这个id传递的就是锚点绑定的id
   roll(id) {
      let node = this.$el.querySelector('#' + id)
      if (node.offsetTop === 0) {
        node = node.offsetParent
      }
      const scrollEl = this.$refs.scrollRef.$el.querySelector('.el-scrollbar__wrap')
      // scrollEl.scrollTop = node.offsetTop
      scrollEl.scroll({ top: node.offsetTop, behavior: 'smooth' })
      // node.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'start' })
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值