小程序导航栏滑动效果和下标获取

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

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;
}

wxml

<!-- 滑动导航 -->

<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

data: {

   recommended: [

      { 'text': '吊坠' },

      { 'text': '耳饰' },

      { 'text': '戒指' },

      { 'text': '手链' },

      { 'text': '胸针' },

      { 'text': '手镯' },

  ]

},

 

/*获取列表的下标*/

wxml

 

<view data-index="{{index}}" bindtap="getclick"> </view>   

 

js

 

getclick:function(e){

     var i =  e.currenttarget.dataset.index;

    console.log(i);

}