版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/88533516
index.wxml:
<view class="scroll_box" >
<scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
<view class="item_list">
<image src="../image/1.png" class="item_book_img" mode="widthFix"></image>
<view class='title'>标题1</view>
</view>
<view class="item_list">
<image src="../image/2.png" class="item_book_img" mode="widthFix"></image>
<view class='title'>标题2</view>
</view>
<view class="item_list">
<image src="../image/3.png" class="item_book_img" mode="widthFix"></image>
<view class='title'>标题3</view>
</view>
<view class="item_list">
<image src="../image/4.png" class="item_book_img" mode="widthFix"></image>
<view class='title'>标题4</view>
</view>
</scroll-view>
</view>
index.wxss:
.scroll_box {
width: 100%;
overflow: hidden;
white-space: nowrap;
margin-bottom: 40rpx;
}
.scroll-view_x {
padding-left:30rpx;
}
.item_list {
width: 420rpx;
height: auto;
margin-right: 15rpx;
display: inline-block;
}
.item_list .title {
font-size: 26rpx;
color: #777;
text-indent: 10rpx;
}
.item_book_img {
width: 420rpx;
}