AI销管
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

341 lines
9.7 KiB

  1. <template>
  2. <view class="u-swiper-wrap" :style="{
  3. borderRadius: `${borderRadius}rpx`
  4. }">
  5. <swiper :current="elCurrent" @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. backgroundColor: bgColor
  10. }">
  11. <swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
  12. <view class="u-list-image-wrap" @tap.stop.prevent="listClick(index)" :class="[uCurrent != index ? 'u-list-scale' : '']" :style="{
  13. borderRadius: `${borderRadius}rpx`,
  14. transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
  15. margin: effect3d && uCurrent != index ? '0 20rpx' : 0,
  16. }">
  17. <image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
  18. <view v-if="title && item.title" class="u-swiper-title u-line-1" :style="[{
  19. 'padding-bottom': titlePaddingBottom
  20. }, titleStyle]">
  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 == uCurrent }" 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 == uCurrent }" 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 == uCurrent }" 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">{{ uCurrent + 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. current: {
  161. type: [Number, String],
  162. default: 0
  163. },
  164. // 标题的样式,对象形式
  165. titleStyle: {
  166. type: Object,
  167. default() {
  168. return {}
  169. }
  170. }
  171. },
  172. watch: {
  173. // 如果外部的list发生变化,判断长度是否被修改,如果前后长度不一致,重置uCurrent值,避免溢出
  174. list(nVal, oVal) {
  175. if(nVal.length !== oVal.length) this.uCurrent = 0;
  176. },
  177. // 监听外部current的变化,实时修改内部依赖于此测uCurrent值,如果更新了current,而不是更新uCurrent,
  178. // 就会错乱,因为指示器是依赖于uCurrent的
  179. current(n) {
  180. this.uCurrent = n;
  181. }
  182. },
  183. data() {
  184. return {
  185. uCurrent: this.current // 当前活跃的swiper-item的index
  186. };
  187. },
  188. computed: {
  189. justifyContent() {
  190. if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
  191. if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
  192. if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
  193. },
  194. titlePaddingBottom() {
  195. let tmp = 0;
  196. if (this.mode == 'none') return '12rpx';
  197. if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
  198. tmp = '60rpx';
  199. } else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
  200. tmp = '40rpx';
  201. } else {
  202. tmp = '12rpx';
  203. }
  204. return tmp;
  205. },
  206. // 因为uni的swiper组件的current参数只接受Number类型,这里做一个转换
  207. elCurrent() {
  208. return Number(this.current);
  209. }
  210. },
  211. methods: {
  212. listClick(index) {
  213. this.$emit('click', index);
  214. },
  215. change(e) {
  216. let current = e.detail.current;
  217. this.uCurrent = current;
  218. // 发出change事件,表示当前自动切换的index,从0开始
  219. this.$emit('change', current);
  220. },
  221. // 头条小程序不支持animationfinish事件,改由change事件
  222. // 暂不监听此事件,因为不再给swiper绑定uCurrent属性
  223. animationfinish(e) {
  224. // #ifndef MP-TOUTIAO
  225. // this.uCurrent = e.detail.current;
  226. // #endif
  227. }
  228. }
  229. };
  230. </script>
  231. <style lang="scss" scoped>
  232. @import "../../libs/css/style.components.scss";
  233. .u-swiper-wrap {
  234. position: relative;
  235. overflow: hidden;
  236. transform: translateY(0);
  237. }
  238. .u-swiper-image {
  239. width: 100%;
  240. will-change: transform;
  241. height: 100%;
  242. /* #ifndef APP-NVUE */
  243. display: block;
  244. /* #endif */
  245. /* #ifdef H5 */
  246. pointer-events: none;
  247. /* #endif */
  248. }
  249. .u-swiper-indicator {
  250. padding: 0 24rpx;
  251. position: absolute;
  252. @include vue-flex;
  253. width: 100%;
  254. z-index: 1;
  255. }
  256. .u-indicator-item-rect {
  257. width: 26rpx;
  258. height: 8rpx;
  259. margin: 0 6rpx;
  260. transition: all 0.5s;
  261. background-color: rgba(0, 0, 0, 0.3);
  262. }
  263. .u-indicator-item-rect-active {
  264. background-color: rgba(255, 255, 255, 0.8);
  265. }
  266. .u-indicator-item-dot {
  267. width: 14rpx;
  268. height: 14rpx;
  269. margin: 0 6rpx;
  270. border-radius: 20rpx;
  271. transition: all 0.5s;
  272. background-color: rgba(0, 0, 0, 0.3);
  273. }
  274. .u-indicator-item-dot-active {
  275. background-color: rgba(255, 255, 255, 0.8);
  276. }
  277. .u-indicator-item-round {
  278. width: 14rpx;
  279. height: 14rpx;
  280. margin: 0 6rpx;
  281. border-radius: 20rpx;
  282. transition: all 0.5s;
  283. background-color: rgba(0, 0, 0, 0.3);
  284. }
  285. .u-indicator-item-round-active {
  286. width: 34rpx;
  287. background-color: rgba(255, 255, 255, 0.8);
  288. }
  289. .u-indicator-item-number {
  290. padding: 6rpx 16rpx;
  291. line-height: 1;
  292. background-color: rgba(0, 0, 0, 0.3);
  293. border-radius: 100rpx;
  294. font-size: 26rpx;
  295. color: rgba(255, 255, 255, 0.8);
  296. }
  297. .u-list-scale {
  298. transform-origin: center center;
  299. }
  300. .u-list-image-wrap {
  301. width: 100%;
  302. height: 100%;
  303. flex: 1;
  304. transition: all 0.5s;
  305. overflow: hidden;
  306. box-sizing: content-box;
  307. position: relative;
  308. }
  309. .u-swiper-title {
  310. position: absolute;
  311. background-color: rgba(0, 0, 0, 0.3);
  312. bottom: 0;
  313. left: 0;
  314. width: 100%;
  315. font-size: 28rpx;
  316. padding: 12rpx 24rpx;
  317. color: rgba(255, 255, 255, 0.9);
  318. }
  319. .u-swiper-item {
  320. @include vue-flex;
  321. overflow: hidden;
  322. align-items: center;
  323. }
  324. </style>