uniapp中顶部tap头切换的三种方式

已于 2023-03-01 10:21:25 修改
阅读量2.2k 收藏 21
点赞数 5
分类专栏： tap头选项卡切换 文章标签： 前端 Powered by 金山文档
于 2023-03-01 10:19:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57400398/article/details/129274461
版权

一、适合tap头选项较少的 上方不带滑动

<!-- 适合少量的选项头 -->

<template>
    <view>
        <view class="topTabBar">
            <view class="grid" v-for="(item, tbIndex) in handlingType" :key="tbIndex" @tap="showType(tbIndex)">
                <view class="text" :class="[tbIndex == tabbarIndex ? 'active' : '']">{{ item.value }}</view>
            </view>
        </view>
        <view class="" style="margin-top: 100upx;padding: 0 20upx;">
            <block v-if="tabbarIndex==0">
               <view class="">
                    <text>我是内容</text>
               </view>
            </block>
            
            <block v-if="tabbarIndex==1">
               <view class="">
                    <text>我是内容</text>
                 <text>我是内容</text>
               </view>
            </block>
            <!-- 示例 -->
            <!-- <block v-if="eventInfoList.length > 0">
                <view class="infoList" v-for="(item, index) in eventInfoList" :key="index">
                    <view class="" style="width: 80%;">
                        <view class="">
                            <text style="color: #b7b7b7; ">问题类型：</text>
                            {{ item.typeName }}
                        </view>
                        <view class="">
                            <text style="color: #b7b7b7; ">上报时间：</text>
                            {{ item.reportTimeStr }}
                        </view>
                        <view class="">
                            <text style="color: #b7b7b7; ">问题描述：</text>
                            {{ item.letterNote }}
                        </view>
                    </view>
                    <view class="" style="width: 100%;display: flex;">
                        <button type="default" class="btn1" style="color: #288ff4;background-color: transparent;"
                            @click="getDetalis(item)">查看详情</button>
                    </view>
                </view>
            </block> -->
            <!-- <block v-if="eventInfoList.length == 0">
                <view class="netword">
                    <image src="../../static/zwsj.png" style="width: 200upx;height: 200upx;" mode=""></image>
                    <text style="color: rgb(0, 51, 204);font-weight: 700;font-size: 48upx;">暂无数据</text>
                </view>
            </block> -->
        </view>
    </view>
</template>

<script>
    var that;
    export default {
        data() {
            return {
                tabbarIndex:0,
                handlingType: [
                    {
                        value: '处置中'
                    },
                    {
                        value: '已完成'
                    }
                ],
            };
        },
        methods: {
            showType(tbIndex) {
                that =this
                //跳转订单列表类型
                this.tabbarIndex = tbIndex;
                if(this.tabbarIndex == 0){
                  
                }
                if(this.tabbarIndex == 1){
                    
                }
                console.info(this.tabbarIndex)
            },
        }
    };
</script>

<style>
    .topTabBar {
        width: 100%;
        height: 80upx;
        display: flex;
        justify-content: space-around;
        position: fixed;
        top: 45px;
        background-color: #f8f8f8;
    }
    .grid {
        width: 20%;
        height: 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #444;
        font-size: 28upx;
    }
    .text {
        height: 76upx;
        display: flex;
        align-items: center;
    }
    .active {
        color: #0a79ff;
        border-bottom: solid 4upx #0a79ff;
    }
    /* .infoList {
        background-color: #FFFFFF;
        margin-bottom: 20upx;
        padding: 20upx;
        border-radius: 15upx;
    } */
</style>

二、适合多选项头 选项头带滑动

<!-- 适合种类多的选项头 -->
<template>
    <view>
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-with-animation>
            <view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
                :class="navIndex==index ? 'activite' : ''" @click="checkIndex(index)">{{tab.name}}</view>
        </scroll-view>
        <!-- 内容切换 -->
        <view class="content" v-if="navIndex==0">
            我是选项1
        </view>
        <view class="content" v-if="navIndex==1">
            我是选项2
        </view>
        <view class="content" v-if="navIndex==2">
            我是选项3
        </view>
        <view class="content" v-if="navIndex==3">
            我是选项4
        </view>
        <view class="content" v-if="navIndex==4">
            我是选项5
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                navIndex: 0,
                tabBars: [{
                    name: '关注',
                    id: 'guanzhu'
                }, {
                    name: '推荐',
                    id: 'tuijian'
                }, {
                    name: '体育',
                    id: 'tiyu'
                }, {
                    name: '热点',
                    id: 'redian'
                }, {
                    name: '财经',
                    id: 'caijing'
                }, {
                    name: '军事',
                    id: 'junshi'
                }, {
                    name: '历史',
                    id: 'lishi'
                }, {
                    name: '本地',
                    id: 'bendi'
                }],
            }
        },
        methods: {
            checkIndex(index) {
                console.log(index)
                this.navIndex = index;
            },
            scroll: function(e) {
                console.log(e)
                this.scrollTop = e.detail.scrollTop
            },
        }
    }
</script>

