小程序标签页切换效果

青旅半醒 2021-09-17 04:32 510阅读 0赞

![标题图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]

小程序标签页切换效果

效果:

![效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]

.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
          })
        }
      }
    })

效果:

![效果][20181205144627103.png]

.wxml

.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.js
    var 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
        })
      }
    })

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70]: /images/20210724/191bf7dbd58a48c6a8fd48fc1b68cc7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2MjMyNjEx_size_16_color_FFFFFF_t_70 1]: /images/20210724/224952e103a0452f82b8b6660adc69c6.png
[20181205144627103.png]: /images/20210724/c76602c51f334ca3ad8023a689c3f209.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1