shuolol/kccharge-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
dev
2025-10-28 09:25:46 +08:00
commit 9431e325df
1089 changed files with 143917 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uni_modules/uv-swiper/changelog.md
+16
View File
@@ -0,0 +1,16 @@
## 1.0.6（2023-12-20）
1. 优化
## 1.0.5（2023-08-24）
1. 修复标题文字过多未隐藏掉的BUG
## 1.0.4（2023-07-24）
1. 增加 滑动方向是否为纵向 属性vertical
## 1.0.3（2023-06-27）
1. 增加titleStyle属性，方便修改标题样式
2. 标题上去掉是否是图片的判断，避免无后缀的图片不显示
## 1.0.2（2023-06-01）
1. 修复点击触发两次事件的BUG
## 1.0.1（2023-05-16）
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
2. 优化部分功能
## 1.0.0（2023-05-10）
uv-swiper 轮播图，走马灯
uni_modules/uv-swiper/components/uv-swiper-indicator/props.js
+30
View File
@@ -0,0 +1,30 @@
export default {
props: {
// 轮播的长度
length: {
type: [String, Number],
default: 0
},
// 当前处于活动状态的轮播的索引
current: {
type: [String, Number],
default: 0
},
// 指示器非激活颜色
indicatorActiveColor: {
type: String,
default: ''
},
// 指示器的激活颜色
indicatorInactiveColor: {
type: String,
default: ''
},
// 指示器模式，line-线型，dot-点型
indicatorMode: {
type: String,
default: ''
},
...uni.$uv?.props?.swiperIndicator
}
}
uni_modules/uv-swiper/components/uv-swiper-indicator/uv-swiper-indicator.vue
+112
View File
@@ -0,0 +1,112 @@
<template>
<view class="uv-swiper-indicator">
<view
class="uv-swiper-indicator__wrapper"
v-if="indicatorMode === 'line'"
:class="[`uv-swiper-indicator__wrapper--${indicatorMode}`]"
:style="{
width: $uv.addUnit(lineWidth * length),
backgroundColor: indicatorInactiveColor
}"
>
<view
class="uv-swiper-indicator__wrapper--line__bar"
:style="[lineStyle]"
></view>
</view>
<view
class="uv-swiper-indicator__wrapper"
v-if="indicatorMode === 'dot'"
>
<view
class="uv-swiper-indicator__wrapper__dot"
v-for="(item, index) in length"
:key="index"
:class="[index === current && 'uv-swiper-indicator__wrapper__dot--active']"
:style="[dotStyle(index)]"
>
</view>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* SwiperIndicator 轮播图指示器
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
* @tutorial https://www.uvui.cn/components/swiper.html
* @property {String | Number} length 轮播的长度（默认 0 ）
* @property {String | Number} current 当前处于活动状态的轮播的索引（默认 0 ）
* @property {String} indicatorActiveColor 指示器非激活颜色
* @property {String} indicatorInactiveColor 指示器的激活颜色
* @property {String} indicatorMode 指示器模式（默认 'line' ）
* @example <uv-swiper :list="list4" indicator keyName="url" :autoplay="false"></uv-swiper>
*/
export default {
name: 'uv-swiper-indicator',
mixins: [mpMixin, mixin, props],
data() {
return {
lineWidth: 22
}
},
computed: {
// 指示器为线型的样式
lineStyle() {
let style = {}
style.width = this.$uv.addUnit(this.lineWidth)
style.transform = `translateX(${ this.$uv.addUnit(this.current * this.lineWidth) })`
style.backgroundColor = this.indicatorActiveColor
return style
},
// 指示器为点型的样式
dotStyle() {
return index => {
let style = {}
style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
return style
}
}
},
}
</script>
<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-swiper-indicator {
&__wrapper {
@include flex;
&--line {
border-radius: 100px;
height: 4px;
&__bar {
width: 22px;
height: 4px;
border-radius: 100px;
background-color: #FFFFFF;
transition: transform 0.3s;
}
}
&__dot {
width: 5px;
height: 5px;
border-radius: 100px;
margin: 0 4px;
&--active {
width: 12px;
}
}
}
}
</style>
uni_modules/uv-swiper/components/uv-swiper/props.js
+136
View File
@@ -0,0 +1,136 @@
export default {
props: {
// 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
list: {
type: Array,
default: () => []
},
// 是否显示面板指示器
indicator: {
type: Boolean,
default: false
},
// 指示器非激活颜色
indicatorActiveColor: {
type: String,
default: '#fff'
},
// 指示器的激活颜色
indicatorInactiveColor: {
type: String,
default: 'rgba(255, 255, 255, 0.35)'
},
// 指示器样式，可通过bottom，left，right进行定位
indicatorStyle: {
type: [String, Object],
default: ''
},
// 指示器模式，line-线型，dot-点型
indicatorMode: {
type: String,
default: 'line'
},
// 是否自动切换
autoplay: {
type: Boolean,
default: true
},
// 当前所在滑块的 index
current: {
type: [String, Number],
default: 0
},
// 当前所在滑块的 item-id ，不能与 current 被同时指定
currentItemId: {
type: String,
default: ''
},
// 滑块自动切换时间间隔
interval: {
type: [String, Number],
default: 3000
},
// 滑块切换过程所需时间
duration: {
type: [String, Number],
default: 300
},
// 播放到末尾后是否重新回到开头
circular: {
type: Boolean,
default: false
},
// 滑动方向是否为纵向
vertical: {
type: Boolean,
default: false
},
// 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
previousMargin: {
type: [String, Number],
default: 0
},
// 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
nextMargin: {
type: [String, Number],
default: 0
},
// 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
acceleration: {
type: Boolean,
default: false
},
// 同时显示的滑块数量，nvue、支付宝小程序不支持
displayMultipleItems: {
type: Number,
default: 1
},
// 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
// 只对微信小程序有效
easingFunction: {
type: String,
default: 'default'
},
// list数组中指定对象的目标属性名
keyName: {
type: String,
default: 'url'
},
// 图片的裁剪模式
imgMode: {
type: String,
default: 'aspectFill'
},
// 组件高度
height: {
type: [String, Number],
default: 130
},
// 背景颜色
bgColor: {
type: String,
default: '#f3f4f6'
},
// 组件圆角，数值或带单位的字符串
radius: {
type: [String, Number],
default: 4
},
// 是否加载中
loading: {
type: Boolean,
default: false
},
// 是否显示标题，要求数组对象中有title属性
showTitle: {
type: Boolean,
default: false
},
// 显示的标题样式
titleStyle: {
type: [Object, String],
default: ''
},
...uni.$uv?.props?.swiper
}
}
uni_modules/uv-swiper/components/uv-swiper/uv-swiper.vue
+263
View File
@@ -0,0 +1,263 @@
<template>
<view
class="uv-swiper"
:style="{
backgroundColor: bgColor,
height: $uv.addUnit(height),
borderRadius: $uv.addUnit(radius)
}"
>
<view
class="uv-swiper__loading"
v-if="loading"
>
<uv-loading-icon mode="circle"></uv-loading-icon>
</view>
<swiper
v-else
class="uv-swiper__wrapper"
:style="{
height: $uv.addUnit(height),
flex: 1
}"
@change="change"
:circular="circular"
:vertical="vertical"
:interval="interval"
:duration="duration"
:autoplay="autoplay"
:current="current"
:currentItemId="currentItemId"
:previousMargin="$uv.addUnit(previousMargin)"
:nextMargin="$uv.addUnit(nextMargin)"
:acceleration="acceleration"
:displayMultipleItems="displayMultipleItems"
:easingFunction="easingFunction"
>
<swiper-item
class="uv-swiper__wrapper__item"
v-for="(item, index) in list"
:key="index"
>
<view
class="uv-swiper__wrapper__item__wrapper"
:style="[itemStyle(index)]"
>
<!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
<image
class="uv-swiper__wrapper__item__wrapper__image"
v-if="getItemType(item) === 'image'"
:src="getSource(item)"
:mode="imgMode"
@tap="clickHandler(index)"
:style="{
height: $uv.addUnit(height),
borderRadius: $uv.addUnit(radius)
}"
></image>
<video
class="uv-swiper__wrapper__item__wrapper__video"
v-if="getItemType(item) === 'video'"
:id="`video-${index}`"
:enable-progress-gesture="false"
:src="getSource(item)"
:poster="getPoster(item)"
:title="showTitle && $uv.test.object(item) && item.title ? item.title : ''"
:style="{
height: $uv.addUnit(height)
}"
controls
@tap="clickHandler(index)"
></video>
<text
v-if="showTitle && $uv.test.object(item) && item.title"
class="uv-swiper__wrapper__item__wrapper__title uv-line-1"
:style="[$uv.addStyle(titleStyle)]"
>{{ item.title }}</text>
</view>
</swiper-item>
</swiper>
<view class="uv-swiper__indicator" :style="[$uv.addStyle(indicatorStyle)]">
<slot name="indicator">
<uv-swiper-indicator
v-if="!loading && indicator && !showTitle"
:indicatorActiveColor="indicatorActiveColor"
:indicatorInactiveColor="indicatorInactiveColor"
:length="list.length"
:current="currentIndex"
:indicatorMode="indicatorMode"
></uv-swiper-indicator>
</slot>
</view>
</view>
</template>
<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
* Swiper 轮播图
* @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
* @tutorial https://www.uvui.cn/components/swiper.html
* @property {Array} list 轮播图数据
* @property {Boolean} indicator 是否显示面板指示器（默认 false ）
* @property {String} indicatorActiveColor 指示器非激活颜色（默认 '#FFFFFF' ）
* @property {String} indicatorInactiveColor 指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
* @property {String | Object} indicatorStyle 指示器样式，可通过bottom，left，right进行定位
* @property {String} indicatorMode 指示器模式（默认 'line' ）
* @property {Boolean} autoplay 是否自动切换（默认 true ）
* @property {String | Number} current 当前所在滑块的 index（默认 0 ）
* @property {String} currentItemId 当前所在滑块的 item-id ，不能与 current 被同时指定
* @property {String | Number} interval 滑块自动切换时间间隔（ms）（默认 3000 ）
* @property {String | Number} duration 滑块切换过程所需时间（ms）（默认 300 ）
* @property {Boolean} circular 播放到末尾后是否重新回到开头（默认 false ）
* @property {String | Number} previousMargin 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
* @property {String | Number} nextMargin 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
* @property {Boolean} acceleration 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
* @property {Number} displayMultipleItems 同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
* @property {String} easingFunction 指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
* @property {String} keyName list数组中指定对象的目标属性名（默认 'url' ）
* @property {String} imgMode 图片的裁剪模式（默认 'aspectFill' ）
* @property {String | Number} height 组件高度（默认 130 ）
* @property {String} bgColor 背景颜色（默认 '#f3f4f6' ）
* @property {String | Number} radius 组件圆角，数值或带单位的字符串（默认 4 ）
* @property {Boolean} loading 是否加载中（默认 false ）
* @property {Boolean} showTitle 是否显示标题，要求数组对象中有title属性（默认 false ）
* @event {Function(index)} click 点击轮播图时触发 index：点击了第几张图片，从0开始
* @event {Function(index)} change 轮播图切换时触发(自动或者手动切换) index：切换到了第几张图片，从0开始
* @example <uv-swiper :list="list4" keyName="url" :autoplay="false"></uv-swiper>
*/
export default {
name: 'uv-swiper',
mixins: [mpMixin, mixin, props],
emits: ['click','change'],
data() {
return {
currentIndex: 0
}
},
watch: {
current(val, preVal) {
if(val === preVal) return;
this.currentIndex = val; // 和上游数据关联上
}
},
computed: {
itemStyle() {
return index => {
const style = {}
// #ifndef APP-NVUE || MP-TOUTIAO
// 左右流出空间的写法不支持nvue和头条
// 只有配置了此二值，才加上对应的圆角，以及缩放
if (this.nextMargin && this.previousMargin) {
style.borderRadius = this.$uv.addUnit(this.radius)
if (index !== this.currentIndex) style.transform = 'scale(0.92)'
}
// #endif
return style
}
}
},
methods: {
getItemType(item) {
if (typeof item === 'string') return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
if (typeof item === 'object' && this.keyName) {
if (!item.type) return this.$uv.test.video(this.getSource(item)) ? 'video' : 'image'
if (item.type === 'image') return 'image'
if (item.type === 'video') return 'video'
return 'image'
}
},
// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
getSource(item) {
if (typeof item === 'string') return item
if (typeof item === 'object' && this.keyName) return item[this.keyName]
else this.$uv.error('请按格式传递列表参数')
return ''
},
// 轮播切换事件
change(e) {
// 当前的激活索引
const {
current
} = e.detail
this.pauseVideo(this.currentIndex)
this.currentIndex = current
this.$emit('change', e.detail)
},
// 切换轮播时，暂停视频播放
pauseVideo(index) {
const lastItem = this.getSource(this.list[index])
if (this.$uv.test.video(lastItem)) {
// 当视频隐藏时，暂停播放
const video = uni.createVideoContext(`video-${index}`, this)
video.pause()
}
},
// 当一个轮播item为视频时，获取它的视频海报
getPoster(item) {
return typeof item === 'object' && item.poster ? item.poster : ''
},
// 点击某个item
clickHandler(index) {
this.$emit('click', index)
}
},
}
</script>
<style lang="scss" scoped>
$show-lines: 1;
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
.uv-swiper {
@include flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
&__wrapper {
flex: 1;
&__item {
flex: 1;
&__wrapper {
@include flex;
position: relative;
overflow: hidden;
transition: transform 0.3s;
flex: 1;
&__image {
flex: 1;
}
&__video {
flex: 1;
}
&__title {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
bottom: 0;
left: 0;
right: 0;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
color: #FFFFFF;
flex: 1;
}
}
}
}
&__indicator {
position: absolute;
bottom: 10px;
}
}
</style>
uni_modules/uv-swiper/package.json
+88
View File
@@ -0,0 +1,88 @@
{
"id": "uv-swiper",
"displayName": "uv-swiper 轮播图 全面兼容vue3+2、app、h5、小程序等多端",
"version": "1.0.6",
"description": "该组件为轮播、跑马灯，支持卡片式。一般用于导航轮播，广告展示等场景，开箱即用",
"keywords": [
"swiper",
"uvui",
"uv-ui",
"轮播图",
"走马灯"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [
"uv-ui-tools",
"uv-loading-icon"
],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "u",
"快手": "u",
"飞书": "u",
"京东": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
uni_modules/uv-swiper/readme.md
+19
View File
@@ -0,0 +1,19 @@
## Swiper 轮播图
> **组件名：uv-swiper**
该组件为轮播、跑马灯，支持卡片式。一般用于导航轮播，广告展示等场景，开箱即用。
# <a href="https://www.uvui.cn/components/swiper.html" target="_blank">查看文档</a>
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
![image](https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/uv-ui/banner.png)
</a>
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>