更新记录

1.0.5（2021-02-16）

修复双向绑定无效的问题

1.0.4（2021-02-06）

• 移除active属性
• 移除marginX属性
• 新增v-model属性
• 新增gutter属性
• 修复点击区域过小的问题

1.0.3（2021-02-05）

修复小程序报错的BUG 移除fontStyle属性，小程序不支持 新增字体大小属性

平台兼容性

代码示例

<template>
  <view>
    <mzy-tabs :list="list" v-model="active" @change="handleChange"/>
  </view>
</template>
<script>
  const list = ['标题1','标题2','标题3']
  export default {
    data:() => ({
      list,
      active:0
    }),
    methods:{
      /**
      * 第一个参数是索引，第二个参数是对应的元素
      */
      handleChange(index,tab){
        console.log(index,tab)
      }
    }
  }
</script>

属性说明

参数	类型	默认	说明	示例
list	Array<Object | String | Number>	[]	标题列表，如果是对象需要设置属性listKey	[{ label:'标题1',value:1 },{ label:'标题2',value:2 }]
listKey	String	"label"	标题显示的字段，对象数组需要设置
v-model	Number	0	绑定的索引值
background	String	""	整体的背景样式	"#fff"
center	Boolean	false	居中布局
grow	Boolean	false	整体铺满，每个选项平均分配宽度，此时滑动无效
color	String	"#333"	未选中时候的颜色，activeColor和滑块颜色默认使用这个值
activeColor	String	""	选中时候的颜色
height	Number	40	整体高度，默认是40px
gutter	Number	8	每个标题的水平间隔，默认是8px，grow布局下无效
paddingX	Number	0	整体的左右间隔，仅滑动布局下有效
fontSize	Number	14	字体的大小
slider	Object	{ bottom:2, width:20, height:4, speed:0.2 }	滑块属性

slider

事件说明

遗留问题

苹果手机无法隐藏滚动条