微信小程序组件左右滑动没有效果的问题
小程序组件 < scroll-view > 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经调试发现:
- < scroll-view > 中的需要滑动的元素不可以用 float 浮动;
- < scroll-view > 中,包裹着需要滑动的元素的大盒子用 display:flex; 是没有作用的;
- < scroll-view > 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向排版;
- < scroll-view > 本身或者是包裹着< scroll-view >的大盒子需要有明确的宽并且要加上样式–> overflow:hidden;white-space:nowrap;
<scroll-view scroll-x class='hot-list graybg'>
<view class='hot-good' wx:for="{
{hotlist}}">
<image class='backwhite' src='{
{item.pic}}'></image>
<view class='overhiddent graybg' style='padding:18rpx 0 6rpx 0;'>
{
{ item.content }}
</view>
<view class='red graybg'>{
{item.showPrice}}/天</view>
</view>
</scroll-view>
.hot-list{
padding: 20rpx 0rpx;
width: auto;
overflow: hidden;
white-space: nowrap;
}
.hot-good{
width: 260rpx;
display: inline-block;
margin: 0 20rpx;
font-size: 24rpx;
}