微信小程序tab切换(仿喜马拉雅fm)

记忆中的夏天

于 2019-03-11 11:24:15 发布

阅读量1.1k

点赞数 1

分类专栏：微信小程序 css3

本文链接：https://blog.csdn.net/qq_35335490/article/details/88389147

版权

本文介绍了如何在微信小程序中实现类似喜马拉雅FM的tab切换功能，通过分析data-current属性、swiper组件的current控制、change事件以及获取设备尺寸来完成效果。

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

本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码，供大家参考，具体内容如下

分析

1.设置data-current属性用于：点击当前项时，通过点击事件swichNav中处理e.dataset.current取到点击的目标值。

2、swiper组件的current组件用于控制当前显示哪一页

3、swiper组件绑定change事件switchTab，通过e.detail.current拿到当前页

4、需要获取设备的宽度以及高度以便与导航栏切换的滑动

wxml:

<view class="container">
    <!-- tab导航栏 -->
    <!-- scroll-left属性可以控制滚动条位置 -->
    <!-- scroll-with-animation滚动添加动画过渡 -->
    <scroll-view scroll-x="true" class="nav" scroll-left="{
  {navScrollLeft}}" scroll-with-animation="{
  {true}}">
        <block wx:for="{
  {navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
            <view class="nav-item {
  {currentTab == idx ?'