江西小程序管理端
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.

255 lines
8.4 KiB

1 year ago
  1. <template>
  2. <view
  3. class="u-swiper"
  4. :style="{
  5. backgroundColor: bgColor,
  6. height: $u.addUnit(height),
  7. borderRadius: $u.addUnit(radius)
  8. }"
  9. >
  10. <view
  11. class="u-swiper__loading"
  12. v-if="loading"
  13. >
  14. <u-loading-icon mode="circle"></u-loading-icon>
  15. </view>
  16. <swiper
  17. v-else
  18. class="u-swiper__wrapper"
  19. :style="{
  20. height: $u.addUnit(height),
  21. }"
  22. @change="change"
  23. :circular="circular"
  24. :interval="interval"
  25. :duration="duration"
  26. :autoplay="autoplay"
  27. :current="current"
  28. :currentItemId="currentItemId"
  29. :previousMargin="$u.addUnit(previousMargin)"
  30. :nextMargin="$u.addUnit(nextMargin)"
  31. :acceleration="acceleration"
  32. :displayMultipleItems="displayMultipleItems"
  33. :easingFunction="easingFunction"
  34. >
  35. <swiper-item
  36. class="u-swiper__wrapper__item"
  37. v-for="(item, index) in list"
  38. :key="index"
  39. >
  40. <view
  41. class="u-swiper__wrapper__item__wrapper"
  42. :style="[itemStyle(index)]"
  43. >
  44. <!-- 在nvue中image图片的宽度默认为屏幕宽度需要通过flex:1撑开另外必须设置高度才能显示图片 -->
  45. <image
  46. class="u-swiper__wrapper__item__wrapper__image"
  47. v-if="getItemType(item) === 'image'"
  48. :src="getSource(item)"
  49. :mode="imgMode"
  50. @tap="clickHandler(index)"
  51. :style="{
  52. height: $u.addUnit(height),
  53. borderRadius: $u.addUnit(radius)
  54. }"
  55. ></image>
  56. <video
  57. class="u-swiper__wrapper__item__wrapper__video"
  58. v-if="getItemType(item) === 'video'"
  59. :id="`video-${index}`"
  60. :enable-progress-gesture="false"
  61. :src="getSource(item)"
  62. :poster="getPoster(item)"
  63. :title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
  64. :style="{
  65. height: $u.addUnit(height)
  66. }"
  67. controls
  68. @tap="clickHandler(index)"
  69. ></video>
  70. <text
  71. v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
  72. class="u-swiper__wrapper__item__wrapper__title u-line-1"
  73. >{{ item.title }}</text>
  74. </view>
  75. </swiper-item>
  76. </swiper>
  77. <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
  78. <slot name="indicator">
  79. <u-swiper-indicator
  80. v-if="!loading && indicator && !showTitle"
  81. :indicatorActiveColor="indicatorActiveColor"
  82. :indicatorInactiveColor="indicatorInactiveColor"
  83. :length="list.length"
  84. :current="currentIndex"
  85. :indicatorMode="indicatorMode"
  86. ></u-swiper-indicator>
  87. </slot>
  88. </view>
  89. </view>
  90. </template>
  91. <script>
  92. import props from './props.js';
  93. /**
  94. * Swiper 轮播图
  95. * @description 该组件一般用于导航轮播广告展示等场景,可开箱即用
  96. * @tutorial https://www.uviewui.com/components/swiper.html
  97. * @property {Array} list 轮播图数据
  98. * @property {Boolean} indicator 是否显示面板指示器默认 false
  99. * @property {String} indicatorActiveColor 指示器非激活颜色默认 '#FFFFFF'
  100. * @property {String} indicatorInactiveColor 指示器的激活颜色默认 'rgba(255, 255, 255, 0.35)'
  101. * @property {String | Object} indicatorStyle 指示器样式可通过bottomleftright进行定位
  102. * @property {String} indicatorMode 指示器模式默认 'line'
  103. * @property {Boolean} autoplay 是否自动切换默认 true
  104. * @property {String | Number} current 当前所在滑块的 index默认 0
  105. * @property {String} currentItemId 当前所在滑块的 item-id 不能与 current 被同时指定
  106. * @property {String | Number} interval 滑块自动切换时间间隔ms默认 3000
  107. * @property {String | Number} duration 滑块切换过程所需时间ms默认 300
  108. * @property {Boolean} circular 播放到末尾后是否重新回到开头默认 false
  109. * @property {String | Number} previousMargin 前边距可用于露出前一项的一小部分nvue和支付宝不支持默认 0
  110. * @property {String | Number} nextMargin 后边距可用于露出后一项的一小部分nvue和支付宝不支持默认 0
  111. * @property {Boolean} acceleration 当开启时会根据滑动速度连续滑动多屏支付宝不支持默认 false
  112. * @property {Number} displayMultipleItems 同时显示的滑块数量nvue支付宝小程序不支持默认 1
  113. * @property {String} easingFunction 指定swiper切换缓动动画类型 只对微信小程序有效默认 'default'
  114. * @property {String} keyName list数组中指定对象的目标属性名默认 'url'
  115. * @property {String} imgMode 图片的裁剪模式默认 'aspectFill'
  116. * @property {String | Number} height 组件高度默认 130
  117. * @property {String} bgColor 背景颜色默认 '#f3f4f6'
  118. * @property {String | Number} radius 组件圆角数值或带单位的字符串默认 4
  119. * @property {Boolean} loading 是否加载中默认 false
  120. * @property {Boolean} showTitle 是否显示标题要求数组对象中有title属性默认 false
  121. * @event {Function(index)} click 点击轮播图时触发 index点击了第几张图片从0开始
  122. * @event {Function(index)} change 轮播图切换时触发(自动或者手动切换) index切换到了第几张图片从0开始
  123. * @example <u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
  124. */
  125. export default {
  126. name: 'u-swiper',
  127. mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  128. data() {
  129. return {
  130. currentIndex: 0
  131. }
  132. },
  133. watch: {
  134. current(val, preVal) {
  135. if(val === preVal) return;
  136. this.currentIndex = val; // 和上游数据关联上
  137. }
  138. },
  139. computed: {
  140. itemStyle() {
  141. return index => {
  142. const style = {}
  143. // #ifndef APP-NVUE || MP-TOUTIAO
  144. // 左右流出空间的写法不支持nvue和头条
  145. // 只有配置了此二值,才加上对应的圆角,以及缩放
  146. if (this.nextMargin && this.previousMargin) {
  147. style.borderRadius = uni.$u.addUnit(this.radius)
  148. if (index !== this.currentIndex) style.transform = 'scale(0.92)'
  149. }
  150. // #endif
  151. return style
  152. }
  153. }
  154. },
  155. methods: {
  156. getItemType(item) {
  157. if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
  158. if (typeof item === 'object' && this.keyName) {
  159. if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
  160. if (item.type === 'image') return 'image'
  161. if (item.type === 'video') return 'video'
  162. return 'image'
  163. }
  164. },
  165. // 获取目标路径,可能数组中为字符串,对象的形式,额外可指定对象的目标属性名keyName
  166. getSource(item) {
  167. if (typeof item === 'string') return item
  168. if (typeof item === 'object' && this.keyName) return item[this.keyName]
  169. else uni.$u.error('请按格式传递列表参数')
  170. return ''
  171. },
  172. // 轮播切换事件
  173. change(e) {
  174. // 当前的激活索引
  175. const {
  176. current
  177. } = e.detail
  178. this.pauseVideo(this.currentIndex)
  179. this.currentIndex = current
  180. this.$emit('change', e.detail)
  181. },
  182. // 切换轮播时,暂停视频播放
  183. pauseVideo(index) {
  184. const lastItem = this.getSource(this.list[index])
  185. if (uni.$u.test.video(lastItem)) {
  186. // 当视频隐藏时,暂停播放
  187. const video = uni.createVideoContext(`video-${index}`, this)
  188. video.pause()
  189. }
  190. },
  191. // 当一个轮播item为视频时,获取它的视频海报
  192. getPoster(item) {
  193. return typeof item === 'object' && item.poster ? item.poster : ''
  194. },
  195. // 点击某个item
  196. clickHandler(index) {
  197. this.$emit('click', index)
  198. }
  199. },
  200. }
  201. </script>
  202. <style lang="scss" scoped>
  203. @import "../../libs/css/components.scss";
  204. .u-swiper {
  205. @include flex;
  206. justify-content: center;
  207. align-items: center;
  208. position: relative;
  209. overflow: hidden;
  210. &__wrapper {
  211. flex: 1;
  212. &__item {
  213. flex: 1;
  214. &__wrapper {
  215. @include flex;
  216. position: relative;
  217. overflow: hidden;
  218. transition: transform 0.3s;
  219. flex: 1;
  220. &__image {
  221. flex: 1;
  222. }
  223. &__video {
  224. flex: 1;
  225. }
  226. &__title {
  227. position: absolute;
  228. background-color: rgba(0, 0, 0, 0.3);
  229. bottom: 0;
  230. left: 0;
  231. right: 0;
  232. font-size: 28rpx;
  233. padding: 12rpx 24rpx;
  234. color: #FFFFFF;
  235. flex: 1;
  236. }
  237. }
  238. }
  239. }
  240. &__indicator {
  241. position: absolute;
  242. bottom: 10px;
  243. }
  244. }
  245. </style>