<style scoped>
    .activite {
        color: blue;
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid blue;
        /* background-color: aliceblue; */
    }
    .content {
        width: 100%;
        margin-top: 15px;
    }

    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
        color: #CCCCCC;
        font-size: 15px;
    }

    .scroll-view-item_H {
        display: inline-block;
        width: 20%;
        /* height: 50rpx; */
        line-height: 50rpx;
        text-align: center;
        padding: 10px 0;
    }
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    /deep/.uni-scroll-view::-webkit-scrollbar {
        display: none
    }
</style>

三、选项头带滑动且随着点击会自动滑动

<template>
    <view class="content">
        <view class="nav">
            <!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
            <scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
                <view class="tab-scroll_box">
                    <!-- 选项卡类别列表 -->
                    <view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
                            {{item.name}}
                    </view>
                </view>
            </scroll-view>
        </view>
        <!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
        <swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡1页面
                    </view>
                </scroll-view>    
            </swiper-item>
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡2页面
                    </view>
                </scroll-view>    
            </swiper-item>
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡3页面
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡4页面
                    </view>
                </scroll-view>    
            </swiper-item>
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡5页面
                    </view>
                </scroll-view>    
            </swiper-item>
            <swiper-item class="swiperitem-content">
                <scroll-view scroll-y style="height: 100%;">
                    <view class="nav_item" >
                        选项卡6页面
                    </view>
                </scroll-view>    
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
    export default {
        watch:{
            // swiper与上面选项卡联动
            currentindex(newval){
                this.isActive = newval;
                this.scrollLeft = 0;
                // 滑动swiper后，每个选项距离其父元素最左侧的距离
                for (let i = 0; i < newval - 1; i++) {
                    this.scrollLeft += this.category[i].width
                };
            },
        },
        data() {    
            return {
                isActive: 0,
                index: 0,
                currentindex:0,
                category:[
                    {
                        id:1,
                        name:'选项卡一',
                    },
                    {
                        id:2,
                        name:'选项卡二',
                    },
                    {
                        id:3,
                        name:'选项卡三',
                    },
                    {
                        id:4,
                        name:'选项卡四',
                    },
                    {
                        id:5,
                        name:'选项卡五',
                    },
                    {
                        id:6,
                        name:'选项卡六',
                    },
                ],
                contentScrollW: 0, // 导航区宽度
                scrollLeft: 0, // 横向滚动条位置
                fullHeight:"",    
            }
        },
        mounted() {
            var that = this;
             //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
            uni.getSystemInfo({
                  success: function (res) {
                         that.fullHeight ="height:" + res.windowHeight + "px";
                  }
                });
            // 获取标题区域宽度，和每个子元素节点的宽度
            this.getScrollW()
        },
        methods: {
            // 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
            getScrollW() {
                const query = uni.createSelectorQuery().in(this);
                query.select('.tab-scroll').boundingClientRect(data => {
                      // 拿到 scroll-view 组件宽度
                      this.contentScrollW = data.width
                 }).exec();
                 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
                     let dataLen = data.length;
                      for (let i = 0; i < dataLen; i++) {
                          //  scroll-view 子元素组件距离左边栏的距离
                          this.category[i].left = data[i].left;
                         //  scroll-view 子元素组件宽度
                         this.category[i].width = data[i].width
                    }
                 }).exec()
            },
            // 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
            chenked(index) {
                this.isActive = index;
                this.scrollLeft = 0;
                for (let i = 0; i < index - 1; i++) {
                    this.scrollLeft += this.category[i].width
                };
            },
            // swiper滑动时，获取其索引，也就是第几个
            change(e){
                const {current} = e.detail;
                this.currentindex = current;
            },    
        }
    }
</script>
<style lang="scss">
    page{
        height: 100%;
        display: flex;
        background-color: #FFFFFF;
    }
    .content{
        display: flex;
        flex-direction: column;
        width: 100%;
        flex: 1;
        .nav{
            border-top: 1rpx solid #f2f2f2;
            background-color: #fceeee;    
            position: fixed;
            z-index: 99;
            width: 100%;
            align-items: center;
            height: 100rpx;
            .tab-scroll{
                flex: 1;
                overflow: hidden;
                box-sizing: border-box;
                padding-left: 30rpx;
                padding-right: 30rpx;
                .tab-scroll_box{
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;
                    box-sizing: border-box;
                    .tab-scroll_item{
                        line-height: 60rpx;
                        margin-right: 35rpx;
                        flex-shrink: 0;
                        padding-bottom:10px;
                        display: flex;
                        justify-content: center;
                        font-size: 16px;
                        padding-top: 10px;
                    }
                }
            }
        }
        .swiper-content{
               padding-top: 120rpx;
               flex: 1;
            .swiperitem-content{
                background-color: #ffffff;
                .nav_item{    
                    background-color: #FFFFFF;
                    padding:20rpx 40rpx 0rpx 40rpx ;
                }
            }
        }    
    }
    .active {
        position: relative;
        color: #ff0000;
        font-weight: 600;
    }
    .active::after {
        content: "";
        position: absolute;
        width: 130rpx;
        height: 4rpx;
        background-color: #ff0000;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
    }
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    /deep/.uni-scroll-view::-webkit-scrollbar {
        display: none
    }
