u-swiper.vue 9.0 KB

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