小程序如何实现tab切换，一部到位

笔者之前尝试着其他教程：使用swiper来做切换。但是小程序中swiper存在很多限制，比如高度的限制，所以放弃了这种方案，本文将提供另一个方案。

小程序实现tab切换很简单，只需要完成两部分。
1.编写页面
2.编写js触发事件

先上效果图：

接下来介绍页面代码：

控制切换的Tab

<view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">做什么</view><view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">推荐站点</view><view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">作者</view></view>

要切换的内容：

<view class = "{{currentTab == 0 ? 'show':'hidden'}}" ><scroll-view><text>暂无内容1</text></scroll-view></view><view class = "{{currentTab == 1 ? 'show':'hidden'}}" ><scroll-view><text>暂无内容2</text></scroll-view></view><view class = "{{currentTab == 2 ? 'show':'hidden'}}"><scroll-view><text>暂无内容3</text></scroll-view></view>

js触发事件 在对应页面的js文件中加入如下方法。

//点击切换clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current,})}

页面样式 这个不重要，可以按照个人效果随便修改。

/* pages/about/about.wxss */
.about_page{margin: 0 10px;
}
.swiper-tab{width: 100%;/* border-bottom: 2rpx solid #ccc; */text-align: center;height: 88rpx;line-height: 88rpx;display: flex;flex-flow: row;justify-content: space-between;color: #ccc;font-size: 16px;
}
.swiper-tab-item{width: 30%; color:#434343;
}
.active{color:#F65959;/* border-bottom: 4rpx solid #F65959; */font-size: 16px;font-weight: bold;
}
.juzhong{margin: 0 auto;
}
.domain{background-color: #fff;height: 100%;margin:0 10px;
}
.show{display: block;
}
.hidden{display: none;
}

小程序如何实现tab切换，一部到位相关推荐

微信小程序中的Tab切换
微信小程序中的Tab切换使用步骤使用步骤代码如下(示例): 定义一个状态status data: {status: 0,}, 代码如下(示例): 在点击切换时利用status来切换根据index ...
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
小程序列表页tab切换swiper并滚动到上次位置
最近小程序做到一个很常见的需求,订单列表功能.虽说看着很常见,做起来也发现了有一些坑.效果如图: 这里就是顶部tab页切换到不同状态的订单,下次切回来不刷新页面而且需要跳到上次浏览的地方,然后滑动每个 ...
微信小程序点击tab栏切换，点击切换某个tab滚动到中间（ uniapp ）
微信小程序点击tab栏切换,点击某个tab滚动到中间( uniapp ) 之前写过原生js的tab栏滚动到中间,正好最近有个uniapp小程序项目中要用到tab切换滚动, 写个demo发出来 + 注意 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
小程序卡片叠层切换卡片_现在，卡片和清单在哪里？
小程序卡片叠层切换卡片重点 (Top highlight) 介绍 (Intro) I was recently tasked to redesign the results of the follo ...
小程序滑动点击切换中间大图两边小图
小程序滑动点击切换中间大图两边小图代码太老了已不建议阅读, 简单看下思路即可整体思路, 使用小程序API的animation动画和组件的canvas中的bindtouchstart.bind ...
解决小程序自定义底部菜单切换闪动
解决小程序自定义底部菜单切换闪动业务上可能会有一个需求使用自定义底部菜单相信会有很多人遇到过这个需求但是自定义底部菜单会有一个问题,在点击切换页面的时候底部菜单会重新加载,导致页面闪动,比较影响用 ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...

小程序如何实现tab切换，一部到位

小程序如何实现tab切换，一部到位相关推荐

最新文章

热门文章