使用 u-tab切换组件 ,安装 uview 不再多赘述;直接看tab的基础配置:
1.tabs标签的切换,需要绑定current
值,在change
事件回调中可以得到index
,将其赋值给current
即可。
2.通过list
参数配置,该参数要求为数组,元素为对象,对象要有name
属性
<u-tabs :list="list"
:is-scroll="false"
:current="current"
bar-width="50"
active-color="#4D6FE5"
@change="change"
></u-tabs>
除了上面两个其他配置都是样式配置
还有我们需要 change 方法,去切换数据和组件显示
定义好data,最好 current 和 查询条件的 type 分开,不要使用同一个字段,可能我们在下拉,上拉操作时会有一些逻辑错误
list: [
{name: "所有"},
{name: "看过"},
{name: "沟通过"}
],
current: 0,
query: {pageNum:1,pageSize:10,type:0}