微信小程序滚动视图水平滚动实现过程解析

1.滚动视图水平滚动使用

1.页面结构

scroll-view class=' scroll-wrap ' scroll-x view class=' scroll-view-item ' view class=' scroll-img-wrap scroll-major-img-wrap ' image src=' http :/./images/[email protected]' class=' img-responsive '/view text class=' scroll-title scroll-major-title '膳食与营养膳食与营养膳食./text/view view class=' scroll-view-item ' view class=' scroll-img-wrap scroll-major-img-wrap ' image src=' http :/./images/[email protected]' class=' img-responsive '/view text class=' scroll-title scroll-major-title '膳食与营养膳食与营养膳食./text/view view class=' scroll-view-item ' view class=' scroll-img-wrap scroll-major-img-wrap ' image src=' http :/./images/[email protected]' class=' img-responsive '/view text class=' scroll-title scroll-major-title '膳食与营养膳食与营养膳食./text/view view class=' scroll-view-item ' view class=' scroll-img-wrap scroll-major-img-wrap ' image src=' http :/./images/[email protected]' class=' img-responsive '/view text class=' scroll-title scroll-major-title '膳食与营养膳食与营养膳食./文本/视图/滚动视图2 .页面样式表。卷轴包装{最小宽度： 100%;height : 360 rpx white-space : nowrap；/*不可缺少*/}.滚动查看项目{宽度： 68%;高度： 360rpxdisplay:内联块；//可以使每一项水平排列}.滚动查看项目。滚动视图项{左边距： 16rpx} :-web套件-滚动条{//隐藏滚动条宽度： 0;高度： 0;颜色：透明；} .滚动-img-wrap {宽度： 100%；高度： 280rpx飞越：隐藏；边界半径： 8 rpx}.滚动标题{空白： nowrap飞越：隐藏；文本-飞越：省略号；显示器：块；}.滚动-主要-img-环绕{ height: 280rpx}。滚动-主要-标题{ margin: 16rpx 8rpx} 2。滚动视图隐藏滚动条

:-web工具包-滚动条{ width : 0；高度： 0;颜色：透明；}3.效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。