uView tab切换组件 吸顶

使用 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}

定义html

<view v-if="current == 0"> <index :list='list'></index></view>
<view v-if="current == 1"><looked :list='list'></looked></view>
<view v-if="current == 2"><communication :list='list'></communication></view>

js切换方法：

    change(index) {
      this.current = index;
      this.getList()
    }

方法中的getList中的逻辑 ， 给query 中的type 赋值 = current，再去进行查询

如果需要吸顶的话： u-sticky

使用slot，将需要吸顶的内容放在Sticky组件中即可，slot中只能有一个根元素

		<u-sticky>
			<!-- 只能有一个根元素 -->
			<view class="sticky">
			</view>
		</u-sticky>

将 view替换，再自己按照需求调试即可

参考文档：介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)