uniapp 实现切换tab锚点定位到指定位置

1.主要使用uniapp scroll-view 组件的scroll-into-view属性实现功能

2.代码如下

javascript 复制代码
  <scroll-view
      :scroll-into-view="intoView"
    >
       <u-tabs

          class="tabs-list"
          @change="tabChange"
          :list="tabList"
        
        >
        </u-tabs>
        <view id="1"></view>
           <view id="2"></view>
           <view id="3"></view>
           <view id="4"></view>
    </scroll-view>
javascript 复制代码
      tabList: [
        {
          name: "1",
          id: "1",
        },
        {
          name: "2",
          id: "2",
        },
        {
          name: "3",
          id: "3",
        },
        {
          name: "4",
          id: "5",
        },
      ],
      intoView: "",
    tabChange(e) {
      this.intoView = e.id;
    },
相关推荐
Cikiss8 分钟前
微服务实战——SpringCache 整合 Redis
java·redis·后端·微服务
wxin_VXbishe9 分钟前
springboot合肥师范学院实习实训管理系统-计算机毕业设计源码31290
java·spring boot·python·spring·servlet·django·php
Cikiss10 分钟前
微服务实战——平台属性
java·数据库·后端·微服务
无敌の星仔19 分钟前
一个月学会Java 第2天 认识类与对象
java·开发语言
楚灵魈22 分钟前
[Linux]从零开始的网站搭建教程
linux·运维·服务器
OEC小胖胖24 分钟前
Spring Boot + MyBatis 项目中常用注解详解(万字长篇解读)
java·spring boot·后端·spring·mybatis·web
小小不董24 分钟前
《Linux从小白到高手》理论篇:深入理解Linux的网络管理
linux·运维·服务器·数据库·php·dba
工业互联网专业28 分钟前
毕业设计选题:基于ssm+vue+uniapp的校园水电费管理小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
豆豆42 分钟前
为什么用PageAdmin CMS建设网站?
服务器·开发语言·前端·php·软件构建
2401_857617621 小时前
SpringBoot校园资料平台:开发与部署指南
java·spring boot·后端