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 小时前
ahooks useRequest 深度解析:一个 Hook 搞定所有请求
java·javascript
兆子龙1 小时前
React Suspense 从入门到实战:让异步加载更优雅
java·javascript
咕白m6253 小时前
Java 实现 Excel 转 HTML:完整示例
java
RealPluto4 小时前
Spring AOP 失效排查
java·spring
anyup4 小时前
月销 8000+,uView Pro 让 uni-app 跨端开发提速 10 倍
前端·uni-app·开源
码路飞4 小时前
热榜全是 OpenClaw,但我用 50 行 Python 就造了个桌面 AI Agent 🤖
java·javascript
Nyarlathotep01134 小时前
LinkedList源码分析
java·后端
用户8307196840825 小时前
Java 告别繁琐数据统计代码!MySQL 8 窗口函数真香
java·sql·mysql
带刺的坐椅5 小时前
SolonCode v0.0.20 发布 - 编程智能体(新增子代理和浏览器能力)
java·ai·agent·solon·solon-ai·claude-code·openclaw