小程序滑动、点击切换简洁UI

<view>
    <!-- Tab布局 -->
    <view class='navBox'>
        <view class='titleBox' bindtap='titleClick' data-idx='0'>
            <text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">安卓</text>
            <hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
        </view>
        <view class='titleBox' bindtap='titleClick' data-idx='1'>
            <text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">苹果</text>
            <hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
        </view>
    </view>
    <!-- 内容布局 -->
    <swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
        <swiper-item class='swiperTtemBox'>
            <view>内容1</view>
        </swiper-item>
        <swiper-item class='swiperTtemBox'>
            <view>内容2</view>
        </swiper-item>
    </swiper>
</view>

const app = getApp()
Page({
  data: {
    currentIndex: 0, //默认第一个
  },
  pagechange: function (ee) {
    if ("touch" === ee.detail.source) {
      let currentPageIndex = this.data.currentIndex;
      currentPageIndex = (currentPageIndex + 1) % 2;
     
      this.setData({
        currentIndex: currentPageIndex,
      })
    }
  },

  //点击tab时触发
  titleClick: function (e) {
    this.setData({
      //拿到当前索引并动态改变
      currentIndex: e.currentTarget.dataset.idx
    })
  },
})