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;
    },
相关推荐
无敌最俊朗@6 小时前
STL-vector面试剖析(面试复习4)
java·面试·职场和发展
哇哈哈&6 小时前
gcc9.2的离线安装,支持gcc++19及以上版本
linux·运维·服务器
PPPPickup6 小时前
easychat项目复盘---获取联系人列表,联系人详细,删除拉黑联系人
java·前端·javascript
一条咸鱼¥¥¥6 小时前
【运维经验】使用QQ邮箱SMTP服务器设置ssms计划任务完成时邮件发送
运维·服务器·经验分享·sql·sqlserver
LiamTuc6 小时前
Java构造函数
java·开发语言
长安er7 小时前
LeetCode 206/92/25 链表翻转问题-“盒子-标签-纸条模型”
java·数据结构·算法·leetcode·链表·链表翻转
菜鸟plus+7 小时前
N+1查询
java·服务器·数据库
我要添砖java7 小时前
《JAVAEE》网络编程-什么是网络?
java·网络·java-ee
CoderYanger7 小时前
动态规划算法-01背包问题:50.分割等和子集
java·算法·leetcode·动态规划·1024程序员节
Caster_Z8 小时前
WinServer安装VM虚拟机运行Linux-(失败,云服务器不支持虚拟化)
linux·运维·服务器