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

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

效果：

最终效果如上。问题：

1、tab标题总共8个，所以一屏无法全部显示。
2、tab内容区左右滑动切换时，tab标题随即做标记（active）。
3、当active的标题不在当前屏显示时，要使其能显示到当前屏中。

一、wxml结构

tab标题因一排八个，所以使用 scroll-view组件，使其可横向滚动。

tab内容可左右滑动切换，使用swiper组件实现

为了偷懒，所以数据都通过wx:for遍历重复出来。

说明：

1、设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2、swiper组件的current组件用于控制当前显示哪一页
3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

<view >
  <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
    <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">健康</view>
    <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">情感</view>
    <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">职场</view>
    <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">育儿</view>
    <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">纠纷</view>
    <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">青葱</view>
    <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">全部</view>
    <view class="tab-item {{currentTab==7?'active':''}}" data-current="7" bindtap="swichNav">其他</view>
  </scroll-view>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
   style="height:{{winHeight}}rpx">
    <swiper-item wx:for="{{[0,1,2,3,4,5,6,7]}}">
      <scroll-view scroll-y="true" class="scoll-h" >
        <block wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="*this">
          <view class="item-ans">
            <view class="avatar">
              <image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
            </view>
            <view class="expertInfo">
              <view class="name">欢颜</view>
              <view class="tag">知名情感博主</view>
              <view class="answerHistory">134个回答，2234人听过 </view>
            </view>
            <navigator url="/pages/askExpert/expertDetail" class="askBtn">问TA</navigator> 
          </view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

二、js部分

微信小程序在开发起来，个人感觉挺像vue的，以数据驱动视图的更新。所以在小程序中，不能直接操作dom，当然也不能使用jquery之类的库。

var app = getApp();
Page({
  data:{
    winHeight:"",//窗口高度
    currentTab:0, //预设当前项的值
    scrollLeft:0, //tab标题的滚动条位置
    expertList:[{ //假数据
      img:"avatar.png",
      name:"欢顔",
      tag:"知名情感博主",
      answer:134,
      listen:2234
    }]
  },
  // 滚动切换标签样式
  switchTab:function(e){
    this.setData({
      currentTab:e.detail.current
    });
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav:function(e){
    var cur=e.target.dataset.current;
    if(this.data.currentTaB==cur){return false;}
    else{
      this.setData({
        currentTab:cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor:function(){
   if (this.data.currentTab>4){
    this.setData({
     scrollLeft:300
    })
   }else{
    this.setData({
     scrollLeft:0
    })
   }
  },
  onLoad: function() { 
    var that = this; 
    // 高度自适应
    wx.getSystemInfo( { 
      success: function( res ) { 
        var clientHeight=res.windowHeight,
          clientWidth=res.windowWidth,
          rpxR=750/clientWidth;
       var calc=clientHeight*rpxR-180;
        console.log(calc)
        that.setData( { 
          winHeight: calc 
        }); 
      } 
    });
  }, 
  footerTap:app.footerTap
})

三、wxss样式

.tab-h{
  height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}

 如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助大家，谢谢大家对本站的支持！

# 微信小程序滚动Tab  # 小程序  # Tab滚动并切换  # 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换  # 微信小程序实现tab左右切换效果  # 微信小程序 Tab页切换更新数据  # 微信小程序 swiper制作tab切换实现附源码  # 微信小程序开发之选项卡(窗口底部TabBar)页面切换  # 微信小程序实现tab切换效果  # 微信小程序实现tab和swiper切换结合效果  # 微信小程序实现tab页面切换功能  # 微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解  # 微信小程序实现tab页面切换效果  # 滚动条  # 也不  # 如有  # 当前页  # 遍历  # 希望能  # 使其  # 职场  # 听过  # 谢谢大家  # 绑定  # 要使  # 自适应  # 疑问请  # clouddn  # bkt  # png  # rpx  # answerHistory  # expertInfo 

相关文章： 如何通过VPS搭建网站快速盈利？  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  公众号网站制作网页,微信公众号怎么制作？  洛阳网站制作公司有哪些,洛阳的招聘网站都有哪些？  制作无缝贴图网站有哪些,3dmax无缝贴图怎么调？  如何通过老薛主机一键快速建站？  c# F# 的 MailboxProcessor 和 C# 的 Actor 模型  网站制作免费,什么网站能看正片电影？  如何快速生成凡客建站的专业级图册？  寿县云建站：智能SEO优化与多行业模板快速上线指南  制作电商网页,电商供应链怎么做？  如何在IIS管理器中快速创建并配置网站？  西安专业网站制作公司有哪些,陕西省建行官方网站？  免费的流程图制作网站有哪些,2025年教师初级职称申报网上流程？  建站主机默认首页配置指南：核心功能与访问路径优化  宁波自助建站系统如何快速打造专业企业网站？  建站之星图片链接生成指南：自助建站与智能设计教程  企业微网站怎么做,公司网站和公众号有什么区别？  建站之星安装模板失败：服务器环境不兼容？  PHP 500报错的快速解决方法  建站之星2.7模板快速切换与批量管理功能操作指南  北京的网站制作公司有哪些,哪个视频网站最好？  北京建设网站制作公司,北京古代建筑博物馆预约官网？  代购小票制作网站有哪些,购物小票的简要说明？  公司门户网站制作流程,华为官网怎么做？  如何用花生壳三步快速搭建专属网站？  如何撰写建站申请书？关键要点有哪些？  如何快速完成中国万网建站详细流程？  建站之星免费版是否永久可用？  北京企业网站设计制作公司,北京铁路集团官方网站？  行程制作网站有哪些,第三方机票电子行程单怎么开？  建站VPS能否同时实现高效与安全翻墙？  太平洋网站制作公司,网络用语太平洋是什么意思？  如何快速搭建虚拟主机网站？新手必看指南  广州顶尖建站服务：企业官网建设与SEO优化一体化方案  昆明网站制作哪家好,昆明公租房申请网上登录入口？  如何在Mac上搭建Golang开发环境_使用Homebrew安装和管理Go版本  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  c# 在ASP.NET Core中管理和取消后台任务  建站之星下载版如何获取与安装？  建站主机选择指南：服务器配置与SEO优化实战技巧  怎么用手机制作网站链接,dw怎么把手机适应页面变成网页？  Python多线程使用规范_线程安全解析【教程】  如何在IIS中新建站点并配置端口与物理路径？  正规网站制作公司有哪些,目前国内哪家网页网站制作设计公司比较专业靠谱？口碑好？  如何选择CMS系统实现快速建站与SEO优化？  建站上市公司网站建设方案与SEO优化服务定制指南  Swift中循环语句中的转移语句 break 和 continue  如何用手机制作网站和网页,手机移动端的网站能制作成中英双语的吗？  网页设计网站制作软件,microsoft office哪个可以创建网页？