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;
    },
相关推荐
西岭千秋雪_几秒前
Kafka客户端整合
java·spring boot·分布式·kafka·linq
leonardee5 分钟前
Golang笔记——Interface类型
java·后端
我是好小孩11 分钟前
【Android】RecyclerView的高度问题、VH复用概念、多子项的实现;
android·java·网络
xiaoxue..12 分钟前
用 Node.js 手动搭建 HTTP 服务器:从零开始的 Web 开发之旅!
服务器·前端·http·node.js
张彦峰ZYF13 分钟前
高并发优惠权益聚合接口的优雅实现(含超时控制 + 来源标识 + Fallback 降级)
java·后端·面试
4Forsee15 分钟前
【Android】模板化解决复杂场景的滑动冲突问题
android·java·rpc
若水不如远方19 分钟前
深入 Dubbo 服务暴露机制:从注解到网络的完整链路剖析
java·dubbo
tanxinji21 分钟前
Netty编写Echo服务器
java·netty
LBuffer32 分钟前
破解入门学习笔记题四十七
java·笔记·学习