更新记录

1.0.1（2023-08-31） 下载此版本

修复部分问题

1.1.1（2023-08-16） 下载此版本

更新说明

1.1（2023-08-16） 下载此版本

上线实例项目

平台兼容性

插件说明

jp-tabs 支持 H5 小程序 手机端，其他端暂时没有测试到

有项目需要开发的请联系 QQ:371524845

开发不易，如果帮助到你的，请支持 有问题请留言，作者会积极更新

使用说明

1、最基本用法

(1)、基础用法

<template>
    <view>
        <jp-tabs  v-model="current" :tabs="tabs"  @change="changeTab"></jp-tabs>
    </view>
</template>
<script>
    export default {
      data() {
        return {
          current: 0,
          tabs:  ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
        }
      },
      methods: {
        changeTab(index) {
          console.log('当前选中的项：' + index)
        }
      }
    }
</script>

(2)、tabs为对象

当时对象时需要传入对应的键名  field=name
当需要角标时也同样需要传入对应的键名  corner = corners
disabled 为控制当前tab是否能选择
<template>
    <view>
        <jp-tabs field="name" v-model="current"  :tabs="tabs"  @change="changeTab"></jp-tabs>
    </view>
</template>
<script>
    export default {
      data() {
        return {
          current: 0,
          tabs: [{ id: 1, name: '待付款', disabled: false },
                { id: 2, name: '待收货', disabled: false ,corners:52},
                { id: 3, name: '待评价', disabled: false },
                { id: 4, name: '退款/售后', disabled: true },
                { id: 5, name: '我的订单', disabled: false }]
        }
      },
      methods: {
        changeTab(index) {
          console.log('当前选中的项：' + index)
        }
      }
    }
</script>

文档说明

1、属性说明

（1）、值控制（用于控制tab功能）

（1）、样式控制（用于控制tab样式）

2、事件说明