新人小白初来乍到 各位前辈大牛还望多多指教。。。
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);
}