小程序之利用swiper做tab切换

最新推荐文章于 2024-08-21 17:47:57 发布

ygman

最新推荐文章于 2024-08-21 17:47:57 发布

阅读量7.8k

点赞数 2

分类专栏：微信小程序文章标签： swiper tab

本文链接：https://blog.csdn.net/one_girl/article/details/80626044

版权

本文介绍如何在小程序中利用swiper组件创建tab切换效果。通过结合scroll-view和swiper组件，实现标签滑动和内容滑动的关联。当遇到内容过多导致隐藏的问题时，通过设置固定高度并动态调整，确保内容能完全显示。具体解决方案是通过计算数据项数量和单个数据项高度来动态设置swiper的高度。

摘要由CSDN通过智能技术生成

不知道怎么弄一个这样的gif图片，所以从网上盗了一张
项目需求就是要实现一个这样的效果
实现效果

首先分析一下实现这样的效果都需要哪些部分
1、可以滑动的标签[ ‘健康’,’情感’,’职场’,’育儿’,’纠纷’….]，这里用小程序提供的组件scroll-view
2、可以滑动的内容模块，用小程序的组件swiper
3、关联这两个模块

<view class="section_nav">
    <scroll-view class="scroll-view_H" scroll-x style="width:100%">
        <view wx:for="{
   {
   tabList}}" wx:key="{
   {
   index}}" bindtap="switchTab" data-current="{
   {
   index}}" class="scroll-view-item {
   {
   currentTab==index ? 'on' : ''}}">{
   {
   item}}</view>
    </scroll-view>
</view>
<swiper class="tab-swiper" current="{
   {
   currentTab}}" bindchange="switchSwiper">
    <swiper-item wx:for="