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

H_c_l

于 2019-08-17 15:38:38 发布

阅读量3.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： css 文章标签：小程序

本文链接：https://blog.youkuaiyun.com/H_c_l/article/details/99693704

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现横向图片的左右滑动功能，包括了wxml和wxss的相关代码示例，以及最终实现的效果图展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
  }