pco/app/uview-ui/components/u-scroll-list/u-scroll-list.vue

<template>
  <view
      class="u-scroll-list"
      ref="u-scroll-list"
  >
    <!-- #ifdef APP-NVUE -->
    <!-- nvue使用bindingX实现，以得到更好的性能 -->
    <scroller
        class="u-scroll-list__scroll-view"
        ref="u-scroll-list__scroll-view"
        scroll-direction="horizontal"
        :show-scrollbar="false"
        :offset-accuracy="1"
        @scroll="nvueScrollHandler"
    >
      <view class="u-scroll-list__scroll-view__content">
        <slot/>
      </view>
    </scroller>
    <!-- #endif -->
    <!-- #ifndef APP-NVUE -->
    <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
    <!-- 以上平台，支持wxs -->
    <scroll-view
        class="u-scroll-list__scroll-view"
        scroll-x
        @scroll="wxs.scroll"
        @scrolltoupper="wxs.scrolltoupper"
        @scrolltolower="wxs.scrolltolower"
        :data-scrollWidth="scrollWidth"
        :data-barWidth="$u.getPx(indicatorBarWidth)"
        :data-indicatorWidth="$u.getPx(indicatorWidth)"
        :show-scrollbar="false"
        :upper-threshold="0"
        :lower-threshold="0"
    >
      <!-- #endif -->
      <!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
      <!-- 非以上平台，只能使用普通js实现 -->
      <scroll-view
          class="u-scroll-list__scroll-view"
          scroll-x
          @scroll="scrollHandler"
          @scrolltoupper="scrolltoupperHandler"
          @scrolltolower="scrolltolowerHandler"
          :show-scrollbar="false"
          :upper-threshold="0"
          :lower-threshold="0"
      >
        <!-- #endif -->
        <view class="u-scroll-list__scroll-view__content">
          <slot/>
        </view>
      </scroll-view>
      <!-- #endif -->
      <view
          class="u-scroll-list__indicator"
          v-if="indicator"
          :style="[$u.addStyle(indicatorStyle)]"
      >
        <view
            class="u-scroll-list__indicator__line"
            :style="[lineStyle]"
        >
          <view
              class="u-scroll-list__indicator__line__bar"
              :style="[barStyle]"
              ref="u-scroll-list__indicator__line__bar"
          ></view>
        </view>
      </view>
  </view>
</template>

<!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
<script
    src="./scrollWxs.wxs"
    module="wxs"
    lang="wxs"
></script>
<!-- #endif -->

<script>
/**
 * scrollList 横向滚动列表
 * @description 该组件一般用于同时展示多个商品、分类的场景，也可以完成左右滑动的列表。
 * @tutorial https://www.uviewui.com/components/scrollList.html
 * @property {String | Number}  indicatorWidth      指示器的整体宽度 (默认 50 )
 * @property {String | Number}  indicatorBarWidth    滑块的宽度 (默认 20 )
 * @property {Boolean}      indicator        是否显示面板指示器 (默认 true )
 * @property {String}      indicatorColor      指示器非激活颜色 (默认 '#f2f2f2' )
 * @property {String}      indicatorActiveColor  指示器的激活颜色 (默认 '#3c9cff' )
 * @property {String | Object}  indicatorStyle      指示器样式，可通过bottom，left，right进行定位
 * @event {Function} left  滑动到左边时触发
 * @event {Function} right  滑动到右边时触发
 * @example
 */
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
import nvueMixin from "./nvue.js"
// #endif
import props from './props.js';

export default {
  name: 'u-scroll-list',
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  // #ifdef APP-NVUE
  mixins: [uni.$u.mpMixin, uni.$u.mixin, nvueMixin, props],
  // #endif
  data() {
    return {
      scrollInfo: {
        scrollLeft: 0,
        scrollWidth: 0
      },
      scrollWidth: 0
    }
  },
  computed: {
    // 指示器为线型的样式
    barStyle() {
      const style = {}
      // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
      // 此为普通js方案，只有在非nvue和不支持wxs方案的端才使用、
      // 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
      // 滑动距离(指示器的总宽度减去滑块宽度)的比值
      const scrollLeft = this.scrollInfo.scrollLeft,
          scrollWidth = this.scrollInfo.scrollWidth,
          barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
      const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
      style.transform = `translateX(${x}px)`
      // #endif
      // 设置滑块的宽度和背景色，是每个平台都需要的
      style.width = uni.$u.addUnit(this.indicatorBarWidth)
      style.backgroundColor = this.indicatorActiveColor
      return style
    },
    lineStyle() {
      const style = {}
      // 指示器整体的样式，需要设置其宽度和背景色
      style.width = uni.$u.addUnit(this.indicatorWidth)
      style.backgroundColor = this.indicatorColor
      return style
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getComponentWidth()
    },
    // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
    // scroll-view触发滚动事件
    scrollHandler(e) {
      this.scrollInfo = e.detail
    },
    scrolltoupperHandler() {
      this.scrollEvent('left')
      this.scrollInfo.scrollLeft = 0
    },
    scrolltolowerHandler() {
      this.scrollEvent('right')
      // 在普通js方案中，滚动到右边时，通过设置this.scrollInfo，模拟出滚动到右边的情况
      // 因为上方是用过computed计算的，设置后，会自动调整滑块的位置
      this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
    },
    // #endif
    //
    scrollEvent(status) {
      this.$emit(status)
    },
    // 获取组件的宽度
    async getComponentWidth() {
      // 延时一定时间，以获取dom尺寸
      await uni.$u.sleep(30)
      // #ifndef APP-NVUE
      this.$uGetRect('.u-scroll-list').then(size => {
        this.scrollWidth = size.width
      })
      // #endif

      // #ifdef APP-NVUE
      const ref = this.$refs['u-scroll-list']
      ref && dom.getComponentRect(ref, (res) => {
        this.scrollWidth = res.size.width
      })
      // #endif
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-scroll-list {
  padding-bottom: 10px;

  &__scroll-view {
    @include flex;

    &__content {
      @include flex;
    }
  }

  &__indicator {
    @include flex;
    justify-content: center;
    margin-top: 15px;

    &__line {
      width: 60px;
      height: 4px;
      border-radius: 100px;
      overflow: hidden;

      &__bar {
        width: 20px;
        height: 4px;
        border-radius: 100px;
      }
    }
  }
}
</style>