小程序实现滑动导航栏及获取列表的下标

新人小白初来乍到 各位前辈大牛还望多多指教。。。

wxss

/* 滑动导航栏 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.home-content-recommended-list{
width:100%;
height:70rpx;
line-height: 70rpx;
white-space:nowrap;
background: #202224;
}
.recommended{
/* width:156rpx; */
display:inline-block;
flex-direction:column;
text-align:center;
white-space:normal;
}
.recommendedImg{
width:156rpx;
height:156rpx;
border-radius: 10rpx;
}
.recommendedImg>image{
width:100%;
height:100%;

}
.recommended-text{
width:150rpx;
height:40rpx;
font-size:14px;
line-height:40rpx;
text-align: center;
color: #fff;
}

w

<!-- 滑动导航 -->

<view class="home-content-recommended-list">
    <scroll-view scroll-x="true">
      <block wx:for="{{recommended}}" wx:for-item="item" >
          <view class='recommended' catchtap='clickManager'>
               <view class='recommended-text'>{{item.text}}</view>
          </view>
       </block>
   </scroll-view>
</view>

js