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

逃离我推掉我的手 2021-10-19 05:56 446阅读 0赞

wxml代码

<scroll-view scroll-x="true"> 
          <view class="banner" scroll-x="true"> 
               <view class="banner_Item"> 
                     第一块
              </view> 
              <view class="banner_Item"> 
                     第二块
              </view> 
              <view class="banner_Item"> 
                     第三块
              </view> 
              <view class="banner_Item"> 
                     第四块
              </view> 
             <view class="banner_Item"> 
                     第五块
              </view> 
          </view> 
    </scroll-view>

wxss代码

.banner{ 
            height:160rpx; 
            width:100%;
            display: flex;
            display: -webkit-box;
            flex-direction: column;
      } 
    .banner_Item{  
           width: 160rpx;
           height: 160rpx;
           background-color:red;
           margin-right:10rpx;
      }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: /images/20211018/9ece26082e714b4baf5d20a7d9e31ad0.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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