uniapp实现横向滚动效果的最佳实践

发布时间：2023-05-21

在移动端应用中，经常出现需要滚动的场景，而在一些特定的场合，需要实现横向滚动效果来展示内容。uniapp作为一种跨平台开发框架，提供了多种方式来实现横向滚动效果，本文将从多个方面来阐述uniapp实现横向滚动效果的最佳实践。

一、使用 uni-swiper 组件实现横向滚动

uni-swiper 组件是 uniapp 提供的一种轮播图组件，通过设置 direction 属性为 horizontal，就可以实现横向滚动的效果。以下为示例代码：

<template>
  <view class="swiper-container">
    <swiper
      class="swiper-wrap"
      :indicator-dots="indicatorDots"
      :autoplay="interval > 0"
      :interval="interval"
      :duration="duration"
      :circular="circular"
      :vertical="false"
      :previous-margin="'30px'"
      :next-margin="'30px'"
    >
      <block v-for="item in banners" :key="item.title">
        <swiper-item>
          <view class="swiper-title">
            {{ item.title }}
          </view>
          <img :src="item.src" class="swiper-img" mode="aspectFit" />
        </swiper-item>
      </block>
    </swiper>
  </view>
</template>
<script>
export default {
  data() {
    return {
      banners: [
        {
          title: '示例1',
          src: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
        },
        {
          title: '示例2',
          src: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
        },
        {
          title: '示例3',
          src: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg'
        }
      ],
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      circular: true,
      duration: 500
    };
  },
  onShareAppMessage() {}
};
</script>

二、使用 uni-list-view 实现横向滚动

uni-list-view 是 uniapp 提供的一种滚动列表组件，通过设置 scrollDirection 属性为 horizontal，就可以实现横向滚动的效果。以下为示例代码：

<template>
  <view class="list-view">
    <uni-list-view
      :list="list"
      :scroll-direction="'horizontal'"
      :refresher-enabled="false"
      :scroll-top="scrollTop"
    ></uni-list-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: '示例1',
          icon: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
        },
        {
          title: '示例2',
          icon: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
        },
        {
          title: '示例3',
          icon: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg'
        }
      ],
      scrollTop: 0
    };
  },
  onShareAppMessage() {}
};
</script>

三、使用 CSS 实现横向滚动

除了使用 uniapp 提供的组件外，我们还可以使用 CSS 来实现横向滚动的效果。实现方式为通过 CSS 设置 overflow-x 属性为 scroll，来使滚动内容超出容器，并实现横向滚动。以下为示例代码：

<template>
  <view class="scroll-wrapper">
    <view class="scroll-content">
      <view class="scroll-item">示例1</view>
      <view class="scroll-item">示例2</view>
      <view class="scroll-item">示例3</view>
    </view>
  </view>
</template>
<style>
.scroll-wrapper {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
.scroll-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scroll-item {
  width: 200px;
  height: 200px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
</style>

四、解决横向滚动事件冲突

在实际使用过程中，我们可能还需要在横向滚动的容器中嵌入其他组件，例如下拉刷新、底部加载更多等功能。此时，会出现一个事件冲突的问题：当用户手指从左往右滑动时，往往导致容器横向滚动而不是触发下拉刷新等功能。 要解决这个问题，我们可以通过在容器上监听滑动事件，并根据滑动方向来判断当前要执行哪个功能。示例代码如下：

<template>
  <view
    class="scroll-wrapper"
    @touchstart="touchstartEvent"
    @touchmove="touchmoveEvent"
    @touchend="touchendEvent"
  >
    <view class="scroll-content">
      <view class="scroll-item">示例1</view>
      <view class="scroll-item">示例2</view>
      <view class="scroll-item">示例3</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      startX: 0,
      startY: 0,
      isVertical: false, // 是否垂直滑动
      isHorizontal: false // 是否横向滑动
    };
  },
  methods: {
    touchstartEvent(e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
      this.isVertical = false;
      this.isHorizontal = false;
    },
    touchmoveEvent(e) {
      const deltaX = e.changedTouches[0].pageX - this.startX;
      const deltaY = e.changedTouches[0].pageY - this.startY;
      if (!this.isVertical && Math.abs(deltaX) > Math.abs(deltaY)) {
        // 横向滑动，阻止事件向下传递
        e.stopPropagation();
        this.isHorizontal = true;
      } else if (!this.isHorizontal && Math.abs(deltaY) > Math.abs(deltaX)) {
        // 垂直滑动
        this.isVertical = true;
      }
    },
    touchendEvent() {
      // 滑动事件结束后，根据isHorizontal和isVertical的值来判断执行哪个功能
    }
  },
  onShareAppMessage() {}
};
</script>
<style>
.scroll-wrapper {
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}
.scroll-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.scroll-item {
  width: 200px;
  height: 200px;
  background-color: #000;
  color: #fff;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}
</style>

通过以上代码，我们就能够实现同时具备横向滚动、下拉刷新、底部加载更多等功能的页面。

总结

本文详细介绍了 uniapp 实现横向滚动效果的最佳实践，分别从 uni-swiper 组件、uni-list-view 组件、CSS 实现以及解决事件冲突四个方面进行了阐述。在实际开发中，我们可以根据具体的需求选择合适的方式来实现横向滚动效果。

推荐文章