微信小程序滚动视图水平滚动实现过程解析 - 行业资讯 - 肥雀云

<强> 1。滚动视图水平滚动使用
　　

1。wxml
　　

　　　　　　& lt;滚动视图类=皊croll-wrap”scroll-x> 　　& lt;视图类=皊croll-view-item”比; 　　& lt;视图类=" scroll-img-wrap scroll-major-img-wrap”比; 　　& lt;图像src=" https://www.yisu.com/images/wukecheng@2x.png " class=" img-responsive "/比; 　　& lt;/view> 　　& lt;文本类=" scroll-title scroll-major-title”在膳食与营养膳食与营养膳食……& lt;/text> 　　& lt;/view> 　　& lt;视图类=皊croll-view-item”比; 　　& lt;视图类=" scroll-img-wrap scroll-major-img-wrap”比; 　　& lt;图像src=" https://www.yisu.com/images/wukecheng@2x.png " class=" img-responsive "/比; 　　& lt;/view> 　　& lt;文本类=" scroll-title scroll-major-title”在膳食与营养膳食与营养膳食……& lt;/text> 　　& lt;/view> 　　& lt;视图类=皊croll-view-item”比; 　　& lt;视图类=" scroll-img-wrap scroll-major-img-wrap”比; 　　& lt;图像src=" https://www.yisu.com/images/wukecheng@2x.png " class=" img-responsive "/比; 　　& lt;/view> 　　& lt;文本类=" scroll-title scroll-major-title”在膳食与营养膳食与营养膳食……& lt;/text> 　　& lt;/view> 　　& lt;视图类=皊croll-view-item”比; 　　& lt;视图类=" scroll-img-wrap scroll-major-img-wrap”比; 　　& lt;图像src=" https://www.yisu.com/images/wukecheng@2x.png " class=" img-responsive "/比; 　　& lt;/view> 　　& lt;文本类=" scroll-title scroll-major-title”在膳食与营养膳食与营养膳食……& lt;/text> 　　& lt;/view> 　　& lt;/scroll-view> 　　　　

2。wxs
　　

　　　　　　.scroll-wrap { 　　min-width: 100%; 　　身高:360 rpx; 　　空白:nowrap;}/*不可缺少*/} 　　.scroll-view-item { 　　宽度:68%; 　　身高:360 rpx; 　　显示:inline-block;//可以使每一项水平排列　　} 　　.scroll-view-item + .scroll-view-item { 　　margin-left: 16 rpx; 　　} 　　::-webkit-scrollbar{//隐藏滚动条　　宽度:0; 　　高度:0; 　　颜色:透明; 　　} 　　.scroll-img-wrap { 　　宽度:100%; 　　身高:280 rpx; 　　溢出:隐藏; 　　border - radius: 8 rpx; 　　} 　　.scroll-title { 　　空白:nowrap;} 　　溢出:隐藏; 　　文本溢出:省略; 　　显示:块; 　　} 　　.scroll-major-img-wrap { 　　身高:280 rpx; 　　} 　　.scroll-major-title { 　　保证金:16 rpx 8 rpx; 　　} 　　　　

<强> 2。滚动视图隐藏滚动条
　　

　　　　　　::-webkit-scrollbar { 　　宽度:0; 　　高度:0; 　　颜色:透明; 　　} 　　　　

<强> 3。效果如下:

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

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