uniapp如何实现页面左右滚动

uniapp如何实现页面左右滚动

在一些场景下，需要实现页面左右滑动的效果，比如轮播图、商品列表等。uniapp作为一款跨平台的开发框架，在实现页面左右滑动的效果上也提供了一些简单的方法。

1.使用uni-swiper组件实现左右滑动

uni-swiper是uniapp提供的轮播图组件，它可以实现图片或者卡片样式的轮播效果。而在需要左右滑动的场景下，我们可以通过设置swiper的属性值，实现左右滑动的效果。

<!-- 在页面的template标签中 -->
<uni-swiper :indicator-dots="false" :duration="500" :autoplay="false" :circular="false" 
:current="current.index" @change="swiperChange">
  <uni-swiper-item v-for="(item, index) in list" :key="index">
    <div class="item-class">
      <img :src="item.imgUrl" />
    </div>
  </uni-swiper-item>
</uni-swiper>

需要注意的是，uni-swiper组件只支持在子组件内部绑定change事件，因此我们需要在swiper-item中绑定这个事件。

// 在页面的script标签中
export default {
  data() {
    return {
      list: [{
        imgUrl: '../../static/img1.jpg'
      }, {
        imgUrl: '../../static/img2.jpg'
      }, {
        imgUrl: '../../static/img3.jpg'
      }, {
        imgUrl: '../../static/img4.jpg'
      }, {
        imgUrl: '../../static/img5.jpg'
      }],
      current: {
        index: 0
      }
    }
  },
  methods: {
    swiperChange(e) {
      this.current.index = e.detail.current
      // 处理左右滑动的逻辑
    }
  }
}

2.使用scroll-view组件实现左右滑动

scroll-view是uniapp提供的滑动容器组件，它可以实现横向或纵向的滚动效果，因此也可以用来实现页面的左右滑动效果。

<!-- 在页面的template标签中 -->
<scroll-view class="wrapper" :scroll-x="true" :scroll-y="false" @scrolltoupper="scrolltoupper"
  @scrolltolower="scrolltolower">
  <div class="content">
    <div class="item">
      <img :src="img1" />
    </div>
    <div class="item">
      <img :src="img2" />
    </div>
    <div class="item">
      <img :src="img3" />
    </div>
  </div>
</scroll-view>

需要注意的是，scroll-view组件需要设置wrapper和content两个div元素的宽度，以实现左右滑动的效果。

// 在页面的style标签中
.wrapper {
  white-space: nowrap;
  overflow-x: scroll;
}
.content {
  display: inline-block;
  width: 750rpx;
}
.item {
  margin-right: 30rpx;
  display: inline-block;
  background-color: #ffffff;
  width: 210rpx;
  height: 210rpx;
}

需要注意的是，在scroll-view组件里面的组件需要设置为display: inline-block或inline-flex，以实现在水平方向上布局。

结语

以上是uniapp实现页面左右滑动的两种方法，通过这两种方法可以实现多种而又灵活的滑动效果，根据需要选择合适的方法即可。