微信小程序实现顶部标签栏

原创

已于 2025-02-27 15:24:35 修改 · 3.2k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

于 2020-11-02 17:06:59 首次发布

博客介绍了微信小程序标签栏的实现功能，包括页面下滑时标签栏吸顶，点击标签项呈现选中态并切换对应面板，在面板中滑动也可切换标签项和面板。

标签栏实现功能：

页面向下滑动，标签栏吸顶。
点击标签项，标签项呈现选中态，并切换到对应的面板。
在面板中进行滑动，可切换标签项和面板。

<!-- tabs.wxml -->
<wxs module="touch" src="./touch.wxs"></wxs>

<view class="tabs">
  <view class="tab-navs">
    <view class="tab-nav" wx:for="{
  
  {tabs}}" wx:key="index">
      <!-- 通过对比 index 与当前点击的标签项的下标来实现选中态 -->
      <view class="tab-label {
  
  {currentTabIndex === index ? 'active-tab-label' : ''}}" data-index="{
  
  {index}}" bindtap="handleTabChange">{
  
  {item}}</view>
      <view class="tab-divider" wx:if="{
  
  {currentTabIndex === index}}"></view>
    </view>
  </view>
  <!-- 滑动切换面板 -->
  <view class="tab-panel" bindtouchstart="{
  
  {touch.handleTouchstart}}" bindtouchend="{
  
  {touch.handleTouchend}}">&l