小程序实现tab更换页面效果

本文实例为大家分享了小程序实现tab更换页面效果的具体代码，供大家参考，具体内容如下

.wxml

 
 
  
   {{ip.title}}
  
 
 



{{content}}
{{content}}
{{content}}

.wxss

page{
 
  width: 100%;
  height: 100%;
 
}
 
.ip_tab_comtainer {
 
  width: 100%;
  background-color: #F5F5F5;
  padding: 20rpx 0 0;
  white-space: nowrap;
 
}
 
.ip_tab_comtainer_padd {
 
  display: inline-block;
   width: 5%; 
 
}
 
.ip_tab_item_s {
 
  width: 30%;
  display: inline-block;
  line-height: 40rpx;
  text-align: center;
  color: #91daf9;
  font-size: 28rpx;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #91daf9;
 
}
 
.ip_tab_item_n {
 
  width: 30%;
  display: inline-block;
  text-align: center;
  line-height: 40rpx;
  color: #353535;
  background-color: #ffffff;
  font-size: 28rpx;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4rpx;
  border: 1px solid #CCCCCC;
 
}
 
 
/**
去除横向滚动条
*/
 
::-webkit-scrollbar {
 
  width: 0;
  height: 0;
  color: transparent;
 
}
 
.content{
 
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #CCCCCC;
  
 }
 
 
.content1{
 
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #6b10e0;
 
 }
 
 .content2{
 
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #d41515;
 
 }
 
 .content3{
 
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #1ac729;
 
 }

.js

 /**
   * 页面的初始数据
   */
  data: {
    ips: [
      { id: "1", title: "日统计", isSelect:true },
      { id: "2", title: "月统计", isSelect: false},
      { id: "3", title: "年统计", isSelect: false},
     ],
    content: "日统计"
  
  },
  /**
  * item点击事件
  */
 onIpItemClick: function (event) {
  console.log(event);
  var id = event.currentTarget.dataset.item.id;
  var curIndex = 0;
  for (var i = 0; i < this.data.ips.length; i++) {
   if (id == this.data.ips[i].id) {
    this.data.ips[i].isSelect = true;
    curIndex = i;
   } else {
    this.data.ips[i].isSelect = false;
   }
  }
  this.setData({
   content: this.data.ips[curIndex].title,
   ips: this.data.ips,
  });
 },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。