专栏首页达达前端小程序标签页切换效果

小程序标签页切换效果

小程序标签页切换效果

效果:

效果

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 购物车

    达达前端
  • wepy代码知识点

    达达前端
  • 微信小程序的wx-charts插件-tab选项卡

    达达前端
  • 基于mpvue实现的小程序日历插件

    anna
  • 新功能:个人小程序直接打开公众号链接

    在此之前,想要从小程序里面跳转一个链接,要使用web-view才可以,而且个人 <web-view src="https://www.baidu.com/">...

    祈澈菇凉
  • 微信小程序加减号弹出框详解

    <view class='add-rob' bindtap="setModalStatus" data-status="0" wx:if="{{showModa...

    疯狂的小程序
  • 微信小程序--粉丝列表 样式实现

    Kindear
  • 小程序跳转公众号

    随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,所以琢磨了一下,写了一些...

    祈澈菇凉
  • 小程序部分样式总结---.wxss

    用户5927264
  • 微信小程序教学第三章(含视频):小程序中级实战教程:列表-静态页面制作

    § 列表 - 开发准备 本文配套视频地址: https://v.qq.com/x/page/f0554syejjd.html 开始前请把 ch3-1 分...

    iKcamp

扫码关注云+社区

领取腾讯云代金券