微信小程序横向滚动
scroll-view
小程序的scroll-view 处理横向滚动遇到的问题
html页面
注意:scroll-view 不用设置宽度;auto 就OK
<view class='scroll-product'> <scroll-view class="scroll-view_x" scroll-x style="width:auto;overflow:hidden;"> <block wx:for="{{fastList}}" wx:key> <navigator hover-class="none" class='item' url=''> <view class='pro-info line1'>{{item.name}}</view> </navigator> </block> </scroll-view> </view>
css
注意:scroll-view 的外层元素一定要设置不要换行
.orderPage_container { width: 100%; box-sizing: border-box; padding: 0 30rpx; } .scroll-product { white-space: nowrap; margin-top: 38rpx; padding: 0 30rpx 37rpx 30rpx; } .item { width: 180rpx; display: inline-block; margin-right: 19rpx; border-bottom: 4rpx solid #47b479; box-shadow: 0 40rpx 30rpx -10rpx #eee; } .pro-info { font-size: 20px; color: #333; }
js
data: { fastList: [ { name: 'ds1' }, { name: 'ds2' }, { name: 'ds3' }, { name: 'ds4' }, { name: 'ds5' } ] },
浩楠哥