首页 > 其他分享 >tabs

tabs

时间:2023-10-21 23:47:55浏览次数:38  
标签:flex sindex tabs 60rpx height red

<view class="tabs">
    <view class="tabsitem {{sindex==index?'active':''}}" data-index="{{index}}" bindtap="bindtap" wx:for="{{array}}">{{item}}</view>
</view>
Component({
  properties: {
    array: {
      type: Array,
      value: []
    }
  },
  data: {
    sindex: 0
  },
  methods: {
    bindtap(e) {
      let sindex = e.currentTarget.dataset.index
      console.log("sindex", e);
      this.setData({
        sindex
      }) 
      this.triggerEvent('myevent', sindex)
    }
  }
})
.tabs{
  display: flex;
}
.tabsitem{
  flex: 1;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;

}
.active{
  color: red;
  border-bottom: 2rpx solid red;
}

 

标签:flex,sindex,tabs,60rpx,height,red
From: https://www.cnblogs.com/yhgz/p/17779760.html

相关文章

  • error Mixed spaces and tabs no-mixed-spaces-and-tabs
    运行Vue项目出现下面截图中的这个问题百度翻译一下,说是不能同时使用tab键和空格来对代码进行缩进。看了一下代码,确实有行代码缩进了6个字符,改回来正常运行。......
  • 记录使用uview的tabs组件初始化渲染下划线移位问题解决
    问题描述:初始化渲染后tabs的下划线没有居中对其,出现异位。问题分析: 网上很多大佬分析过出现原因了记录下解决的过程: 在各个论坛搜集到解决方案都暂时无效 有使用v-if重新渲染的  有给类赋值偏移值的 有强行转换px的因为各种原因这些方法在自己身上没有奏效所以记......
  • ant design pro<Tabs>切换时可以重新请求
    参考:https://blog.csdn.net/weixin_43915401/article/details/130953169需求:每次切换tab标签都重新发送请求解决方法:destroyInactiveTabPane属性:whetherdestroyinactiveTabPanewhenchangetab,切换tab时,销毁tabPane<TabsdestroyInactiveTabPane>这个属性,官方文档里没有,需......
  • 无涯教程-jQuery - Tabs组件函数
    窗口小部件选项卡函数可与JqueryUI中的窗口小部件一起使用。选项卡用于在分成逻辑部分的内容之间交换。Tabs-语法$("#tabs").tabs();Tabs-示例以下是显示Tab用法的简单示例-<!doctypehtml><htmllang="en"><head><metacharset="utf-8"><title>......
  • 让谷歌实现和edge一样的侧边栏效果--标签分组,侧边tab----acid-tabs
    背景知识+插件推荐----acid-tabsChrome/Edge标签组插件对比https://zhuanlan.zhihu.com/p/464427242edge侧边栏截图百度一下,edge侧边栏很容易实现谷歌这方面,据说是到谷歌114版本后,开始支持侧边栏需要一个插件来强化一下https://www.163.com/dy/article/HER3BD74051196HN......
  • 记一下el-popover和el-tabs嵌套时tabs下划线显示不正确的bug
    在使用el-popover和el-tabs嵌套时出现了这样的bug,组件第一次生成时消息下面的蓝条会消失,需要手动点击之后才会重新出现,记录一下该问题,希望对同样遇到问题的同学有所帮助后来我通过这位博主(http://hk.aiuxian.com/article/p-eirtvdap-ne.html)了解到,这应该是elementui的bug,这位老......
  • 前端Vue自定义登录界面切换tabs 账号登录验证码登录模版 支持手机号校验邮箱校验验证
    前端Vue自定义登录界面切换tabs账号登录验证码登录模版支持手机号校验邮箱校验、验证码发送, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13298效果图如下:cc-loginTabs使用方法<!--selIndex:选中序列 tabs-arr:tabs数组 @tabClic......
  • 前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏 验证码登录模版 密码登录模
    前端Vue自定义验证码密码登录切换tabs选项卡标签栏标题栏验证码登录模版密码登录模版,请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13221效果图如下:实现代码如下:cc-selectBox使用方法<!--select-arr:选择数组nowindex:当前选择序列@change:切换选择......
  • 前端Vue自定义精美tabs,可设置下划线图标 热门标题
    前端Vue自定义精美tabs,可设置下划线图标热门标题,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13186效果图如下:cc-beautyTabs使用方法<!--tabchange:tab选择事件tabList:tab数据--><cc-beautyTabs@tabChange="tabChange":tabList="t......
  • 2023-06-25 uview组件Vtabs 垂直选项卡无法滑动位移
    前言:uni项目中导入uview的vtabs插件来做分页,奈何导入demo后发现无法实现滑动页面来自动选中左侧菜单。原因:大哥!请先看文档,文档里有写,设置chain为true即可左右联动!好吧,是我没留意。解决方案:设置vtabs属性chain为true,官网示例代码:<template><viewclass="content">......