1 Star 2 Fork 0

xfjpeter / uni-plugins

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
readme.md 3.70 KB
一键复制 编辑 原始数据 按行查看 历史
xfjpeter 提交于 2020-11-17 11:03 . 修复 v-tabs-columns 初始化问题

写在前面:

欢迎各位老铁反馈 bug ,本人后端 PHP 一枚,只是应为感兴趣前端,自己琢磨,自己搞。如果你在使用的过程中有什么不合理,需要优化的,都可以在下面评论(或加我 QQ: 1207791534,QQ 群: 917543334),本人看见后回复、修正,感谢。

插件说明

常用于分类列表左侧导航,支持 H5,小程序,APP,不支持 nvue

使用说明

1. 最基本的用法

  • 视图文件
<v-tabs-column :tabs="tabs" position="left" v-model="current">
  <view class="p" v-for="i in 100" :key="i">{{ i }}我只是静态的文字,展示作用</view>
</v-tabs-column>
  • js 文件
export default {
  data() {
    return {
      current: 0,
      tabs: ['服装', '手机', '鞋子', '衬衣', 'T桖', '键盘', '电脑', '手机', '玩具', '电瓶车', '背包', '手表', '餐具']
    }
  }
}

2. 完整用法

  • 视图文件
<v-tabs-column
  :tabs="tabs"
  :is-tabbar="false"
  position="left"
  active-color="purple"
  inactive-color="#444"
  bg-color="#ccc"
  active-bg-color="#f3f3f3"
  v-model="current"
  padding="30rpx 30rpx"
  bold="bold"
  @change="changeTab"
>
  <view class="p" v-for="i in 100" :key="i">{{ i }}我只是静态的文字,展示作用</view>
</v-tabs-column>
  • js 文件
export default {
  data() {
    return {
      current: 0,
      tabs: ['服装', '手机', '鞋子', '衬衣', 'T桖', '键盘', '电脑', '手机', '玩具', '电瓶车', '背包', '手表', '餐具']
    }
  },
  methods: {
    changeTab(index) {
      uni.showToast({
        title: '当前选中的是:' + this.tabs[index],
        icon: 'none'
      })
    }
  }
}

文档说明

1. 属性说明

参数 类型 默认值 说明
value Number 0 必传(双向绑定的值)
width String '240rpx' 宽度
height String '' 高度
bg-color String '#f3f3f3' 背景颜色
tabs Array [] 列表
is-tabbar Boolean false 底部是否有 tabbar [true] [false]
position String left 位置 left(左侧) right(右侧)
field String '' 当传入的数组里面是对象时,传入键名
inactiveStyle Object,String '' 默认样式
activeStyle Object,String '' 激活的样式
activeColor String '#f00' 激活的文字颜色
inactiveColor String '#333' 默认的文字颜色
activeFontSize String '32rpx' 激活的文字大小
inactiveFontSize String 28rpx 默认的文字大小
padding String '30rpx' 内边距
bold String,Number 500 选中文字加粗效果

2. 事件说明

名称 参数 说明
change index 改变选中项触发, index 选中项的下标

更新日志

2020-11-17

  1. 更新初始设置 current 值,没有切换到指定选项问题

2020-10-22

  1. 发布 v-tabs-column 1.0.0 版本
1
https://gitee.com/xfjpeter/uni-plugins.git
git@gitee.com:xfjpeter/uni-plugins.git
xfjpeter
uni-plugins
uni-plugins
master

搜索帮助