uView tab切换组件 吸顶

使用 u-tab切换组件 ，安装 uview 不再多赘述；直接看tab的基础配置：

1.tabs标签的切换，需要绑定current值，在change事件回调中可以得到index，将其赋值给current即可。

2.通过list参数配置，该参数要求为数组，元素为对象，对象要有name属性

1.  
   <u-tabs :list="list"
2.  
   :is-scroll="false"
3.  
   :current="current"
4.  
   bar-width="50"
5.  
   active-color="#4D6FE5"
6.  
   @change="change"
7.  
   ></u-tabs>

除了上面两个其他配置都是样式配置

还有我们需要 change 方法，去切换数据和组件显示

定义好data，最好 current 和 查询条件的 type 分开，不要使用同一个字段，可能我们在下拉，上拉操作时会有一些逻辑错误

1.  
    
2.  
   list: [
3.  
   {name: "所有"},
4.  
   {name: "看过"},
5.  
   {name: "沟通过"}
6.  
   ],
7.  
   current: 0,
8.  
   query: {pageNum:1,pageSize:10,type:0}

定义html

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

js切换方法：

1.  
   change(index) {
2.  
   this.current = index;
3.  
   this.getList()
4.  
   }

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

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

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

1.  
   <u-sticky>
2.  
   <!-- 只能有一个根元素 -->
3.  
   <view class="sticky">
4.  
   </view>
5.  
   </u-sticky>

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

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

这篇好文章是转载于：编程之路