<view class="banner">
<scroll-view class='scroll_list' scroll-x="true">
<view wx:for="{{array}}" wx:for-index="index" wx:for-item="item" class='scroll_for'>
<view class="icon_mian scroll_item" >
<image src="{{item.img}}" class="icon_img"></image>
<view>{{item.title}}</view>
</view>
</view>
</scroll-view>
</view>
// pages/home/home.js
Page({
data: {
array: [{
img: "../../static/images/home/4.png",
title: "雨伞0"
}, {
img: "../../static/images/home/4.png",
title: "雨伞1"
}, {
img: "../../static/images/home/4.png",
title: "雨伞2"
}, {
img: "../../static/images/home/4.png",
title: "雨伞3"
}, {
img: "../../static/images/home/4.png",
title: "雨伞4"
}, {
img: "../../static/images/home/4.png",
title: "雨伞5"
}, {
img: "../../static/images/home/4.png",
title: "雨伞6"
}, {
img: "../../static/images/home/4.png",
title: "雨伞7"
}, {
img: "../../static/images/home/4.png",
title: "雨伞8"
}]
}
})
.scroll_list{
display: flex;
white-space: nowrap;/*一定要加,不让换行*/
}
.scroll_for{
display: inline-block;
text-align: center;
}
.scroll_item {
width:180rpx;
display: inline-block;
}
.icon_mian {
height: 260rpx;
float: left;
text-align: center;
}
.icon_img {
width: 80rpx;
height: 80rpx;
}
注意:此时滚动时会出现横向滚动条闪现,如果想隐隐藏,可以在scroll-view 外层再加一层
.banner {
width: 100%;
height: 160rpx; /*一、外层这个高度要小于scroll_item 的高度*/
overflow: hidden; /* 二、截掉滚动条*/
}