u-swiper.vue 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246
  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="$u.test.image(getSource(item))"
  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="$u.test.video(getSource(item))"
  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 指示器样式,可通过bottom,left,right进行定位
  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. // 获取目标路径,可能数组中为字符串,对象的形式,额外可指定对象的目标属性名keyName
  157. getSource(item) {
  158. if (typeof item === 'string') return item
  159. if (typeof item === 'object' && this.keyName) return item[this.keyName]
  160. else uni.$u.error('请按格式传递列表参数')
  161. return ''
  162. },
  163. // 轮播切换事件
  164. change(e) {
  165. // 当前的激活索引
  166. const {
  167. current
  168. } = e.detail
  169. this.pauseVideo(this.currentIndex)
  170. this.currentIndex = current
  171. this.$emit('change', e.detail)
  172. },
  173. // 切换轮播时,暂停视频播放
  174. pauseVideo(index) {
  175. const lastItem = this.getSource(this.list[index])
  176. if (uni.$u.test.video(lastItem)) {
  177. // 当视频隐藏时,暂停播放
  178. const video = uni.createVideoContext(`video-${index}`, this)
  179. video.pause()
  180. }
  181. },
  182. // 当一个轮播item为视频时,获取它的视频海报
  183. getPoster(item) {
  184. return typeof item === 'object' && item.poster ? item.poster : ''
  185. },
  186. // 点击某个item
  187. clickHandler(index) {
  188. this.$emit('click', index)
  189. }
  190. },
  191. }
  192. </script>
  193. <style lang="scss" scoped>
  194. @import "../../libs/css/components.scss";
  195. .u-swiper {
  196. @include flex;
  197. justify-content: center;
  198. align-items: center;
  199. position: relative;
  200. overflow: hidden;
  201. &__wrapper {
  202. flex: 1;
  203. &__item {
  204. flex: 1;
  205. &__wrapper {
  206. @include flex;
  207. position: relative;
  208. overflow: hidden;
  209. transition: transform 0.3s;
  210. flex: 1;
  211. &__image {
  212. flex: 1;
  213. }
  214. &__video {
  215. flex: 1;
  216. }
  217. &__title {
  218. position: absolute;
  219. background-color: rgba(0, 0, 0, 0.3);
  220. bottom: 0;
  221. left: 0;
  222. right: 0;
  223. font-size: 28rpx;
  224. padding: 12rpx 24rpx;
  225. color: #FFFFFF;
  226. flex: 1;
  227. }
  228. }
  229. }
  230. }
  231. &__indicator {
  232. position: absolute;
  233. bottom: 10px;
  234. }
  235. }
  236. </style>