微信小程序-实现 tab-及多个列表选项切换

在小程序中实现tab选项切换是一个非常常见的效果,对于固定几个tab切换或许轻而易举,但若出现多个,对于有些新手,却不知道怎么控制

您将阅读完本文后,将获取到两种方式实现tab切换效果,但凡以后遇到类似的需求,都可以实现(本文重点)

实例效果

具体实现代码

微信 wxml 代码

<view>
  <view class="tab-container">
    <view
      class="default {
   {type=='expend'? 'expend-active':''}}"
      bindtap="handleType"
      data-type="expend"
      >支出</view
    >
    <view
      class="default {
   {type=='earning'? 'earning-active': ''}}"
      bindtap="handleType"
      data-type="earning"
      >收入</view
    >
    <view
      class="default {
   {type=='transaccount'?'transaccount-active': ''}}"
      bindtap="handleType"
      data-type="transaccount"
      >转账</view
    >
  </view>
</view>
复制代码

微信wxss代码

/* pages/tablistchange/tablistchange.wxss */
.tab-container {
   
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}

.tab-container .default {
   
  margin-right