微信小程序scroll-view左右横向滑动

蔚落 2021-09-17 04:00 372阅读 0赞

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试发现：

1.scroll-view 中的需要滑动的元素不可以用 float 浮动；

2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的；

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

4.包裹 scroll-view 的大盒子有明确的宽和加上样式-->  overflow:hidden;white-space:nowrap;

具体的测试代码如下：

**.wxml**

<view class="scroll_box"> 
        <scroll-view scroll-x>
    
          <view class="item_list" >
            1
          </view>
          <view class="item_list" >
            2
          </view>
          <view class="item_list" >
            3
          </view>
          <view class="item_list" >
            4
          </view>
          <view class="item_list" >
            5
          </view>
          <view class="item_list" >
            6
          </view>
         
        </scroll-view>
      </view>

**.wxss**

.scroll_box{
    width: 100%;
    height: 307rpx;
    overflow: hidden;
    padding: 20rpx;
    background: #fff;
    white-space: nowrap;
    border: 1px solid red;
    }
    .scroll_box scroll-view{
      height: 100%;
      width: auto;
      overflow:hidden;
    }
    .item_list{
    width: 160rpx;
    height: 100%;
    margin-right: 23rpx;
    display: inline-block;
    margin-left: 10px;
    background-color: blue;
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序实现卡片左右滑动效果

前言快放假了，人狠话不多，啥也不说了。先看效果图。思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。

向右看齐/ 2022年10月01日 11:47/ 0 赞/ 808 阅读

相关微信小程序官方横向滚动tab

先看效果： ![Center][] Page(\{ data: \{ bodyList: \[ \{

Bertha 。/ 2022年06月16日 06:11/ 0 赞/ 317 阅读

相关微信小程序顶部滑动tab

小程序商品展示需要导航栏的商品分类进行滑动效果图： ![SouthEast][] ![SouthEast 1][] 首先是滑动的效果： <scroll

向右看齐/ 2022年06月01日 02:06/ 0 赞/ 375 阅读

相关关于小程序 scroll-view 左右横向滑动没有效果（无法滑动）问题

对于小程序的scroll-view组件，有纵向滑动与横向滑动2种。 \-》对于纵向滑动，只需要跟scroll-view组件一个固定高度即可； \-》对于横向滑动，一不小心就

妖狐艹你老母/ 2022年05月26日 09:52/ 0 赞/ 334 阅读

相关微信小程序实现横向滚动

最近做项目的时候遇到一个需求实现自定义导航栏的横向滚动,研究了一会,今天记录一下. 看一下实现效果: (下面的导航栏由六个view组成,可滑动) ![70][]

ゝ一纸荒年。/ 2022年05月21日 00:45/ 0 赞/ 375 阅读

相关微信小程序-横向滑动scroll-view隐藏滚动条

文章转载自：[https://blog.csdn.net/qq\_24734285/article/details/53912799][https_blog.csdn.net_

傷城~/ 2022年05月16日 14:41/ 0 赞/ 271 阅读

相关微信小程序---左右滑动（图片列表）

index.wxml: <view class="scroll_box" > <scroll-view class="scroll-view_

谁借莪１个温暖的怀抱￠/ 2022年03月09日 16:26/ 0 赞/ 476 阅读

相关微信小程序横向图片左右滑动

wxml代码 <scroll-view scroll-x="true"> <view class="banner" scroll-x="true

逃离我推掉我的手/ 2021年10月19日 05:56/ 0 赞/ 515 阅读

相关微信小程序scroll-view左右横向滑动

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过），经调试

蔚落/ 2021年09月17日 04:00/ 0 赞/ 373 阅读

相关微信小程序 - scroll-view横向滚动

scroll-view 设置横向滚动 // html scroll-view.scroll(:scroll-x="true") div(v-fo

叁歲伎倆/ 2021年07月26日 19:41/ 0 赞/ 535 阅读