微信小程序实现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="{{ip.id}}" data-item="{{ip}}">
   {{ip.title}}
  </view>
 </block>
 <view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
{{content}}
</view>

wxss

.ip_tab_comtainer {
  width: 100%;
  background-color: #F5F5F5;
  padding: 20rpx 0 0;
  white-space: nowrap;
}
.ip_tab_comtainer_padd {
  display: inline-block;
  width: 24rpx;
}
.ip_tab_item_s {
  display: inline-block;
  line-height: 40rpx;
  padding: 12rpx 32rpx;
  color: #91daf9;
  margin-right: 8rpx;
  margin-left: 8rpx;
  font-size: 28rpx;
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #91daf9;
}
.ip_tab_item_n {
  display: inline-block;
  padding: 12rpx 32rpx;
  line-height: 40rpx;
  color: #353535;
  margin-right: 8rpx;
  background-color: #ffffff;
  margin-left: 8rpx;
  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%;
}

js

// pages/horizontal-scroll_tab/horizontal-scroll_tab.js
Page({
 /**
  * 页面的初始数据
  */
 data: {
  ips: [
   { id: "1", title: "日统计", isSelect:true },
   { id: "2", title: "月统计", isSelect: false},
   { id: "3", title: "年统计", isSelect: false},
  ],
  content:"全部"
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
 },
 /**
  * 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页面切换功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 微信小程序滚动Tab实现左右可滑动切换

     微信小程序滚动Tab实现左右可滑动切换 效果: 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current

  • 微信小程序 swiper制作tab切换实现附源码

    微信小程序 swiper制作tab切换 实现效果图: swiper制作tab切换 index.html <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view> <view

  • 微信小程序实现tab切换效果

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"

  • 微信小程序实现tab和swiper切换结合效果

    本文实例为大家分享了小程序实现tab和swiper切换效果展示的具体代码,供大家参考,具体内容如下 先上效果图: 实现代码如下: wxml页面 <scroll-view scroll-x="true" class="weui-navbar"> <block wx:for-items="{{tabs}}"> <view id="{{index}}" class="{{activeIndex

  • 微信小程序开发之选项卡(窗口底部TabBar)页面切换

    微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思

  • 微信小程序实现登录注册tab切换效果

    利用三元运算符实现登录注册效果切换,供大家参考,具体内容如下 直接上代码 wxml: <view class='top'> <text class="{{login?'active':''}}" catchtap='login'>登录</text> <text class="{{login?'':'active'}}" catchtap='register'>注册</text> </view>

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序实现tab左右切换效果

    本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下 分析 1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值. 2.swiper组件的current组件用于控制当前显示哪一页 3.swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml: <view class="record-box"> &

  • 微信小程序实现滴滴导航tab切换效果

    本文实例为大家分享了微信小程序实现tab切换效果的具体代码,供大家参考,具体内容如下 效果图如下: (请自动忽视底部tab.....) 简单介绍一下:顶部导航使用 scroll-view 组件 中间的内容部分使用 swiper 组件 实现的逻辑就是: 先这样在这样,这样然后那样.(此处省略200个字). 代码如下,复制可用 wxml <view class="contain"> <!-- 导航栏 --> <scroll-view class="t

  • 10行代码实现微信小程序滑动tab切换

    本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下 效果预览: js部分: Page({ data: { arr: [1,2,3,4,5,6,7,8], index: 1 }, onLoad: function (options) { this.setData({ childW: this.data.arr.length * 80 }); }, tabOn: function (e) { this.setData({ index: e.currentTarget

随机推荐