微信小程序tabs切换

 直接上代码

1、wxml

<view class="item_wrap">
    <view class="item {{index === curIndex?'active':''}}" wx:for="{{items}}" wx:key="index" data-index="{{index}}" bindtap="handleClick">
        {{item.name}}
    </view>
</view>

<view class="item_content" wx:if="{{curIndex == 0}}">
    俯瞰城市
</view>
<view class="item_content" wx:if="{{curIndex == 1}}">
    怀旧时光

</view>
<view class="item_content" wx:if="{{curIndex == 2}}">
    魅力特色
</view>
<view class="item_content" wx:if="{{curIndex == 3}}">
    神秘遗址
</view>

2、wxss

.item_wrap{
    width: 98%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.item{
    height: 60rpx;
    padding: 0 20rpx;
    text-align: center;
    line-height: 60rpx;
    background-color: #f6f6f6;
    border: 1rpx solid #ddd;
    color: #333;
    border-radius: 8rpx;
}

.active{
    color: #fff;
    background-color: rgb(23, 131, 23);
}

3、js

// pages/test02/test02.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        items: [
            { id: 1, name: '俯瞰城市' },
            { id: 2, name: '怀旧时光' },
            { id: 3, name: '魅力特色' },
            { id: 4, name: '神秘遗址' },
        ],
        curIndex: 0,
    },

    handleClick(e){
        const { index } = e.currentTarget.dataset;
        const { curIndex } = this.data;
        if(curIndex === index){
            return false;
        } else {
            this.setData({
                curIndex: index
            })
        }
    },
    
})

4、效果