uniapp实现可滑动顶部选项卡

利用<scroll-view>和<swiper>实现可滑动顶部选项卡，实现效果类似下图：

这里，简单模拟一下，实现一个大致效果

一、构建顶部tab选项按钮步骤

使用<scroll-view>组件布局，横向滑动需要使scroll-x="true"
设置选项按钮的初始数据barNameList及当前默认第一个tab所在位置tabIndex
点击选项按钮获取当前下标值@click="ontabtap"，切换状态

<scroll-view id="tab" scroll-x="true"><view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index" @click="ontabtap"><text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text></view>
</scroll-view>

<script>export default{data(){return{tabIndex:0,barNameList:[{name: '待审核',id: '0'}, {name: '审核中',id: '1'}, {name: '已审核',id: '2'},{name: '全部',id: '3'}]}},methods:{// scroll-view 点击 tab 时 改变下标ontabtap(e){let index = e.target.dataset.current || e.currentTarget.dataset.current;this.switchTab(index);},switchTab(index){if(this.tabIndex == index){return}this.tabIndex = index;}}}
</script>

二、构建下方swiper内容数据步骤

使用<swiper>和<swiper-item>组件布局
设置初始数据barContentList(假数据，项目中应该从接口中获取，此处只是为了方便看效果)
滑动swiper获取当前下标值@change="tabChange"，切换状态

<swiper id="tabContent" :current="tabIndex" @change="tabChange"><swiper-item v-for="(item,index) in barContentList" :key="item.id"><view><text>{{item.title}}</text><text>{{item.statusLabal}}</text><text>{{item.content}}</text></view></swiper-item>
</swiper>

<script>export default{data(){return{barContentList:[{id:"01",title:"标题1",status:"0",statusLabal:"待审核",content:"的声音如同风格与噶人菲亚特古"},{id:"02",title:"标题2",status:"1",statusLabal:"审核中",content:"大唐贵妃打瑞文u哦i"},{id:"03",title:"标题3",status:"2",statusLabal:"已审核",content:"大唐贵妃打瑞文u哦i"},{id:"04",title:"标题4",status:"3",statusLabal:"全部",content:"大唐贵妃打瑞文u哦i"}]}},methods:{// swiper滑动时改变下标tabChange(e){let index = e.target.current || e.detail.current;  // 获取到当前移动到第几个this.switchTab(index);},switchTab(index){if(this.tabIndex == index){return}this.tabIndex = index;}}}
</script>

style样式

<style>#tab{width: 100%;display: flex;}.tabName{text-align: center;width: 25%;display: inline-block;height: 80rpx;line-height: 80rpx;white-space: nowrap;}.tabName_text{display: inline-block;width: 100%;height: 100%;}.active_text{background-color: #FDDD9B;color: #FFFFFF;}#tabContent{width: 100%;}
</style>

两部分建立起效果连接的主要方法是通过点击tab或滑动swiper更改了下标值，将tabIndex值进行更新，因为二者都需要tabIndex值，所以一个改变了另一个也会随之改变，这样就实现了点击顶部tab下面内容会切换，滑动swiper顶部tab会切换二者同步的效果。

（丑丑的样式可忽略 ━━(￣ー￣*|||━━）

三、下面是请求接口形式的完整代码

<template><view><scroll-view id="tab" scroll-x="true"><view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index" @click="ontabtap"><text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text></view></scroll-view><swiper id="tabContent" :current="tabIndex" @change="tabChange"><swiper-item v-for="(item,index) in barContentList" :key="item.id"><view v-for="(listItem,listIndex) in item.data"><text>{{listItem.title}}</text><text>{{listItem.statusLabal}}</text><text>{{listItem.content}}</text></view></swiper-item></swiper></view>
</template><script>export default{data(){return{tabIndex:0,barNameList:[{name: '待审核',id: '0'}, {name: '审核中',id: '1'}, {name: '已审核',id: '2'},{name: '全部',id: '3'}],barContentList:[]}},methods:{onLoad() {setTimeout(()=>{this.barNameList.forEach((tabBar) => {this.barContentList.push({data: [],isLoading: false,refreshText: "",loadingText: '加载更多...'});}); this.getList(0); // 默认初始获取第一个选项对应的数据},350)},// 获取列表数据getList(index){let activeTab = this.barContentList[index];let list = [];// ......// 这里请求接口--> 获取数据返回值data--> list.push(data);// ......activeTab.data = activeTab.data.concat(list);},// swiper滑动时改变下标tabChange(e){let index = e.target.current || e.detail.current;  // 获取到当前移动到第几个this.switchTab(index);},// scroll-view 点击 tab 时 改变下标ontabtap(e){let index = e.target.dataset.current || e.currentTarget.dataset.current;this.switchTab(index);},switchTab(index){if(this.tabIndex == index){return}// 先清空前面访问的swiper的缓存，要不再次切换到之前访问过的tab的时候内容会显示多次this.barContentList[this.tabIndex].data = [];// 后赋值this.getList(index);this.tabIndex = index;}}}
</script><style>#tab{width: 100%;display: flex;}.tabName{text-align: center;width: 25%;display: inline-block;height: 80rpx;line-height: 80rpx;white-space: nowrap;}.tabName_text{display: inline-block;width: 100%;height: 100%;}.active_text{background-color: #FDDD9B;color: #FFFFFF;}#tabContent{width: 100%;}
</style>

可参考官网hello uniapp项目：https://hellouniapp.dcloud.net.cn/pages/template/tabbar/tabbar

uniapp实现可滑动顶部选项卡相关推荐

uniapp顶部选项卡左右切换栏目(微信小程序)
此次阐述的内容是使用uniapp小程序端实现顶部选项卡的功能. 如下三步即将实现: 一:view层 <scroll-view class="tab" scroll-x=&qu ...
uniapp 顶部选项卡 TopTabBar
在官网tabBar那里,只能自己手动实现效果图如下 1. 项目结构 + home + mine + TopBar + TopBarComponent + guanzhu.vue ...
uniapp实现左右滑动效果
uniapp实现左右滑动效果代码展示: <template><view class="container999" @click="conClick&q ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...
TableView/CollectionView 滑动顶部效果优化
TableView/CollectionView 滑动顶部效果优化默认弹簧效果在使用 UITableView 或者 UICollectionView 时,如果开启弹框效果,下拉是整个内容就会偏移, ...
TabTopUnderLineLayout【自定义顶部选项卡（带下划线）】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言自定义顶部选项卡布局LinearLayout类,实现带下划线样式的效果. 备注:如果配合Fragment的话,MainActivit ...
Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window，所以要另外去做监听和触控事件的传递}
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window,所以要另外去做监听和触控事件的传递} 效果![请添加图片描述](https://img-blog.csdnimg.c ...
flutter 导航组件 AppBar （含顶部选项卡TabBar，抽屉菜单 drawer ，自定义导航图标）
AppBar 组件的结构 AppBar 组件的代码 AppBar(leading: Icon(Icons.home), // 导航图标title: Text('AppBar Title'), // 页 ...

uniapp实现可滑动顶部选项卡

uniapp实现可滑动顶部选项卡

uniapp实现可滑动顶部选项卡相关推荐

最新文章

热门文章