微信小程序 scroll-view 横向划不动

最新推荐文章于 2022-08-26 16:26:07 发布

转载最新推荐文章于 2022-08-26 16:26:07 发布 · 5.1k 阅读

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种实现水平滚动视图的方法，通过设置scroll-view组件属性，并配合特定的CSS样式来确保滚动效果平滑且直观。文章详细展示了如何定义scroll-view的宽度、white-space属性以及每个滚动项目的宽度和显示方式。

当是垂直滚动的时候,官网的实例即可完成
当是水平滚动的时候,注意:

<view class="a-scroll">
      <scroll-view scroll-x class="my-scroll">
        <view id="img1" class="s-item">
          <image src="../image/timg.jpg"></image>
        </view>
        <view id="img2" class="s-item">
          <image src="../image/战狼.jpg"></image>
        </view>
        <view id="img3" class="s-item">
          <image src="../image/战狼2.jpg"></image>
        </view>
      </scroll-view>  
    </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

css文件要求

一定要将scroll-view容器设置宽度,并设置white-space: nowrap;
一定要将scroll-view容器的每一项都设置宽度和display:inline-block

    .a-scroll{
      width: 100%;
      height: 300rpx;
    }
    .my-scroll{
      width: 100%;
      white-space: nowrap; 
    }
    .s-item{
      width: 100%;
      display: inline-block;
    }
    .a-scroll image{
      width: 100%;
      height: 300rpx;
    }