uview 中u-tabs如何做tab切换?

这篇具有很好参考价值的文章主要介绍了uview 中u-tabs如何做tab切换?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看案例如图所示

uviewtab切换,前端,javascript,vue.jsuviewtab切换,前端,javascript,vue.js

话不多说上代码:

<template>
  <view class="treeroot">
    <view class="">
      <u-tabs 
      :list="list" 
      :is-scroll="false" 
      :current="current" 
      bar-width="50" 
      active-color="orange" 
      @change="change">
      </u-tabs>
      <view v-if="current == 0">
        11
      </view>
      <view v-if="current == 1">
        22
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        //
        list: [{
            name: "额度恢复记录",
          },
          {
            name: "还款记录",
          },
        ],
        //默认展开第几项
        current: 0,
      };
    },
    methods: {
      change(index) {
        this.current = index;
        //如报错则用this.current = index.index;代替上面这句
      },
    },
  };
</script>

<style scoped lang="scss">
 
</style>

 文章来源地址https://www.toymoban.com/news/detail-534630.html

 

 

 

到了这里,关于uview 中u-tabs如何做tab切换?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 通过JavaScript、css、H5 实现简单的tab栏的切换和复用

    目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取

    2023年04月09日
    浏览(39)
  • uniapp微信小程序 u-tabs 下划线不居中、行不填满对齐

     下划线不居中         u-tabs中设置了lineWidth,高亮选项的下划线偏左不居中。例如:  原因:uView版本为2.X,默认为px单位,但lineWidth被页面编译为rpx单位,导致position计算错误。u-tabs计算源码:   解决方案: 方案一:在 main.js 中将uView的配置改回 px单位,即删除配置

    2024年02月12日
    浏览(138)
  • 前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版

    前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模版, 请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13221 效果图如下: 实现代码如下: 使用方法 HTML代码实现部分 组件实现代码

    2024年02月11日
    浏览(57)
  • tab点击切换不使用判断条件进行不同tab的切换刷新

    注:我这里使用的antd vue ui

    2024年02月09日
    浏览(46)
  • 记录使用uview的tabs组件初始化渲染下划线移位问题解决

    问题描述:初始化渲染后 tabs的下划线没有居中对其,出现异位。 问题分析:  网上很多大佬分析过出现原因了 记录下解决的过程:  在各个论坛搜集到解决方案都暂时无效  有使用v-if重新渲染的   有给类赋值偏移值的  有强行转换px的 因为各种原因这些方法在自己身上没有

    2024年02月14日
    浏览(50)
  • day38-Mobile Tab Navigation(手机tab栏导航切换)

    效果 index.html style.css script.js

    2024年02月15日
    浏览(38)
  • easyui tabs切换

    easyui tabs切换之前提醒保存修改的信息 当存在多个tabs,相互切换时提醒保存修改的信息: 这里用的鼠标mousedown事件 例子:一个tab标签页面内有定时器,需要不在当前页时暂定并保存,回到当前页面时,继续 关闭标签或页面,需要保存的情况: 关闭tab相关的情况: 右键关闭所

    2024年02月16日
    浏览(50)
  • tab切换改进版

    2023年04月19日
    浏览(34)
  • uni——tab切换

    2024年02月13日
    浏览(41)
  • uniapp 左右滑动切换页面并切换tab

    实现效果如图 要实现底部内部的左右滑动切换带动上方tab栏的切换,并且下方内容要实现纵向滚动 ,所以需要swiper,swiper-item,scroll-view组合使用 tab栏部分  tab栏点击切换,需要重新调取数据 下方内容部分 滑动切换,改变上方tab栏状态,并重新调取数据 以上即可实现页面左

    2024年02月13日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包