微信小程序 tab页面切换学习01

<!--pages/tabbar/tabbar.wxml-->
<view class="container">
    <view class="applyBox">
        <view class="searchBar">
        <view class="searchbarBox">            
            <view class="searchInput">
                <image class="xuni-icon" ></image>
                <input  type="text" placeholder="职位、技能等"/>
            </view>
        </view>
        </view>
        <view class="chooseTab">
            <view class="choosetabBox" wx:for="{{swiperList}}" wx:for-item="item" wx:key="index">
                <view class="chooseTitle choose{{currentTab == index ? 'Selected' : ''}}" data-id="{{index}}" bindtap="switchNav" >
                    <text>{{item.name}}</text>
                </view>
            </view>
            <view class="tabLineBox" style="transform:{{'translateX('+swiperList[currentTab].transformLine+'rpx)'}}" >
                <view class="tabLine"></view>
            </view>
        </view>
    </view>

    <view class="swiperBox">        
        <swiper  current="{{currentTab}}" duration="500"  bindchange="swiperChange" style="height:calc(100vh - 182rpx);">
            <swiper-item wx:for="{{swiperList}}" >
                <scroll-view scroll-y="true" enhanced="true" show-scrollbar="false">                
                    <view class="bgred">
                        <list-item></list-item>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
    
</view>

data: {
        currentTab: 0,
        swiperList:[
            {
                id:0,
                name:'岗位1', 
                selector: true,
                content:'123',
                transformLine:24
            },
            {   
                id:1,
                name:'岗位2', 
                selector: false,
                content:'456',
                transformLine:144
            },
            {
                id:2,
                name:'岗位3', 
                selector: false,
                content:'789',
                transformLine:264
            },
            {
                id:3,
                name:'岗位4',
                selector: false, 
                content:'012',
                transformLine:396
            },
        ],
    },
//   岗位学生切换
    switchNav(e) {
        var that = this, currentTab = e.currentTarget.dataset.id;
        // console.log(e,'11' ,currentTab);
        if(currentTab != this.data.currentTab){
            that.setData({
                currentTab: currentTab,
            })
        }
    },

    swiperChange(e) {
        console.log(e)
        // var index = e.current
        this.setData({
        currentTab: e.detail.current,
        })
    }

{
    "usingComponents": {
        "list-item": "/components/list/list"
    }
}


```typescript
/* pages/tabbar/tabbar.wxss */
.searchBar{
    width: 100%;
    height: 100rpx;
    /* background-color: aqua; */
}
.searchbarBox{
    padding: 20rpx;
    box-sizing: border-box;
}
.searchInput{
    display: flex;
    align-items: center;
    background: #F2F2F2;
    padding-left: 20rpx;
    border-radius: 8rpx;
}
.searchInput input{    
    width: 590rpx;
    padding: 10rpx 20rpx;
}

/* 切换卡标签 */
.chooseTab{
    display: flex;
    position: relative;
    border-bottom: 2rpx solid  rgba(0, 0, 0, .05);
}
.choosetabBox{
}
.chooseTitle{
    padding: 20rpx;
}

.bgred{
    width: 100%;
    height: 500px;
    /* background-color: burlywood; */
}
.chooseSelected{
    color: pink;
}
.tabLineBox{
    position: absolute;
    width: 50rpx;
    padding: 0 10rpx;
    margin-top: 70rpx;
    transform: translateX(25rpx);
    transition: all 400ms ease-in-out;
}
.tabLineBox .tabLine{
    width: 100%;
    background-color: cadetblue;
    height: 6rpx;
}

.swiperBox{
    /* background-color: coral; */
}
scroll-view{
    height: calc(100vh - 182rpx);
    /* background-color: pink; */
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}