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;
    },
相关推荐
DokiDoki之父4 小时前
Spring—注解开发
java·后端·spring
CodeCraft Studio5 小时前
【能源与流程工业案例】KBC借助TeeChart 打造工业级数据可视化平台
java·信息可视化·.net·能源·teechart·工业可视化·工业图表
摇滚侠5 小时前
Spring Boot 3零基础教程,WEB 开发 默认页签图标 Favicon 笔记29
java·spring boot·笔记
YSRM5 小时前
Leetcode+Java+图论+最小生成树&拓扑排序
java·leetcode·图论
EndingCoder5 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
沐浴露z6 小时前
【JVM】详解 Class类文件的结构
java·jvm·class
桦说编程6 小时前
Java并发编程:两种控制并发度的实现方法及其比较
java·后端
杯莫停丶6 小时前
设计模式之:单例模式
java·单例模式·设计模式
消失的旧时光-19436 小时前
@JvmStatic 的作用
java·开发语言·kotlin