選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

u-swiper.vue 9.0 KiB

3年前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <view class="u-swiper-wrap" :style="{
  3. borderRadius: `${borderRadius}rpx`
  4. }">
  5. <swiper @change="change" @animationfinish="animationfinish" :interval="interval" :circular="circular" :duration="duration" :autoplay="autoplay"
  6. :previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" :next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
  7. :style="{
  8. height: height + 'rpx'
  9. }">
  10. <swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
  11. <view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[current != index ? 'u-list-scale' : '']" :style="{
  12. borderRadius: `${borderRadius}rpx`,
  13. transform: effect3d && current != index ? 'scaleY(0.9)' : 'scaleY(1)',
  14. margin: effect3d && current != index ? '0 20rpx' : 0,
  15. backgroundColor: bgColor
  16. }">
  17. <image class="u-swiper-image" :src="item[name]" :mode="imgMode"></image>
  18. <view v-if="title" class="u-swiper-title u-line-1" :style="{
  19. 'padding-bottom': titlePaddingBottom
  20. }">
  21. {{ item.title }}
  22. </view>
  23. </view>
  24. </swiper-item>
  25. </swiper>
  26. <view class="u-swiper-indicator" :style="{
  27. top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
  28. bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
  29. justifyContent: justifyContent,
  30. padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
  31. }">
  32. <block v-if="mode == 'rect'">
  33. <view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index == current }" v-for="(item, index) in list"
  34. :key="index"></view>
  35. </block>
  36. <block v-if="mode == 'dot'">
  37. <view class="u-indicator-item-dot" :class="{ 'u-indicator-item-dot-active': index == current }" v-for="(item, index) in list"
  38. :key="index"></view>
  39. </block>
  40. <block v-if="mode == 'round'">
  41. <view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index == current }" v-for="(item, index) in list"
  42. :key="index"></view>
  43. </block>
  44. <block v-if="mode == 'number'">
  45. <view class="u-indicator-item-number">{{ current + 1 }}/{{ list.length }}</view>
  46. </block>
  47. </view>
  48. </view>
  49. </template>
  50. <script>
  51. /**
  52. * swiper 轮播图
  53. * @description 该组件一般用于导航轮播,广告展示等场景,可开箱即用
  54. * @tutorial https://www.uviewui.com/components/swiper.html
  55. * @property {Array} list 轮播图数据,见官网"基本使用"说明
  56. * @property {Boolean} title 是否显示标题文字,需要配合list参数,见官网说明(默认false)
  57. * @property {String} mode 指示器模式,见官网说明(默认round)
  58. * @property {String Number} height 轮播图组件高度,单位rpx(默认250)
  59. * @property {String} indicator-pos 指示器的位置(默认bottomCenter)
  60. * @property {Boolean} effect3d 是否开启3D效果(默认false)
  61. * @property {Boolean} autoplay 是否自动播放(默认true)
  62. * @property {String Number} interval 自动轮播时间间隔,单位ms(默认2500)
  63. * @property {Boolean} circular 是否衔接播放,见官网说明(默认true)
  64. * @property {String} bg-color 背景颜色(默认#f3f4f6)
  65. * @property {String Number} border-radius 轮播图圆角值,单位rpx(默认8)
  66. * @property {Object} title-style 自定义标题样式
  67. * @property {String Number} effect3d-previous-margin mode = true模式的情况下,激活项与前后项之间的距离,单位rpx(默认50)
  68. * @property {String} img-mode 图片的裁剪模式,详见image组件裁剪模式(默认aspectFill)
  69. * @event {Function} click 点击轮播图时触发
  70. * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
  71. */
  72. export default {
  73. name: "u-swiper",
  74. props: {
  75. // 轮播图的数据,格式如:[{image: 'xxxx', title: 'xxxx'},{image: 'yyyy', title: 'yyyy'}],其中title字段可选
  76. list: {
  77. type: Array,
  78. default () {
  79. return [];
  80. }
  81. },
  82. // 是否显示title标题
  83. title: {
  84. type: Boolean,
  85. default: false
  86. },
  87. // 用户自定义的指示器的样式
  88. indicator: {
  89. type: Object,
  90. default () {
  91. return {};
  92. }
  93. },
  94. // 圆角值
  95. borderRadius: {
  96. type: [Number, String],
  97. default: 8
  98. },
  99. // 隔多久自动切换
  100. interval: {
  101. type: [String, Number],
  102. default: 3000
  103. },
  104. // 指示器的模式,rect|dot|number|round
  105. mode: {
  106. type: String,
  107. default: 'round'
  108. },
  109. // list的高度,单位rpx
  110. height: {
  111. type: [Number, String],
  112. default: 250
  113. },
  114. // 指示器的位置,topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
  115. indicatorPos: {
  116. type: String,
  117. default: 'bottomCenter'
  118. },
  119. // 是否开启缩放效果
  120. effect3d: {
  121. type: Boolean,
  122. default: false
  123. },
  124. // 3D模式的情况下,激活item与前后item之间的距离,单位rpx
  125. effect3dPreviousMargin: {
  126. type: [Number, String],
  127. default: 50
  128. },
  129. // 是否自动播放
  130. autoplay: {
  131. type: Boolean,
  132. default: true
  133. },
  134. // 自动轮播时间间隔,单位ms
  135. duration: {
  136. type: [Number, String],
  137. default: 500
  138. },
  139. // 是否衔接滑动,即到最后一张时接着滑动,是否自动切换到第一张
  140. circular: {
  141. type: Boolean,
  142. default: true
  143. },
  144. // 图片的裁剪模式
  145. imgMode: {
  146. type: String,
  147. default: 'aspectFill'
  148. },
  149. // 从list数组中读取的图片的属性名
  150. name: {
  151. type: String,
  152. default: 'image'
  153. },
  154. // 背景颜色
  155. bgColor: {
  156. type: String,
  157. default: '#f3f4f6'
  158. }
  159. },
  160. watch: {
  161. // 如果外部的list发生变化,判断长度是否被修改,如果前后长度不一致,重置current值,避免溢出
  162. list(nVal, oVal) {
  163. if(nVal.length !== oVal.length) this.current = 0;
  164. }
  165. },
  166. data() {
  167. return {
  168. current: 0 // 当前活跃的swiper-item的index
  169. };
  170. },
  171. computed: {
  172. justifyContent() {
  173. if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
  174. if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
  175. if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
  176. },
  177. titlePaddingBottom() {
  178. let tmp = 0;
  179. if (this.mode == 'none') return '12rpx';
  180. if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
  181. tmp = '60rpx';
  182. } else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
  183. tmp = '40rpx';
  184. } else {
  185. tmp = '12rpx';
  186. }
  187. return tmp;
  188. }
  189. },
  190. methods: {
  191. listClick(index) {
  192. this.$emit('click', index);
  193. },
  194. change(e) {
  195. let current = e.detail.current;
  196. this.current = current;
  197. // 发出change事件,表示当前自动切换的index,从0开始
  198. this.$emit('change', current);
  199. },
  200. // 头条小程序不支持animationfinish事件,改由change事件
  201. // 暂不监听此事件,因为不再给swiper绑定current属性
  202. animationfinish(e) {
  203. // #ifndef MP-TOUTIAO
  204. // this.current = e.detail.current;
  205. // #endif
  206. }
  207. }
  208. };
  209. </script>
  210. <style lang="scss" scoped>
  211. @import "../../libs/css/style.components.scss";
  212. .u-swiper-wrap {
  213. position: relative;
  214. overflow: hidden;
  215. transform: translateY(0);
  216. }
  217. .u-swiper-image {
  218. width: 100%;
  219. will-change: transform;
  220. height: 100%;
  221. display: block;
  222. /* #ifdef H5 */
  223. pointer-events: none;
  224. /* #endif */
  225. }
  226. .u-swiper-indicator {
  227. padding: 0 24rpx;
  228. position: absolute;
  229. display: flex;
  230. width: 100%;
  231. z-index: 1;
  232. }
  233. .u-indicator-item-rect {
  234. width: 26rpx;
  235. height: 8rpx;
  236. margin: 0 6rpx;
  237. transition: all 0.5s;
  238. background-color: rgba(0, 0, 0, 0.3);
  239. }
  240. .u-indicator-item-rect-active {
  241. background-color: rgba(255, 255, 255, 0.8);
  242. }
  243. .u-indicator-item-dot {
  244. width: 14rpx;
  245. height: 14rpx;
  246. margin: 0 6rpx;
  247. border-radius: 20rpx;
  248. transition: all 0.5s;
  249. background-color: rgba(0, 0, 0, 0.3);
  250. }
  251. .u-indicator-item-dot-active {
  252. background-color: rgba(255, 255, 255, 0.8);
  253. }
  254. .u-indicator-item-round {
  255. width: 14rpx;
  256. height: 14rpx;
  257. margin: 0 6rpx;
  258. border-radius: 20rpx;
  259. transition: all 0.5s;
  260. background-color: rgba(0, 0, 0, 0.3);
  261. }
  262. .u-indicator-item-round-active {
  263. width: 34rpx;
  264. background-color: rgba(255, 255, 255, 0.8);
  265. }
  266. .u-indicator-item-number {
  267. padding: 6rpx 16rpx;
  268. line-height: 1;
  269. background-color: rgba(0, 0, 0, 0.3);
  270. border-radius: 100rpx;
  271. font-size: 26rpx;
  272. color: rgba(255, 255, 255, 0.8);
  273. }
  274. .u-list-scale {
  275. transform-origin: center center;
  276. }
  277. .u-list-image-wrap {
  278. width: 100%;
  279. height: 100%;
  280. flex: 1;
  281. transition: all 0.5s;
  282. overflow: hidden;
  283. box-sizing: content-box;
  284. position: relative;
  285. }
  286. .u-swiper-title {
  287. position: absolute;
  288. background-color: rgba(0, 0, 0, 0.3);
  289. bottom: 0;
  290. left: 0;
  291. width: 100%;
  292. font-size: 28rpx;
  293. padding: 12rpx 24rpx;
  294. color: rgba(255, 255, 255, 0.9);
  295. }
  296. .u-swiper-item {
  297. display: flex;
  298. overflow: hidden;
  299. align-items: center;
  300. }
  301. </style>