原生小程序tab切换

目录

一、字体加下标题切换

二、字体切换

一、字体加下标题切换

wxml

<!--Tab布局-->
<view class='title'>
  <view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
    <text>关注</text>
    <hr class="line-style" />
  </view>
  <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
    <text>推荐</text>
    <hr class="line-style" />
  </view>
  <view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'>
    <text>资讯</text>
    <hr class="line-style" />
  </view>
</view>
<!-- 内容部分 -->
<view wx:if="{{0 == currentIndex}}">
  <!-- 关注的内容 -->
  <text>asdasdasdasd</text>
</view>
<view wx:if="{{1 == currentIndex}}">
  <!-- 推荐的内容 -->
  <text>waeaweawe</text>
</view>
<view wx:if="{{2 == currentIndex}}">
  <!-- 资讯的内容 -->
  <text>vggsdfsdfs</text>
</view>

js

// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentIndex: 1,
    ch: 0,
  },

  onLoad: function (options) {
    wx.getSystemInfo({
      success: res => {
        //转为rpx
        let ch = (750 / res.screenWidth) * res.windowHeight - 80;
        this.setData({
          ch
        })
      },
    })
  },

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

  //用户滑动切换tab调用
  swiperTab: function (e) {
    if (e.detail.source == 'touch') {
      this.setData({
        currentIndex: e.detail.current
      });
    }
  },
})

wxss

 
.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 
.title-sel {
  color: #24272c;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.title-sel  .line-style{
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.title-sel-selected{
  color: #006bff;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title-sel-selected .line-style{
  background: #006bff;
  height: 6rpx;
  width: 90rpx;
  position: relative;
  margin-top: 10rpx;
}
.swiper,.scroll{
  height: 100%;
}

二、字体切换

<view class="body">
 <view class="nav bc_white">
  <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
  <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
 </view>
 <view class="{{selected?'show':'hidden'}}">for system</view>
 <view class="{{selected1?'show':'hidden'}}">for activity</view>
</view>

Page({
  data:{
    selected:true,
    selected1:false
    },
  selected:function(e){
    this.setData({
      selected1:false,
      selected:true
    })
  },
  selected1:function(e){
    this.setData({
      selected:false,
      selected1:true
    })
  }
})

page {
  background-color: #edf0f3;
}

.nav {
  width: 100%;
  height: 100rpx;
  display: flex;
  flex-direction: row;
}

.default {
  line-height: 100rpx;
  text-align: center;
  flex: 1;
  border-right: 1px solid gainsboro;
  color: #000;
  font-weight: bold;
  font-size: 28rpx;
}

.red {
  line-height: 100rpx;
  text-align: center;
  color: #fc5558;
  flex: 1;
  border-right: 1px solid gainsboro;
  font-weight: bold;
  font-size: 28rpx;
}

.show {
  display: block;
  text-align: center;
  line-height: 200rpx;
}

.hidden {
  display: none;
  text-align: center;
  line-height: 200px;
}