微信小程序实现图片横向滑动的示例

luffy54592026-01-14 10:39

关于横向滑动，在小程序这里，有两种简单的方式，一个是使用原生scroll-view标签来实现，另一个是使用swiper组件来实现。swiper组件也是小程序自带的，不用额外编写ui和控制逻辑。

对于这两种方式实现，我们直接来看看效果：

picture

上面是swiper组件效果，特点就是，它真的是轮播效果，一个图片占一个屏幕宽度，高度默认150px。图片宽度这里如果不是设置100%，那么多余的部分也不会显示下一个图片的一部分。

通过scroll-view来实现的，就是图片宽度设置之后，它就跟普通元素一样，该多大就多大，一个屏幕宽度页面还可以装下其他图片，在滑动的时候，就是类似滚动条一样左右滑动。而且在手机上很明显就可以看到，滑动的时候，出现一个细长的滚动条。

下面给出代码：

wxml

html 复制代码

<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <view>
      <custom-test data-react-width="80" width="90" bindchange="onChange"></custom-test>
    </view>
    <swiper class="swiper">
      <swiper-item wx:for="{{imgUrls}}" wx:key="id">
        <image src='{{item}}' height="200" mode='widthFix' class='img' />
      </swiper-item>
    </swiper>
    <scroll-view class="scroll-view" scroll-x="true">
       <view class="view-list">
          <view wx:for="{{imgUrls}}" wx:key="id">
              <image src="{{item}}" class="scroll-img"></image>
          </view>
       </view>
    </scroll-view>
  </view>
</scroll-view>

wxss

css 复制代码

.swiper{width:100%;}
.img{width:80%;}
.scroll-view{margin-top: 20rpx;display: block;white-space: nowrap;}
.view-list{
  width: 100%;
  height: 350rpx;
  display: flex;
}
.scroll-img{width:300rpx;height:350rpx;margin-left: 20rpx;}

如果是轮播效果，一个屏幕宽度只显示一张图片，那么首选就是swiper。这个真的是轮播效果，还可以设置autoplay="true"属性实现自动播放效果。

如果是想让页面上某一块内容实现左右切换，且这一屏幕宽度可能还有别的内容，不止一张图片，那么可以考虑scroll-view的方案，它就是传统页面设置x,y水平垂直滑动的效果，会出滚动条的。而且没有自动播放这一效果。移动需要手动来切换。

另外，如果使用swiper方式，有可能图片不显示，那是因为swiper没有设置宽度导致的，所以一般情况下，添加一个width:100%的属性设置。