在小程序中，你可以使用 scroll-view 和 view 结合事件监听来实现纵向选项卡组件，用户通过滑动来切换不同的内容。以下是一个简单的示例：

1. 创建一个自定义组件目录，例如 components。

2. 在 components 目录下创建一个纵向选项卡组件的文件，例如 vertical-tab。

   - components/vertical-tab/vertical-tab.wxml：
     <scroll-view class="tab-scroll" scroll-y="{{true}}" bindscrolltoupper="scrollToUpper">
       <view class="tab-item" wx:for="{{tabList}}" wx:key="index" data-index="{{index}}" bindtap="selectTab">
         {{item}}
       </view>
     </scroll-view>

     <!-- 内容区域 -->
     <view class="content">
       <view class="content-item" wx:for="{{contentList}}" wx:key="index" wx:if="{{index === currentIndex}}">
         {{item}}
       </view>
     </view>

   - components/vertical-tab/vertical-tab.js：
     Component({
       data: {
         tabList: ['选项1', '选项2', '选项3'],
         contentList: ['内容1', '内容2', '内容3'],
         currentIndex: 0,
       },
       methods: {
         scrollToUpper: function () {
           // 滚动到顶部时的逻辑
         },
         selectTab: function (e) {
           const index = e.currentTarget.dataset.index;
           if (index !== this.data.currentIndex) {
             this.setData({
               currentIndex: index,
             });
           }
         },
       },
     });

   - components/vertical-tab/vertical-tab.wxss：
     .tab-scroll {
       height: 200px;
       width: 80px;
       border-right: 1px solid #ddd;
     }

     .tab-item {
       text-align: center;
       line-height: 50px;
       border-bottom: 1px solid #ddd;
     }

     .content {
       flex: 1;
       padding: 20px;
     }

     .content-item {
       display: none;
     }

     .content-item.active {
       display: block;
     }

3. 在需要使用纵向选项卡组件的页面中引入该组件。
   <vertical-tab></vertical-tab>

这是一个简单的纵向选项卡组件的示例。在实际开发中，你可能需要根据项目需求对样式和逻辑进行更进一步的定制。在实际开发中，你也可以使用小程序 UI 组件库，这些库通常提供了丰富的选项卡组件，能够简化开发流程。


转载请注明出处：http://www.zyzy.cn/article/detail/1349/微信小程序