1 line
15 KiB
Plaintext
1 line
15 KiB
Plaintext
|
{"version":3,"file":"su-swiper.js","sources":["../../../../../../src/sheep/ui/su-swiper/su-swiper.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC91aS9zdS1zd2lwZXIvc3Utc3dpcGVyLnZ1ZQ"],"sourcesContent":["<template>\r\n <view>\r\n <view class=\"ui-swiper\" :class=\"[props.mode, props.bg, props.ui]\">\r\n <swiper\r\n :circular=\"props.circular\"\r\n :current=\"state.cur\"\r\n :autoplay=\"props.autoplay && !state.videoPlaySataus\"\r\n :interval=\"props.interval\"\r\n :duration=\"props.duration\"\r\n @transition=\"transition\"\r\n @animationfinish=\"animationfinish\"\r\n :style=\"customStyle\"\r\n @change=\"swiperChange\"\r\n >\r\n <swiper-item\r\n class=\"swiper-item\"\r\n v-for=\"(item, index) in props.list\"\r\n :key=\"index\"\r\n :class=\"{ cur: state.cur == index }\"\r\n @tap=\"onSwiperItem(item)\"\r\n >\r\n <view class=\"ui-swiper-main\">\r\n <image\r\n v-if=\"item.type === 'image'\"\r\n class=\"swiper-image\"\r\n :mode=\"props.imageMode\"\r\n :src=\"item.src\"\r\n width=\"100%\"\r\n height=\"100%\"\r\n @load=\"onImgLoad\"\r\n ></image>\r\n <su-video\r\n v-else\r\n :ref=\"(el) => (refs.videoRef[`video_${index}`] = el)\"\r\n :poster=\"sheep.$url.cdn(item.poster)\"\r\n :src=\"sheep.$url.cdn(item.src)\"\r\n :index=\"index\"\r\n :moveX=\"state.moveX\"\r\n :initialTime=\"item.currentTime || 0\"\r\n :height=\"seizeHeight\"\r\n @videoTimeupdate=\"videoTimeupdate\"\r\n ></su-video>\r\n </view>\r\n </swiper-item>\r\n </swiper>\r\n <template v-if=\"!state.videoPlaySataus\">\r\n <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle != 'tag'\">\r\n <view\r\n class=\"line-box\"\r\n v-for=\"(item, index) in props.list\"\r\n :key=\"index\"\r\n :class=\"[state.cur == index ? 'cur' : '', props.dotCur]\"\r\n ></view>\r\n </view>\r\n <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle == 'tag'\">\r\n <view\r\n class=\"ui-tag radius-lg\"\r\n :class=\"[props.dotCur]\"\r\n style=\"padding: 0 10rpx; pointer-events: none\"\r\n >\r\n <view style=\"transform: scale(0.7)\">{{ state.cur + 1 }} / {{ props.list.length }}</view>\r\n </view>\r\n </view>\r\n </template>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 轮播组件\r\n *\r\n * @property {Boolean} circular = false \t- 是否采用衔接滑动，即播放到末尾后重新回到开头\r\n * @property {Boolean} autoplay = true \t- 是否自动切换\r\n * @property {Number} interval = 5000 \t\t- 自动切换时间间隔\r\n * @property {Number} duration = 500 \t\t- 滑动动画时长,app-nvue不支持\r\n * @property {Array} list = [] \t\t\t\t- 轮播数据\r\n * @property {String} ui = '' \t\t\t\t- 样式class\r\n * @property {String} mode \t\t\t\t- 模式\r\n * @property {String} dotStyle \t\t\t- 指示点样式\r\n * @property {String} dotCur= 'ui-BG-Main' \t- 当前指示点样式,默认主题色\r\n * @property {String} bg \t\t\t\t\t- 背景\r\n * @property {String} height = 300 \t\t- 组件高度\r\n * @property {String} imgHeight = 300 \t- 图片高度\r\n *\r\n * @example list = [{url:'跳转路径',urlType:'跳转方式',type:'轮播类型',src:'轮播内容地址',poster:'视频必传'}]\r\n */\r\n\r\nimport { reactive, computed } from 'vue'\r\nimport sheep from '@/sheep'\r\nimport { clone } from 'lodash-es'\r\n\r\n// 数据\r\nconst state = reactive({\r\n imgHeight: 0,\r\n cur: 0,\r\n moveX: 0,\r\n videoPlaySataus: false,\r\n heightList: [],\r\n})\r\n\r\nconst refs = rea
|