更新记录

1.0.1（2020-11-17）

1. 修复初始化问题

1.0.0（2020-10-22）

1. 发布 1.0.0

平台兼容性

写在前面：

欢迎各位老铁反馈 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. 属性说明

2. 事件说明

更新日志

2020-11-17

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

2020-10-22

1. 发布 v-tabs-column 1.0.0 版本