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;
    },
相关推荐
xxc_my25 分钟前
LVS高可用负载均衡
服务器·负载均衡·lvs·高可用
Mryan200534 分钟前
解决GraalVM Native Maven Plugin错误:JAVA_HOME未指向GraalVM Distribution
java·开发语言·spring boot·maven
Naomi52134 分钟前
自定义汇编语言(Custom Assembly Language) 和 Unix & Git
服务器·开发语言·git·unix
VX_CXsjNo144 分钟前
免费送源码:Java+SSM+Android Studio 基于Android Studio游戏搜索app的设计与实现 计算机毕业设计原创定制
java·spring boot·spring·游戏·eclipse·android studio·android-studio
ylfhpy1 小时前
Java面试黄金宝典33
java·开发语言·数据结构·面试·职场和发展·排序算法
乘风!1 小时前
Java导出excel,表格插入pdf附件,以及实现过程中遇见的坑
java·pdf·excel
小小鸭程序员1 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
H1346948902 小时前
企业服务器备份软件,企业服务器备份的方法有哪些?
运维·服务器·负载均衡
skywalk81632 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
南宫生2 小时前
Java迭代器【设计模式之迭代器模式】
java·学习·设计模式·kotlin·迭代器模式