当使用scroll-view这个标签的时候,我们是为了实现向左滑或者向下滑的效果。
一下是我的案例:
在刚开始的时候就是这样写的,但是一直都不可以出现滑动效果,于是果断换思路。就有了下面的这样的布局
<scroll-view class='cover' scrollX="true">
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
</scroll-view>
修改过后的布局:
<view class="scroll_box">
<scroll-view class='cover' scrollX="true">
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
<view>
<image src='../../resource/1.jpg'/>
</view>
</scroll-view>
</view>
.cover{
height: 100rpx;
}
.scroll_box{
width: 84%;
overflow: hidden;
background: #fff;
white-space: nowrap;
margin: 0 auto;
}
/*封面的样式 */
.cover image{
width: 150rpx;
height: 130rpx;
margin-right: 20rpx;
}
.cover view{
display:inline-block;
}