关于“小程序中tab切换页面效果如何做，代码是什么”的知识有一些人不是很理解，对此小编给大家总结了相关内容，具有一定的参考借鉴价值，而且易于学习与理解，希望能对大家有所帮助，有这个方面学习需要的朋友就继续往下看吧。

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

.wxml

<scroll-view scroll-x="true" class="ip_tab_comtainer">
 <view class="ip_tab_comtainer_padd"></view>
 <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
  <view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="" data-item="{{ip}}">
   {{ip.title}}
  </view>
 </block>
 <view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
<block>
<view class="content1" wx:if="{{content=='日统计'}}">{{content}}</view>
<view class="content2" wx:if="{{content=='月统计'}}">{{content}}</view>
<view class="content3" wx:if="{{content=='年统计'}}">{{content}}</view>
</block>
</view>

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

感谢各位的阅读，以上就是“小程序中tab切换页面效果如何做，代码是什么”的内容了，经过本文的学习后，相信大家对小程序中tab切换页面效果如何做，代码是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• js怎样实现分解数字？教你三个办法

  对于新手来说，非负整数n的阶乘是比较难理解的一个算法，对此，这篇文章给大家分享的是有关js如何实现分解数字的内容、下面会介绍使用递归分解一个数字、使用WHILE循环分解一个数字和使用FOR循环分解数字。

• node.js中redis使用有什么坑，怎么做好

  varredis=require("redis"),client=redis.createClient({host:'tc-arch-osp33.tc',port:4300,no_ready_check:true});//ifyou'dliketoselectdatabase3,insteadof0(default),call//cli

• 小程序购物车功能怎样做，关键要点是什么

  这篇文章主要为大家详细介绍了微信小程序实现购物车小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 实现自己的原生JS路由的方法操作是什么

  当你想到路由时，通常会想到类似react之类的库。但实际上，这些库和框架仍然使用vanillaJavaScript。那么该怎么实现呢？

• JS原生map实现的思路和代码是什么？

  js原生map实现的方法总结,一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！