小程序标签页切换效果

标题图

小程序标签页切换效果

效果:

效果

.wxml

<view class='topTabSwiper'>
  <view class='tab  {{currentData == 0 ? "tabBorer" : ""}}' data-current="0" bindtap='checkCurrent'>达叔</view>
  <view class='tab  {{currentData == 1 ? "tabBorer" : ""}}' data-current="1" bindtap='checkCurrent'>达叔</view>
  <view class='tab  {{currentData == 2 ? "tabBorer" : ""}}' data-current="2" bindtap='checkCurrent'>达叔</view></view><swiper current="{{currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
  <swiper-item>
    <view class='swiper_con'>welcome come to 达叔</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 达叔</view>
  </swiper-item>
  <swiper-item>
    <view class='swiper_con'>welcome come to 达叔</view>
  </swiper-item></swiper>

.wxss

.tab {  float: left;  width: 33.3333%;  text-align: center;  padding: 10rpx 0;
}.topTabSwiper {  border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc;  zoom: 1;
}.topTabSwiper:after {  content: "";  clear: both;  display: block;
}.tabBorer {  border-bottom: 1px solid #f00;  color: #f00;
}.swiper {  width: 100%;
}.swiper_con {  text-align: center;  width: 100%;  height: 100%;  padding: 80rpx 0;
}/*  */.person_box {  position: relative;
}.phone_select {  margin-top: 0;  z-index: 100;  position: absolute;
}.select_one {  text-align: center;  background-color: rgb(239, 239, 239);  width: 676rpx;  height: 100rpx;  line-height: 100rpx;  margin: 0 5%;  border-bottom: 2rpx solid rgb(255, 255, 255);
}

.js

Page({  /**
   * 页面的初始数据
   */
  data: {    currentData: 0, 
    selectPerson: true,
  },  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {},  //获取当前滑块的index
  bindchange: function(e) {    const that = this;
    that.setData({      currentData: e.detail.current
    })
  },  //点击切换，滑块index赋值
  checkCurrent: function(e) {    const that = this;    if (that.data.currentData === e.target.dataset.current) {      return false;
    } else {

      that.setData({        currentData: e.target.dataset.current
      })
    }
  }
})

效果:

效果

.wxml

<view class="head">
  <view class="head_item {{selected?'head_itemActive':''}}" bindtap="selected">个人</view>
  <view class="ring"></view>
  <view class="head_item {{selected1?'head_itemActive':''}}" bindtap='selected1'>设置</view></view><view class="main {{selected?'show':'hidden'}}">
  </view><view class="main {{selected1?'show':'hidden'}}">
  <text>达叔</text></view>

.wxss

page {  background-color: rgba(239, 239, 240, 1);
}.text {  position: absolute;  top: 380rpx;  left: 356rpx;
}.canvas {  width: 100%;  height: 550rpx;  margin: 30rpx;
}.head_item {  width: 374rpx;  text-align: center;  font-size: 34rpx;  color: #999;  letter-spacing: 0;
}.head_itemActive {  color: rgba(87, 213, 200, 1);
}.ring {  width: 2rpx;  height: 100%;  background-color: rgba(204, 204, 204, 1);
}.head {  width: 100%;  height: 100rpx;  background-color: rgba(255, 255, 255, 1);  border-bottom: 1rpx solid rgba(204, 204, 204, 1);  display: flex;  align-items: center;  justify-content: space-between;  position: fixed;  top: 0;  z-index: 10;
}.main {  position: absolute;  width: 100%;  height: 100%;  display: block;  box-sizing: border-box;  padding-top: 100rpx;  top: 0;
}.show {  display: block;  text-align: center;
}.hidden {  display: none;  text-align: center;
}

.js

//index.jsvar wxCharts = require('../../utils/wxcharts-min.js');const app = getApp();var ringChart = null;
Page({  data: {    selected: true,    selected1: false
  },
  torecord() {
    wx.navigateBack({      delta: 1,
    })
  },  onLoad: function (e) {    //  高度自适应
    var windowWidth = '', windowHeight = '';    //定义宽高
    try {      var res = wx.getSystemInfoSync();    //试图获取屏幕宽高数据
      windowWidth = res.windowWidth / 750 * 690;   //以设计图750为主进行比例算换
      windowHeight = res.windowWidth / 750 * 550    //以设计图750为主进行比例算换
    } catch (e) {      console.error('getSystemInfoSync failed!');   //如果获取失败
    }
    ringChart = new wxCharts({      canvasId: "ringCanvas",      type: "ring",      series: [
        { data: 20, },
        { data: 30, },
        { data: 60, }
      ],      width: windowWidth,      height: windowHeight,      dataLabel: false,      legend: false,
    });
  },  selected: function (e) {    this.setData({      selected1: false,      selected: true
    })
  },  selected1: function (e) {    this.setData({      selected: false,      selected1: true
    })
  }
})

作者：达叔小生
链接：https://www.jianshu.com/p/0ad5d46369bc