小程序横向滚动

在微信小程序应用的越来越多的今天，写小程序的程序员也越来越多了，本人也是刚写完微信小程序，在开发的时候也遇到一些坑，今天先写一下前几天刚遇到的问题；

相信在微信小程序中横向滚动应该是经常用到的，这一点在小程序的官方文档里也是写的比较清楚了，只要用scroll-view这个组件就可以做到，

<view class="container">

<view class="section__title">horizontal scroll</view>

<scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">

<view id="green" class="scroll-view-item_H bc_green" style="background:green;"></view>

<view id="red" class="scroll-view-item_H bc_red" style="background:red;"></view>

<view id="yellow" class="scroll-view-item_H bc_yellow" style="background:yellow;"></view>

<view id="blue" class="scroll-view-item_H bc_blue" style="background:blue;"></view>

</scroll-view>

</view>

在官方文档里大概布局就是这样写的，但是最重要的还是在它的wxss样式里面，

.scroll-view_H{

width:100%;

height:300rpx;

display: flex;

white-space: nowrap;

}

.scroll-view_H .scroll-view-item_H{

width:300rpx;

height:100%;

display:inline-block;

}

这样微信小程序的横向滚动就基本完成了，但是经过测试发现，这样只能在iphone手机上运行，在安卓手机是完全无效的。

所以这个时候我们要在wxss加上最重要的一句：overflow：scroll；

加上这句时候，就既可以在ios里运行，也能在安卓下运行，一个横向滚动就算完成了；

转载于:https://www.cnblogs.com/winter92/p/8328292.html