</style>
Mr.Liu notes
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 顶部tab切换菜单
03-16
最近在使用uniAPP做项目，页面中要使用到顶部tab菜单，但又不想使用别人的插件，于是自己用代码实现了一下
uniapp原生插件的demo写法
08-22
直接在这个demo中写uniapp的（Android）原生插件的代码即可。 package.json {"name": "xt-HelloWorld","id": "xt-HelloWorld", "version": "1.0.0","description": "PictureView","_dp_type": "nativeplugin", "_dp_nativeplugin": { "android": { "hooksClass": "", "plugins": [ { "type": "module", "name": "xt-HelloWorld", "class": "com.example.helloworld.HelloWorld"} ],"integrateType": "aar", "abis": []}}}
uniapp制作简单的tab切换
最新发布
weixin_54721820的博客
02-29 1844
Uniapp作为一款跨平台的开发工具，提供了一种简便的制作tabbar滑动切换的方法。本文将介绍UniAPP如何实现tabbar滑动切换，并带有详细的示例代码。
uniapp项目实现顶部tab导航栏切换
m0_72929120的博客
06-30 1228
【代码】uniapp项目实现导航栏切换。
uniapp 页面顶部选项卡
qq_47255575的博客
12-29 536
uniapp 页面顶部选项卡
uni-app 顶部tab切换菜单 顶部可滑动切换菜单
zhongli_的博客
06-10 7261
顶部tab切换菜单（都是最基础的） 第一种卡片切换 demo.vue <view class="tab"> <view class="tabItem" :class="{'active' : 0 == current}" @click="clickTab(0)"> 自选 </view> <view class="tabItem" :class="{'...
uni-app实现滑动切换效果
weixin_59702843的博客
06-18 7865
uni-app框架了解实现一个滚动切换tab效果，这个很常见的一个效果，最后封装成一个组件，便于之后使用，写这个须要引入uni官方提供的uni.css样式，用到了写好的样式，就不须要本身写了css
uniapp 实现tab切换(可滑动,可点击)
m0_60997870的博客
03-17 1141
核心思想 tab通过 scroll-view实现 列表内容通过swiper组件包裹scroll-view组件实现。
uniapp中常用tab栏切换和改变对应内容
热门推荐
weixin_45803990的博客
11-01 2万+
<view class="recommend" v-for="(item,index) in list" :key="item" > <text @tap="changeAct(index)" >{{item}}</text> <view :class="[act==index ? 'active':'']"> </view> </view> <view class="col
uniapp 实现可滑动顶部选项卡（菜单）
maoge_666的博客
04-10 2743
uniapp 实现可滑动顶部选项卡（菜单）
uni-app 简单顶部tab切换菜单3—可滑动切换菜单
qq_59795720的博客
05-27 6172
顶部tab是可滑动，用scroll-view实现，内容部分比较潦草，可以自行更改，话不多说上代码，最后有完整的代码（复制即可用） HTML <template> <view> <!-- tab部分 --> <swiper class="ct_tab"> <swiper-item :class="{ 'ct_active': index == tabCur }" v-for="(item, index) in t...
uniAPP，页面中要使用到顶部tab菜单.zip
06-14
uniAPP，页面中要使用到顶部tab菜单，代码实现uniAPP，页面中要使用到顶部tab菜单，代码实现
uniapp实现可以左右滑动导航栏
01-18
本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码，供大家参考，具体内容如下 <vi
uniapp vue 不规则tab
06-24
uniapp vue 不规则tab 特效
uniapp 微信小程序 城市列表切换
06-19
cityCode.js
tap驱动 TAP-Windows Adapter V9
11-21
TAP Windows适配器V9:当安装软件或登录时，遇到TAP驱动未安装或已损坏的提示时，检查是否安装 TAP Windows适配器V9。 检查方法： 1.按 Windows + R 一起启动运行窗口。 2.输入命令 devmgmt.msc 进入盒子。 击中 Enter 现在。 这将打开 设备管理器。 3.点击网络适配器，查看是否存在TAP Windows适配器V9，存在说明TAP Windows适配器V9已损坏，需要卸载后重新安装，如果不存在则需要安装TAP Windows适配器V9。
最简单的tap切换jquery
09-11
极简单的tap切换，使用jquery的方法。引用一个jquery.js即可
signaltap_user_guide.rar_altera 中文_signaltap
09-14
signaltap 中文说明，内容详细。 ALTERA signaltap USER GUIDE IN CHINESE
zepto.js中tap事件阻止冒泡的实现方法
01-19
本文实例讲述了zepto.js中tap事件阻止冒泡的实现方法。分享给大家供大家参考。具体如下： 最近在弄一个手机版的网站，本来想用jQuery Mobile，但文件太大了，所以用了zepto.js 由于移动网页中使用click事件会有延迟...
uniapp中@tap
10-10
@tap 是 uniapp 中的一个事件修饰符，用于监听点击事件。当使用 @tap 修饰一个元素时，当用户在移动端点击该元素或在 PC 端使用鼠标点击该元素时，将会触发相应的事件。 @tap 修饰符相比于 @click 修饰符，有以下几...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值