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

谁借莪１个温暖的怀抱￠ 2022-03-09 16:26 475阅读 0赞

index.wxml:

<view class="scroll_box" >    
        <scroll-view class="scroll-view_x" scroll-x style="width: auto;overflow:hidden;">
          <view class="item_list">
              <image src="../image/1.png" class="item_book_img" mode="widthFix"></image>
              <view class='title'>标题1</view>
          </view>
          <view class="item_list">
              <image src="../image/2.png" class="item_book_img" mode="widthFix"></image>
              <view class='title'>标题2</view>
          </view>
          <view class="item_list">
              <image src="../image/3.png" class="item_book_img" mode="widthFix"></image>
              <view class='title'>标题3</view>
          </view>
          <view class="item_list">
              <image src="../image/4.png" class="item_book_img" mode="widthFix"></image>
              <view class='title'>标题4</view>
          </view>
        </scroll-view>
    </view>

index.wxss:

.scroll_box {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      margin-bottom: 40rpx;
    }
    .scroll-view_x {
      padding-left:30rpx;
    }
    
    .item_list {
      width: 420rpx;
      height: auto;
      margin-right: 15rpx;
      display: inline-block;
    }
    
    .item_list .title {
      font-size: 26rpx;
      color: #777;
      text-indent: 10rpx;
    }
    
    .item_book_img {
      width: 420rpx;
    }

发表评论取消回复

表情：

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

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

相关阅读

相关微信小程序快速布局--商品列表左右布局

效果图 ![在这里插入图片描述][20201120141647220.png_pic_center] 标题处做了限制两行商品图片高度自适应.不需要就把mo

Myth丶恋晨/ 2022年12月22日 12:28/ 0 赞/ 355 阅读

相关小程序放大预览图片，并可左右滑动

data: { list:[ { url:'图片链接'}, { url:'图片链接'}, { url:

绝地灬酷狼/ 2022年10月20日 00:56/ 0 赞/ 174 阅读

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

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

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

相关微信小程序图片分包 || 微信小程序资源分包

静态资源处理在分包根目录建一个static包，把资源放进这个static包 pageA --页面1 --页面2 ......

「爱情、让人受尽委屈。」/ 2022年08月29日 05:54/ 0 赞/ 293 阅读

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

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

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

相关微信小程序左右滑动的实现代码(轮播图之运用)

这篇文章主要介绍了微信小程序左右滑动的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛，每天干的事除

Dear 丶/ 2022年05月11日 06:12/ 0 赞/ 149 阅读

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

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 阅读

相关小程序禁止页面左右滑动

小程序禁止页面左右滑动 PS：在开发过程中可能会遇到某一个页面可以左右滑动，在开发者工具是查看不出来，只有在手机预览才可以看的出来（尝试左或者右滑动）。我的解决方法是

绝地灬酷狼/ 2021年09月29日 08:48/ 0 赞/ 475 阅读

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

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

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