微信小程序实现tab切换

Posted 2023-03-25

参考技术A 微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。

下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示：

在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。

把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。

通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。

逻辑层添加了active数据控制当前显示盒子。

wxml要书写判断验证去控制盒子是否有cur类名。

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。

有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。

首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”index”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。

给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。

e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。

微信小程序实现tab切换（可滑动切换）

前言

tab切换作为前端开发中最常见的组件之一，相信大家平时都用的不少吧，今天给大家分享一个微信小程序的tab切换，一起来看看吧。

实现效果：

其实这个小功能的实现非常简单，只需要通过一个标识控制选项的样式及显示的内容，当我们触发点击或者滑动事件时动态的改变标识的值即可。话不多说，下面直接上实例代码。

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>装备内容</view>
        </swiper-item>
        <swiper-item class='swiperTtemBox'>
            <view>活动内容</view>
        </swiper-item>
    </swiper>
</view>

js文件

const app = getApp()
Page(
  data: 
    currentIndex: 0, //默认是活动项
  ,
  // 切换swiper-item触发bindchange事件
  pagechange: function (e) 
    // 通过touch判断，改变tab的下标值
    if ("touch" === e.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
    )
  ,
)

wxss 文件

Page 
    /* 全局样式 */
    background: rgb(244, 245, 249);
    height: 100%;
    position: fixed;


.fontColorBox,
.fontColorBox1 
    /* 文字默认颜色 */
    color: black;


.navBox 
    /* 顶部tab盒子样式 */
    width: 100%;
    height: 108rpx;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;


.navBox view:last-child 
    /* 最后一个tab标题的样式 */
    padding-left: 20%;


.titleBox 
    /* 未选中文字的样式 */
    color: rgb(168, 170, 175);
    font-size: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

.lineBox,.notLineBox
    /* 选中及未选中底线共同样式 */
    width: 32rpx;
    height: 8rpx;


.lineBox 
    /* 选中底线样式 */
    background: rgb(43, 44, 45);
    margin-top: 16rpx;
    border-radius: 4rpx;


.notLineBox 
    /* 未选中底线样式 */
    background: transparent;


.swiperTtemBox 
    /* 底部内容样式 */
    height: 100vh;
    overflow: scroll;
    margin: 12rpx 0rpx;
    background: white;
    font-size: 28rpx;