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

开发遇到了，就简单的记录下，小程序滑动或者点击切换样式

这里不做演示了，直接上代码

wxml

代码语言：javascript复制

<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>

js

代码语言：javascript复制

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
    })
  },
})

需要写的代码放在内容1替换即可，即可实现轻松的点击或者滑动切换窗口，js数据交互统一处理即可，同一加载只是显示的排版布局而已，其他一样的

小程序 class ui view 布局

0 人点赞