微信小程序 两种滑动方式（横向滑动，竖向滑动）详细及实例代码
微信小程序滑动方式
竖向滑动：
<scroll-viewscroll-y="true"style="height:200rpx;"> <viewstyle="background:red;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:green;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:blue;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:yellow;width:200px;height:100px;display:inline-block"></view> </scroll-view>
横向滑动：
<!--white-space--> normal:正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行) pre:保持HTML源代码的空格与换行,等同与pre标签 nowrap:强制文本在一行,除非遇到br换行标签 pre-wrap:同pre属性,但是遇到超出容器范围的时候会自动换行 pre-line:同pre属性,但是遇到连续空格会被看作一个空格 inherit:继承
水平滚动
<scroll-viewscroll-x="true"style="white-space:nowrap;display:flex"> <viewstyle="background:red;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:green;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:blue;width:200px;height:100px;display:inline-block"></view> <viewstyle="background:yellow;width:200px;height:100px;display:inline-block"></view> </scroll-view>
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！