微信小程序丝滑的tab栏

目录

前言

一、快速开始

二、实战

1.在index.js

2.在index.wxcss

3.在 index.wxml

3.效果

---

前言

产品拿着某个app的页面来找到我说：”做一个和她这一样湿滑的Tab栏效果”，我当时像敲死ta。但是咱毕竟是程序员么，前端程序员，于是乎就有了下面这个通过scroll-view+swiper相结合的组装出的tab效果。

一、快速开始

•  需要了解scroll-view：可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。微信小程序官网介绍scroll-view

• 需要了解swiper：滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。官网介绍
• swiper-item：仅可放置在swiper组件中，宽高自动设置为100%。官网介绍

二、实战

通过配置 .js、wxml、wxcss

1.在index.js

 data: {
        motto: 'Hello World',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo'), navData: [
            {
                text: '孕产妇'
            },
            {
                text: '婴幼儿'
            },
            {
                text: '中老年人'
            },
            {
           
            {
                text: '传染病'
            },
            {
                text: '精神病'
            },
            {
                text: '职业病'
            },
            {
                text: '老年病'
            },
            {
                text: '疾病'
            }
        ],
        currentTab: 0,
        navScrollLeft: 0,
        windowWidth: wx.getSystemInfoSync().windowWidth,  list: [{ title: " 啊实打实大所大所多", img: "最新！新增确诊病例59例，其中本土50例" },
        { title: " 阿萨大师大大", img: "" },
        ]
    },


 //事件处理函数
    onLoad: function () {
        var that = this;
        //  高度自适应 wx.getSystemInfo({
            success: function (res) {
                var clientHeight = res.windowHeight,
                    clientWidth = res.windowWidth, rpxR = 750 / clientWidth;
                var calc = clientHeight * rpxR - 180;
                console.log(calc)  that.setData({
                    winHeight: calc
                });
            }
        });  },
    switchNav(event) {
        var cur = event.currentTarget.dataset.current;
        //每个tab选项宽度占1/5
        var singleNavWidth = this.data.windowWidth / 5;
        //tab选项居中                            
        this.setData({
            navScrollLeft: (cur - 2) * singleNavWidth
        })
        if (this.data.currentTab == cur) {
            return false;
        } else {
            this.setData({
                currentTab: cur
            })
        }
    }, switchTab(event) {
        console.log(event);
        var cur = event.detail.current; var singleNavWidth = this.data.windowWidth / 5;
        console.log(cur, "----", singleNavWidth, "----", (cur - 2) * singleNavWidth);

        this.setData({  currentTab: cur,
            navScrollLeft: (cur - 2) * singleNavWidth
        });
        this.checkCor();
    }, //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
        if (this.data.currentTab > 4) {
            this.setData({   scrollLeft: 300
            })
        } else {
            this.setData({  scrollLeft: 0
            })
        }
    },

2.在index.wxcss

page {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
}
.container {
    width: 100%;
    height: 100%;
}
.listPar {
  position: fixed;
  height: 96rpx;
  width: 100%;
  z-index: 2;
}

.more {
    position: absolute;
    width: 120rpx;
    height: 96rpx;
    line-height: 96rpx;
    z-index: 100;
    left: 84%;
    /* background-color: linear-gradient( white 90%, 30% ,#ffffff88 10%); */
    background: linear-gradient(to left top, white 20%, rgba(255, 255, 255, 0.8) 80%);
    /* background-color: fuchsia; */
    text-align
}

.moreImg {
    width: 32rpx;
    height: 32rpx;
}

.nav {
    padding-right: 85rpx;
    position: absolute;
    height: 96rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 96rpx;
    background: white;
    font-size: 16px;
    white-space: nowrap;
     top: 0;
    left: 0;
    z-index: 99;
}

.nav-item {
    margin: 0rpx 34rpx;
    display: inline-block;
    text-align: center;
    line-height: 86rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
}

.nav-item.active {
    font-size: 32rpx;
    font-weight: 500;
    color: #316CEC;
}
.nav-line {
    margin: 0rpx 20rpx;
    height: 0px;
}

.nav-line.active {
    height: 4rpx;
    background: #316CEC;
    border-radius: 8px;
}
.nav-item.active:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 5rpx;
    border-radius: 16rpx;
}
.tab-box {
    background: #F2F2F2;
    height: 100%;
    box-sizing: border-box;
}
.tab-content {
    overflow-y: scroll;
}
.listBg {
    margin: 106rpx 32rpx;
    background-color: white;
    display: flex;
    flex-direction: column;
}
.itemImg {
    height: 320rpx;
    width: 100%;
}

.itemTitle {
    margin: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 48rpx;
    color: #333333;
}

3.在 index.wxml

<view class="container"> 
  <view class="listPar">
  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"  show-scrollbar="false" enhanced="true">
              <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" bindtap="switchNav">
                 <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
                       <view>{{navItem.text}}</view>
                    <view class="nav-line {{currentTab == idx ?'active':''}}"></view>
                </view>
            </block>
        </scroll-view>
   <navigator class="more" bindtap="moreTab" url="./more">
            <image class="moreImg" src="../../../image/icon8.png"></image>
        </navigator>
 </view> 
   <!-- 页面内容 -->
    <swiper class="tab-box" current="{{currentTab}}" duration="200" bindchange="switchTab">
           <swiper-item wx:for="{{navData}}" wx:for-item="navItem" wx:for-index="idx" wx:key="idx" class="tab-content">
     <navigator class="listBg" wx:for="{{list}}" wx:key="index" url="./detailed">
                <image wx:if="{{item.img}}" class="itemImg" src="../../../image/icon17.png"></image>
                      <text class="itemTitle">{{item.title}}</text>
            </navigator>
   </swiper-item>
    </swiper>
</view>

3.效果

使用微信扫一扫查看效果

 【微信扫一扫】