微信小程序 scroll

微信小程序 scroll

1.scroll-view 中的需要滑动的元素不可以用 float 浮动使其一行展示；

2.包裹scroll-view的元素如果用 display:flex; 是没有滚动效果的；

3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排；

4.包裹 scroll-view 的元素要加上样式–> overflow:hidden;white-space:nowrap;

5.有时候为了美观要隐藏滚动条，需要在样式里加上

::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}

最后的代码如下：

<view class='scroll-box'><scroll-view scroll-x class='index-nav-scroll'><view wx:for="{{nvaIndex}}" id='{{index}}' class='index-nav-view'>{{item}}</view></scroll-view>
</view>

.scroll-box {position: fixed;width: 100%;overflow: hidden;white-space: nowrap;border-top: 1px solid #d1d4d4; border-bottom: 1px solid #d1d4d4;color: #515151;
}
.index-nav-scroll {width: 100%;height: 75rpx;line-height: 75rpx;padding: 8rpx 0rpx;
}
.index-nav-view {display: inline-block;margin: 0rpx 22rpx;
}
::-webkit-scrollbar {width: 0;height: 0;color: transparent;
}