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

蔚落 2021-09-17 04:00 391阅读 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 条评论，391人围观）

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

相关阅读

相关微信小程序使用swiper制作左右滑动tabs导航

首先我们先来看一下效果吧 ![20200520152402307.png][] ![20200520152409677.png][] 很简单 wxml <!-

桃扇骨/ 2023年02月10日 05:22/ 0 赞/ 24 阅读

相关小程序--微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果： ![d80967

约定不等于承诺〃/ 2022年10月06日 00:58/ 0 赞/ 19 阅读

相关小程序-左右滑动效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

Dear 丶/ 2022年10月06日 00:57/ 0 赞/ 28 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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