【自用笔记】微信小程序使用van-tab时的问题处理

林希雨

已于 2023-12-14 16:35:59 修改

阅读量1.3k

点赞数 7

文章标签：笔记微信小程序

于 2023-12-14 16:28:54 首次发布

本文链接：https://blog.csdn.net/Lin_javascript/article/details/134997376

版权

在本次项目中，使用了van-tab嵌套，需要更改样式和一些效果：

需求

1.外层tab的字体要比内层tab的字体大，且高度高于内层

2.实现吸顶效果

3.切换时，可以返回原点

4.解决刚开始切换时，因未渲染导致的下划线错位问题

首次进入页面实现大致效果：

切换返回的大致效果（找的别人的图）

首先要引入van组件 .josn

{
    "usingComponents": {
        "van-tab": "@vant/weapp/tab/index",
        "van-tabs": "@vant/weapp/tabs/index"
    }
}

在页面中开始使用 .wxml

（这里我使用bind:change事件是因为实际业务中需要调用不同的接口，所以要进行判断，在这里只是为了演示，所以把业务的东西全部删除了，大家可以根据自己的业务去做不同的处理；列表2中的内嵌tab加id是为了解决下划线错位问题）

<view class="tabBox">
   <van-tabs active="{{active}}" bind:change="onChange" type="card" color="#1c81f6">
       <van-tab title="列表1"  title-style='font-weight: bold; font-size: 32rpx;'>
          <van-tabs active="{{ activeSon }}" bind:change="onChangeSon" color="#1c81f6">
               <van-tab title="菜单1">
                     <view wx:for="{{50}}" wx:key="item"> {{item}} </view>
                </van-tab>
                <van-tab title="菜单2">
                      <view wx:for="{{50}}" wx:key="item"> {{item}} </view>
                 </van-tab>
            </van-tabs>
        </van-tab>
        <van-tab title="列表2" title-style='font-weight: bold; font-size: 32rpx;'>
            <van-tabs active="{{ activeSon2}}" bind:change="onChangeSon" data-item="son2" color="#1c81f6" id="tabOrder">
                <van-tab title="菜单3">
                    <view wx:for="{{50}}" wx:key="item"> {{item}} </view>
                </van-tab>
                <van-tab title="菜单4">
                     <view wx:for="{{50}}" wx:key="item"> {{item}} </view>
                </van-tab>
            </van-tabs>
        </van-tab>
   </van-tabs>
</view>

接下来在 .js中处理逻辑

Page({ 

    data:{
        active: 0,
        activeSon: 0,
        activeSon2: 0,

    },
    onChange(e) {
        let index = e.detail.index;
        if(index == 2){
            //这里是为了防止未渲染导致tab的下划线错位，在你需要的位置加上这句话就可以了
              （因为我这里是嵌套的两个tab，所以刚开始所有的都加上，再通过笨方法进行测试，发现只需要在我需要的地方加就可以了）
            this.selectComponent('#son2').resize()
        }
        // 回到顶部（在切换后能够让滚动条重新回到顶部，如果你设置了两个事件，两个事件就都要加上）
        wx.pageScrollTo({
            duration: 0,
            scrollTop: 0,
        })
        //以下是对数据的重新获取
          this.reset()   //获取前，我习惯先重置一下列表
          this.queryList()
    },
    onChangeSon(e){
        // 回到顶部
        wx.pageScrollTo({
            duration: 0,
            scrollTop: 0,
        })
        //以下是对数据的重新获取
          this.reset() 
          this.queryList()
    },
    //重置
    reset() {
        this.setData({
            dataList: [],
            pageNum: 1,
            pageSize: 10,
            total: 0,
        })
    },
    queryList() {
        //在这里你可以重新获取列表接口，并进行渲染
    }
})

在样式方面，实在不是我的强项，只能用一个丑字形容，但是还是贴出来仅供参考吧。我会详细说明为什么要改这个类名的 .wxss

(在此，重申一下，如果直接照搬模版存在不合理，比如当你使用后发现无法向下滑动，是因为涉及到业务问题，所以我做了删减，实际上我的数据是通过wx:if，并通过wx:for循环显示的，所以在这里的.wxml就不做展示了)

//我比较懒，所以将整个tab的外层盒子用fixed进行固定
.tabBox {
    width: 100%;   //不100%的话，盒子无法铺满整个宽度
    z-index: 999;  //要确保层级最高
    position: fixed;
    top: 0;
}
//这个是因为外层tab我用的card类型，升高了它的高度
.tabBox .van-tabs--card {
    height: 100rpx;
}
//因为我觉着border太多比较繁重，仅保留了下边框，尝试过用border:none;没有效果
.tabBox .van-tabs__scroll--card {
    border-top: none;
    border-right: none;
    border-left: none;
    margin: 0;
    width: 100%;  //为了让tabs平分盒子内容，不留白
    height: 100%;
}
//这个是因为active后的标签background不够，所以要设置一样的高度，让背景色填满
.tabBox .van-tabs__nav--card .van-tab.van-tab--active {
    height: 100rpx;
}
// 内嵌的tab我用的是line型，高度降低，并让它居中
.tabBox .van-tabs--line {
    height: 80rpx;
    align-items: center;
}
//这里主要针对line型内嵌tab中的下划线下划线
.tabBox .van-ellipsis {
    height: 90rpx;
    line-height: 100rpx;
    border-right: none;  //这里发现外层tab在切换到菜单2的时候有一个border比较突兀，就给去掉了
}
//这里是我的数据盒子，因为tab吸顶，所以为了让列表不被遮挡，距顶大约100px，稍微多一点可以留点呼吸
.dataListBox {
    margin-top: 200rpx;
}

虽然丑，但是实现了效果（本来看文档，van-tab有一个吸顶效果，但是我尝试了没有用，大概率是我不会用，所以就使用了原始方法）

如果有其他的坑或者其他的内容，请留言，我将重新整理，一起进步