<scroll-view class="index-scroll" scroll-y="{{true}}" bindscrolltoupper="scrollToUpper" bindscroll="scrollHandler">
       <view class="index-container">
         <view class="index-item" wx:for="{{indexList}}" wx:key="index" data-index="{{index}}" bindtap="jumpToIndex">
           {{item}}
         </view>
       </view>

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

     Component({
       data: {
         indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
         dataList: [
           { index: 'A', item: 'Apple' },
           { index: 'A', item: 'Avocado' },
           { index: 'B', item: 'Banana' },
           { index: 'C', item: 'Cherry' },
           // 其他数据项...
         ],
         currentIndex: 0,
       },
       methods: {
         scrollToUpper: function () {
           // 滚动到顶部时的逻辑
         },
         scrollHandler: function (e) {
           // 滚动时的逻辑，根据滚动位置更新索引
           // 具体逻辑可以根据实际情况进行调整
           const scrollTop = e.detail.scrollTop;
           const index = Math.floor(scrollTop / 20); // 每个索引项的高度为 20px
           this.setData({
             currentIndex: index,
           });
         },
         jumpToIndex: function (e) {
           // 点击索引项时的逻辑，滚动到相应位置
           const index = e.currentTarget.dataset.index;
           const query = wx.createSelectorQuery().in(this);
           query.select(`#content-item-${index}`).boundingClientRect();
           query.exec((res) => {
             if (res && res[0]) {
               const top = res[0].top;
               this.setData({
                 currentIndex: index,
               });
               wx.pageScrollTo({
                 scrollTop: top,
                 duration: 300,
               });
             }
           });
         },
       },
     });

     .index-scroll {
       height: 100vh;
       width: 100%;
       display: flex;
     }

     .index-container {
       width: 20px;
       background-color: #f5f5f5;
       position: fixed;
       top: 0;
       bottom: 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       padding-top: 20px;
     }

     .index-item {
       height: 20px;
       line-height: 20px;
       text-align: center;
       color: #333;
       font-size: 12px;
       margin-bottom: 2px;
       cursor: pointer;
     }

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

     .content-item {
       height: 20px;
       line-height: 20px;
       margin-bottom: 10px;
     }

   <index-list></index-list>