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;
    },
相关推荐
热爱生活的猴子7 分钟前
阿里云服务器正确配置 Docker 国内镜像的方法
服务器·阿里云·docker
llwszx1 小时前
深入理解Java锁原理(一):偏向锁的设计原理与性能优化
java·spring··偏向锁
云泽野2 小时前
【Java|集合类】list遍历的6种方式
java·python·list
二进制person2 小时前
Java SE--方法的使用
java·开发语言·算法
耶啵奶膘3 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
小阳拱白菜3 小时前
java异常学习
java
FrankYoou4 小时前
Jenkins 与 GitLab CI/CD 的核心对比
java·docker
计算机毕设定制辅导-无忧学长4 小时前
西门子 PLC 与 Modbus 集成:S7-1500 RTU/TCP 配置指南(一)
服务器·数据库·tcp/ip
麦兜*5 小时前
Spring Boot启动优化7板斧(延迟初始化、组件扫描精准打击、JVM参数调优):砍掉70%启动时间的魔鬼实践
java·jvm·spring boot·后端·spring·spring cloud·系统架构
KK溜了溜了5 小时前
JAVA-springboot 整合Redis
java·spring boot·redis