当前位置:网站首页>小程序滑动、点击切换简洁UI

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

2022-07-07 07:08:00 德宏大魔王

系列文章目录

【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
【零基础微信小程序入门开发】小程序框架一
【零基础微信小程序入门开发】小程序框架二
【零基础微信小程序入门开发】基础能力(一)
【零基础微信小程序入门开发】基础能力(二)
小程序滑动、点击切换简洁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数据交互统一处理即可,同一加载只是显示的排版布局而已,其他一样的

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

在这里插入图片描述

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

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

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

原网站

版权声明
本文为[德宏大魔王]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_35230125/article/details/125645626