小程序滑动选项卡tab

最新推荐文章于 2022-11-14 11:06:45 发布

天天爱TOP

最新推荐文章于 2022-11-14 11:06:45 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序 js 文章标签：小程序 tab scrollview

本文链接：https://blog.youkuaiyun.com/qq_39779284/article/details/103767596

小程序同时被 2 个专栏收录

14 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍了如何在小程序中实现滑动选项卡的功能。当点击选项卡时，它会相应地放大，并通过滑动实现其他选项卡的切换。内容包括WXML、WXSS和JS的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在完成小程序时遇到了一个滑动tab。

主要实现的效果是：

点击tab某项时，进行放大，点击左面的tab整体向左滑。

点击右面的tab向右滑。

借鉴了往上的例子稍微改动了一下

现在记录一下：

wxml：

<!--pages/find/find.wxml-->
<view class="wrap">
  <view class="background_img">
    <image src="../image/active_banner.png" mode="widthFix"></image>

    <view class="search_title">
      <view class="top_content">
        <view class="looked_type">
          <scroll-view scroll-x class="navbar" scroll-with-animation scroll-left="{{scrollLeft}}rpx">
            <view wx:for="{{tabs}}" wx:key="id" bindtap="tabSelect" data-id="{{index}}" class=" {{index==tabCur?'tab-on':''}}">{{item.name}}</view>
          </scroll-view>
        </view>
        <view class="find_more">
          <image src="../image/find_icon1.png"></image><!-- 更多小图标 -->
        </view>
      </view>

      <view class="nav-item">

      </view>

      <view></view>
    </view>
  </view>
</view>

wxss：

/* pages/find/find.wxss */
page{
  height: 100%;
}
.wrap{
  width: 690rpx;
  min-height: 100%;
  background: #fff !important;
  margin: auto;
}
.background_img{
  padding-top: 30rpx;
}
.search_title{
  padding: 0 10rpx;
  /* overflow: hidden; */
  margin-top: 40rpx;
}
.top_content{
  display: flex;
  position: relative;
}
.looked_type{
  /* height: 50rpx; */
  font-size:34rpx;
font-family:PingFang SC;
font-weight:bold;
color:rgba(124,136,148,1);
  white-space: nowrap;
  overflow: scroll;

}
.looked_type::-webkit-scrollbar {
        display: none;
    }
.looked_type view{
  margin-right: 33rpx;

  display: inline-block;
}
.find_more{
  width: 50rpx;
  height: 50rpx;
  background: #fff;
  position: absolute;
  right: 0;
  text-align: center;

}
.find_more>image{
  width: 35rpx;
  height: 35rpx;
  vertical-align: -12rpx;
}
 /* 选中放大 */
.tab-on {
 color: #fbbd08;
 font-size: 42rpx !important;
 font-weight: 600;
}

js：

// pages/find/find.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabCur: 0, //默认选中
    tabs: [{
      name: '吉他',
      id: 0
    },
    {
      name: '贝斯',
      id: 1
    },
    {
      name: '非洲鼓',
      id: 2
    },
    {
      name: '声乐',
      id: 3
    },
    {
      name: '舞蹈',
      id: 4
    },
    {
      name: '管弦乐',
      id: 5
    },
    {
      name: '管弦乐',
      id: 6
    },
    {
      name: '管弦乐',
      id: 8
    },
    {
      name: '管弦乐',
      id: 9
    }
    ]
  },
  //选择类型
  tabSelect(e) {
    // console.log(e.target.offsetLeft)
    console.log(e.detail.x)
    // if
    switch (true){
      case e.detail.x>160:
      console.log(1)
        this.setData({
          tabCur: e.currentTarget.dataset.id,
          scrollLeft: (e.currentTarget.dataset.id - 2) * 200
        })
      break;
      case e.detail.x <= 160:
        this.setData({
          tabCur: e.currentTarget.dataset.id,
          scrollLeft: (e.currentTarget.dataset.id - 2) 
        })
      console.log(0)
        break;
    }

  },
 

})