当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 小程序导航栏滑动效果和下标获取

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

2018年09月26日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网