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;
    },
相关推荐
覆东流1 小时前
7.Java数组
java·开发语言·后端
m0_719084111 小时前
限流和获取请求ip的方法
java
lzhdim2 小时前
提高 SQL 语句执行速度的方法
java·开发语言·数据库·sql·oracle
星野川崎2062 小时前
电商多店运维:云机24小时挂机频繁掉线、账号无故风控深度原因分析及解决方案
大数据·运维·服务器·云计算·电商
深漂的华哥3 小时前
Ruoyi-Plus前后端分离场景下,数据加密传输
java·spring boot·后端·开源·maven·ruoyi
RisunJan3 小时前
Linux命令-xauth(X11 认证授权管理)
linux·服务器·microsoft
落魄大学生之流水线上谋生计4 小时前
Java锁全面指南:从基础概念到企业级应用
java·开发语言
熊IT4 小时前
什么是原生住宅 IP?如何判断一个 IP 是否真正“原生”?
服务器·网络·tcp/ip
爱学习的小白柏5 小时前
【AI问数技术】多Agent协同架构:查询规划/SQL生成/洞察分析/报告生成
java·网络·人工智能·windows·sql·架构·llama
码匠许师傅5 小时前
【C++ 面试真题】30. 聊聊 C++ 的互斥锁与读写锁
java·c++·面试