@dj-ui/dj-tabbar NPM

TabsView

参数	说明	类型	默认值	是否必传
height	高度（单位：rpx）	Number	90	false
color	字体颜色	String	#333333	false
activeColor	激活状态下字体颜色	String	#E0BC75	false
activeIcon	激活状态下图标（展示在 tab 下方）	String	-	false
layout	排列方式（center:居中对齐方式；between:两端对齐； left:左对齐；right:右对齐）	String	center	false
margin	间距	Number	0	false
dataSource	数据（type:' sort' 展示排序按钮） { name:'销量' ,type:' sort' 展示排序按钮 }	Arrary	[]	true
active	激活下标	Number	0	false
tabClick	tab 点击回调 { active, data, sortIndex}	Function	-	false

<template>
  <TabsView
    :dataSource="dataSource"
    :margin="10"
    layout="left"
    @tabClick="tabClick($event)"
  ></TabsView>
</template>

<script>
import TabsView from "@/components/TabsView";
export default {
  data() {
    return {
      dataSource: [
        { name: "上新" },
        { name: "销量" },
        { name: "价格", type: "sort" },
      ],
    };
  },
  components: {
    TabsView,
  },
  methods: {
    tabClick(ev) {
      console.log(ev);
    },
  },
};
</script>

uniapp tabbar 自动滚动多种布局方案

@infinitebrahmanuniverse/nolb-_dj @everything-registry/sub-chunk-247 @zalastax/nolb-_dj

1.0.0

2 years ago