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

系列文章目录

【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
【零基础微信小程序入门开发】小程序框架一
【零基础微信小程序入门开发】小程序框架二
【零基础微信小程序入门开发】基础能力（一）
【零基础微信小程序入门开发】基础能力（二）
小程序滑动、点击切换简洁UI

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

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

wxml

<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

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数据交互统一处理即可，同一加载只是显示的排版布局而已，其他一样的

️️️️️️ 🥳🥳🥳 茫茫人海千千万万，感谢这一刻你看到了我的文章，感谢观赏，大家好呀，欢迎加入人工智能交流群（看我的动态），更多周边福利等你🥳🥳🥳

欢迎订阅本专栏或者关注我，大家一起努力每天一题算法题

️️️ 最后，希望我的这篇文章能对你的有所帮助！

愿自己还有你在未来的日子，保持学习，保持进步，保持热爱，奔赴山海！ ️️️