学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

224 lines
6.0 KiB

1 year ago
  1. <template>
  2. <view
  3. class="u-scroll-list"
  4. ref="u-scroll-list"
  5. >
  6. <!-- #ifdef APP-NVUE -->
  7. <!-- nvue使用bindingX实现以得到更好的性能 -->
  8. <scroller
  9. class="u-scroll-list__scroll-view"
  10. ref="u-scroll-list__scroll-view"
  11. scroll-direction="horizontal"
  12. :show-scrollbar="false"
  13. :offset-accuracy="1"
  14. @scroll="nvueScrollHandler"
  15. >
  16. <view class="u-scroll-list__scroll-view__content">
  17. <slot />
  18. </view>
  19. </scroller>
  20. <!-- #endif -->
  21. <!-- #ifndef APP-NVUE -->
  22. <!-- #ifdef MP-WEIXIN || APP-VUE || H5 || MP-QQ -->
  23. <!-- 以上平台支持wxs -->
  24. <scroll-view
  25. class="u-scroll-list__scroll-view"
  26. scroll-x
  27. @scroll="wxs.scroll"
  28. @scrolltoupper="wxs.scrolltoupper"
  29. @scrolltolower="wxs.scrolltolower"
  30. :data-scrollWidth="scrollWidth"
  31. :data-barWidth="$u.getPx(indicatorBarWidth)"
  32. :data-indicatorWidth="$u.getPx(indicatorWidth)"
  33. :show-scrollbar="false"
  34. :upper-threshold="0"
  35. :lower-threshold="0"
  36. >
  37. <!-- #endif -->
  38. <!-- #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ -->
  39. <!-- 非以上平台只能使用普通js实现 -->
  40. <scroll-view
  41. class="u-scroll-list__scroll-view"
  42. scroll-x
  43. @scroll="scrollHandler"
  44. @scrolltoupper="scrolltoupperHandler"
  45. @scrolltolower="scrolltolowerHandler"
  46. :show-scrollbar="false"
  47. :upper-threshold="0"
  48. :lower-threshold="0"
  49. >
  50. <!-- #endif -->
  51. <view class="u-scroll-list__scroll-view__content">
  52. <slot />
  53. </view>
  54. </scroll-view>
  55. <!-- #endif -->
  56. <view
  57. class="u-scroll-list__indicator"
  58. v-if="indicator"
  59. :style="[$u.addStyle(indicatorStyle)]"
  60. >
  61. <view
  62. class="u-scroll-list__indicator__line"
  63. :style="[lineStyle]"
  64. >
  65. <view
  66. class="u-scroll-list__indicator__line__bar"
  67. :style="[barStyle]"
  68. ref="u-scroll-list__indicator__line__bar"
  69. ></view>
  70. </view>
  71. </view>
  72. </view>
  73. </template>
  74. <script
  75. src="./scrollWxs.wxs"
  76. module="wxs"
  77. lang="wxs"
  78. ></script>
  79. <script>
  80. /**
  81. * scrollList 横向滚动列表
  82. * @description 该组件一般用于同时展示多个商品分类的场景也可以完成左右滑动的列表
  83. * @tutorial https://www.uviewui.com/components/scrollList.html
  84. * @property {String | Number} indicatorWidth 指示器的整体宽度 (默认 50 )
  85. * @property {String | Number} indicatorBarWidth 滑块的宽度 (默认 20 )
  86. * @property {Boolean} indicator 是否显示面板指示器 (默认 true )
  87. * @property {String} indicatorColor 指示器非激活颜色 (默认 '#f2f2f2' )
  88. * @property {String} indicatorActiveColor 指示器的激活颜色 (默认 '#3c9cff' )
  89. * @property {String | Object} indicatorStyle 指示器样式可通过bottomleftright进行定位
  90. * @event {Function} left 滑动到左边时触发
  91. * @event {Function} right 滑动到右边时触发
  92. * @example
  93. */
  94. // #ifdef APP-NVUE
  95. const dom = uni.requireNativePlugin('dom')
  96. import nvueMixin from "./nvue.js"
  97. // #endif
  98. import props from './props.js';
  99. export default {
  100. name: 'u-scroll-list',
  101. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  102. // #ifdef APP-NVUE
  103. mixins: [uni.$u.mpMixin, uni.$u.mixin, nvueMixin, props],
  104. // #endif
  105. data() {
  106. return {
  107. scrollInfo: {
  108. scrollLeft: 0,
  109. scrollWidth: 0
  110. },
  111. scrollWidth: 0
  112. }
  113. },
  114. computed: {
  115. // 指示器为线型的样式
  116. barStyle() {
  117. const style = {}
  118. // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
  119. // 此为普通js方案,只有在非nvue和不支持wxs方案的端才使用、
  120. // 此处的计算理由为:scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比,等于滑块当前移动距离与总需
  121. // 滑动距离(指示器的总宽度减去滑块宽度)的比值
  122. const scrollLeft = this.scrollInfo.scrollLeft,
  123. scrollWidth = this.scrollInfo.scrollWidth,
  124. barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
  125. const x = scrollLeft / (scrollWidth - this.scrollWidth) * barAllMoveWidth
  126. style.transform = `translateX(${ x }px)`
  127. // #endif
  128. // 设置滑块的宽度和背景色,是每个平台都需要的
  129. style.width = uni.$u.addUnit(this.indicatorBarWidth)
  130. style.backgroundColor = this.indicatorActiveColor
  131. return style
  132. },
  133. lineStyle() {
  134. const style = {}
  135. // 指示器整体的样式,需要设置其宽度和背景色
  136. style.width = uni.$u.addUnit(this.indicatorWidth)
  137. style.backgroundColor = this.indicatorColor
  138. return style
  139. }
  140. },
  141. mounted() {
  142. this.init()
  143. },
  144. methods: {
  145. init() {
  146. this.getComponentWidth()
  147. },
  148. // #ifndef APP-NVUE || MP-WEIXIN || H5 || APP-VUE || MP-QQ
  149. // scroll-view触发滚动事件
  150. scrollHandler(e) {
  151. this.scrollInfo = e.detail
  152. },
  153. scrolltoupperHandler() {
  154. this.scrollEvent('left')
  155. this.scrollInfo.scrollLeft = 0
  156. },
  157. scrolltolowerHandler() {
  158. this.scrollEvent('right')
  159. // 在普通js方案中,滚动到右边时,通过设置this.scrollInfo,模拟出滚动到右边的情况
  160. // 因为上方是用过computed计算的,设置后,会自动调整滑块的位置
  161. this.scrollInfo.scrollLeft = uni.$u.getPx(this.indicatorWidth) - uni.$u.getPx(this.indicatorBarWidth)
  162. },
  163. // #endif
  164. //
  165. scrollEvent(status) {
  166. this.$emit(status)
  167. },
  168. // 获取组件的宽度
  169. async getComponentWidth() {
  170. // 延时一定时间,以获取dom尺寸
  171. await uni.$u.sleep(30)
  172. // #ifndef APP-NVUE
  173. this.$uGetRect('.u-scroll-list').then(size => {
  174. this.scrollWidth = size.width
  175. })
  176. // #endif
  177. // #ifdef APP-NVUE
  178. const ref = this.$refs['u-scroll-list']
  179. ref && dom.getComponentRect(ref, (res) => {
  180. this.scrollWidth = res.size.width
  181. })
  182. // #endif
  183. },
  184. }
  185. }
  186. </script>
  187. <style lang="scss" scoped>
  188. @import "../../libs/css/components.scss";
  189. .u-scroll-list {
  190. padding-bottom: 10px;
  191. &__scroll-view {
  192. @include flex;
  193. &__content {
  194. @include flex;
  195. }
  196. }
  197. &__indicator {
  198. @include flex;
  199. justify-content: center;
  200. margin-top: 15px;
  201. &__line {
  202. width: 60px;
  203. height: 4px;
  204. border-radius: 100px;
  205. overflow: hidden;
  206. &__bar {
  207. width: 20px;
  208. height: 4px;
  209. border-radius: 100px;
  210. }
  211. }
  212. }
  213. }
  214. </style>