Skip to content

吴良建 / ssqds

转到一个项目
切换导航栏
切换导航栏固定状态
Commit 0bfe38e7 由 吴良建
选项

双色球大师初次提交

0 个父辈
内嵌 并排
正在显示 238 个修改的文件 包含 19135 行增加 和 0 行删除
.gitignore 0 → 100644
node_modules/
unpackage/
dist/**
.project
.DS_Store
.hbuilderx/
.vite/
App.vue 0 → 100644
<script>
import common from '@/utils/common.js'
export default {
data() {
return {
common
}
},
onLaunch: function() {
console.log('App Launch')
//获取导航栏高度
uni.getSystemInfo({
success: (e) => {
// #ifdef APP-PLUS
if (e.statusBarHeight === 0) {
common.statusBarH = 33
} else {
common.statusBarH = e.statusBarHeight
}
// #endif
// #ifdef H5
common.statusBarH = 10
// #endif
// #ifdef MP-WEIXIN
common.statusBarH = e.statusBarHeight + 20
// #endif
}
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
.gloabal-root-content-c {
min-height: 100vh;
background-color: #FFE5E5;
}
.gloabal-empty-image-c {
width: 200rpx;
height: 200rpx;
}
.gloabal-empty-content-c {
width: 100vw;
height: 100%;
align-items: center;
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
}
</style>
\ No newline at end of file
components/LoadingView.vue 0 → 100644
<template>
<view class="background">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</view>
</template>
<script>
export default {
name: "LoadingView",
data() {
return {
};
}
}
</script>
<style>
.background {
width: 100vw;
height: 100vh;
--amount: 20;
}
$animationDuration: 3s;
$amount: 6;
$particleRadius: 4vmin;
.background span {
width: $particleRadius * 2;
height: $particleRadius * 2;
border-radius: $particleRadius;
backface-visibility: hidden;
position: absolute;
animation-name: move;
animation-timing-function: cubic-bezier(0.4, 0, 1, 0.8);
animation-iteration-count: infinite;
animation-duration: $animationDuration;
top: calc(50% - #{$particleRadius});
left: 50%;
transform-origin: ($particleRadius * -1) center;
$colors: (#c5f0a4, #35b0ab, #226b80);
@for $i from 1 through $amount {
&:nth-child(#{$i}) {
background: nth($colors, random(length($colors)));
animation-delay: ($i / $amount) * $animationDuration * -1;
opacity: 0;
}
}
}
@keyframes move {
0% {
transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
}
30% {
opacity: 1;
}
100% {
z-index: 10;
transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
}
}
</style>
\ No newline at end of file
components/NumberQiu.vue 0 → 100644
<template>
<view style="display: flex; flex-direction: row; width: 100%; justify-content: space-between; line-height: ;">
<view v-for="(item, index) in rebArray" style="display: flex; flex-direction: row;">
<text :class="((item == select_number) || qiu_shi) ? 'reb' : 'reb_xun' "
:style="'height:'+ qiu_height + ' ; width: '+qiu_height+' ;line-height:'+qiu_height+' ;' ">{{item}}</text>
</view>
<view style="display: flex; flex-direction: row; ">
<text :class="((blueNumber == select_number) || qiu_shi) ? 'blue' : 'blue_xun' "
:style="'height:'+ qiu_height + ' ; width: '+qiu_height+' ;line-height:'+qiu_height+' ;' ">{{blueNumber}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
blueNumber: "",
rebArray: [],
};
},
props: {
data_info: [String],
qiu_height: [String],
qiu_shi: [Boolean],
select_number: [Number]
},
methods: {
},
mounted() {
if (this.data_info) {
var numberArray = this.data_info.split("+")
this.rebArray = numberArray[0].split(",")
this.blueNumber = numberArray[1]
}
}
}
</script>
<style>
.reb_xun {
height: 56rpx;
width: 56rpx;
color: #FF3333;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
text-align: center;
line-height: 56rpx;
border: 2rpx solid #FF3333;
}
.reb {
height: 56rpx;
width: 56rpx;
color: white;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
text-align: center;
line-height: 56rpx;
background-color: #FF3333;
}
.blue_xun {
height: 56rpx;
width: 56rpx;
color: #3917EA;
text-align: center;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
line-height: 56rpx;
text-align: center;
border: 2rpx solid #3917EA;
}
.blue {
height: 56rpx;
width: 56rpx;
color: white;
text-align: center;
border-radius: 100px;
font-size: 36rpx;
font-weight: bold;
line-height: 56rpx;
text-align: center;
background-color: #3917EA;
}
</style>
\ No newline at end of file
index.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>
main.js 0 → 100644
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
\ No newline at end of file
manifest.json 0 → 100644
{
"name" : "ssqds",
"appid" : "__UNI__5563EE0",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {},
"icons" : {
"android" : {
"hdpi" : "unpackage/res/icons/72x72.png",
"xhdpi" : "unpackage/res/icons/96x96.png",
"xxhdpi" : "unpackage/res/icons/144x144.png",
"xxxhdpi" : "unpackage/res/icons/192x192.png"
},
"ios" : {
"appstore" : "unpackage/res/icons/1024x1024.png",
"ipad" : {
"app" : "unpackage/res/icons/76x76.png",
"app@2x" : "unpackage/res/icons/152x152.png",
"notification" : "unpackage/res/icons/20x20.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"proapp@2x" : "unpackage/res/icons/167x167.png",
"settings" : "unpackage/res/icons/29x29.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"spotlight" : "unpackage/res/icons/40x40.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png"
},
"iphone" : {
"app@2x" : "unpackage/res/icons/120x120.png",
"app@3x" : "unpackage/res/icons/180x180.png",
"notification@2x" : "unpackage/res/icons/40x40.png",
"notification@3x" : "unpackage/res/icons/60x60.png",
"settings@2x" : "unpackage/res/icons/58x58.png",
"settings@3x" : "unpackage/res/icons/87x87.png",
"spotlight@2x" : "unpackage/res/icons/80x80.png",
"spotlight@3x" : "unpackage/res/icons/120x120.png"
}
}
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
}
pages.json 0 → 100644
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "双色球大师"
}
}, {
"path": "pages/history/history",
"style": {
"navigationBarTitleText": "历史开奖",
"enablePullDownRefresh": false
}
}, {
"path": "pages/number_book/number_book",
"style": {
"navigationBarTitleText": "号码本",
"enablePullDownRefresh": false
}
}, {
"path": "pages/select_code/select_code",
"style": {
"navigationBarTitleText": "立即选号",
"enablePullDownRefresh": false,
"app-plus": {
"bounce": "none",
"titleNView": {
"backgroundColor": "#ff0000", //显现的背景色
"type": "transparent" //透明渐变导航栏
}
}
}
}
],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#FF3333",
"backgroundColor": "#FFE5E5"
},
"uniIdRouter": {}
}
\ No newline at end of file
pages/history/history.vue 0 → 100644
<template>
<view class="gloabal-root-content-c">
<view style="height: 1rpx;"></view>
<view v-for="(item, index) in historyNumber" class="mine_hao" >
<view style="width: 100%; display: flex; flex-direction: row; justify-content: space-between;">
<view style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
<text class="text-area" style="font-weight: 700">{{item.Name + "期"}}</text>
</view>
<text class="text-area" >{{dateFormatStr(item.EndTime)}}</text>
</view>
<NumberQiu :data_info="item.OpenNumber" qiu_height="76rpx" :qiu_shi="true" style="margin-top: 25rpx; margin-bottom: 10rpx;"/>
</view>
</view>
</template>
<script>
import common from "@/utils/common";
import utils from "@/utils/utils.js";
import NumberQiu from '../../components/NumberQiu.vue'
export default {
components: {
NumberQiu
},
data() {
return {
historyNumber:[],
common
}
},
onLoad(options){
console.log(options)
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
if ('params' in options) {
this.historyNumber = JSON.parse(decodeURIComponent(options.params));
}
},
methods: {
onBack() {
uni.navigateBack()
},
dateFormatStr(value) {
var result = utils.dateFormatWeek(value);
return result;
}
}
}
</script>
<style>
.top {
width: 100%;
background: linear-gradient(90deg, #FF4F4D 0%, #1B8EFE 100%);
text-align: center;
display: flex;
position: fixed;
top: 0;
justify-content: space-between;
z-index: 4;
}
.title_c {
font-size: 36rpx;
font-weight: 700;
color: #FFFFFF;
height: 88rpx;
line-height: 88rpx;
}
.mine_hao {
background: #FFFFFF;
box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.07);
border-radius: 8rpx;
display: flex;
flex-direction: column;
height: 100%;
margin-left: 32rpx;
margin-right: 32rpx;
padding-left: 32rpx;
padding-right: 32rpx;
padding-top: 24rpx;
padding-bottom: 24rpx;
margin: 25rpx;
justify-content: center;
align-items: center;
}
.text-area {
height: 44rpx;
display: flex;
justify-content: center;
font-size: 32rpx;
font-weight: 400;
line-height: 44rpx;
color: #101010;
}
</style>
pages/index/index.vue 0 → 100644
<template>
<view class="gloabal-root-content-c">
<view :style="'height:'+titleHeight+' ; background-color: transparent;'">
</view>
<view style="background-color: transparent;">
<LoadingView v-if="loading"></LoadingView>
<view v-else>
<view style="padding: 28rpx; display: flex; justify-content: space-between; align-items: center;">
<view>
<text
style="font-size: 32rpx; color: #101010; font-weight: 400; margin-right: 16rpx;">最新开奖</text>
<text class="time_text"
style="margin-bottom: 30rpx; ">{{currentNumber.Name + "期（" + utils.getweekDayZhou(currentNumber.EndTime) + '）'}}</text>
</view>
<view>
<text>当前奖池：</text>
<text style="color: red;">{{utils.formatAmount(currentNumber.PrizePool)}}</text>
</view>
</view>
<view style="padding-left: 28rpx; padding-right: 28rpx; margin-bottom: 30rpx;">
<view
style="width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rpx;">
<text style="font-size: 28rpx; color: #807E7E;">每周二四日(21:15)开奖</text>
<text class="history_text" @click="goToHistory()">查看历史</text>
</view>
<NumberQiu :data_info="currentNumber.OpenNumber" :qiu_shi="true" qiu_height="46px" />
</view>
<view style="padding: 32rpx; background-color: #FF9B9B;">
<view class="cark_c">
<v-tabs v-model="current" :scroll="false" :tabs="tabs" @change="changeTab" line-height="8rpx"
line-color="#FF6F38" color="#101010" activeColor="#FF6F38" height="88rpx"
bgColor="transparent" fontSize="36rpx"></v-tabs>
<z-swiper ref="zSwiper" v-model="tabs" @slideChange="onSwiperChange" :options="options">
<z-swiper-item :key="tabs[0]">
<uni-grid :column="4" :square="false" :showBorder="false" @change="onItemClick">
<uni-grid-item v-for="(item2, index2) in xin_zuo_data" :key="item2.name"
style="margin-top: 24rpx; margin-bottom: 24rpx; " :index="index2">
<image class="item-c"
:src="index2 == grid_select_index1 ? item2.select_icon : item2.icon ">
</image>
</uni-grid-item>
</uni-grid>
</z-swiper-item>
<z-swiper-item :key="tabs[1]">
<uni-grid :column="4" :square="false" :showBorder="false" @change="onItemClick">
<uni-grid-item v-for="(item2, index2) in sheng_xiao_data" :key="item2.name"
style="margin-top: 24rpx; margin-bottom: 24rpx; " :index="index2">
<image class="item-c"
:src="index2 == grid_select_index2 ? item2.select_icon : item2.icon ">
</image>
</uni-grid-item>
</uni-grid>
</z-swiper-item>
</z-swiper>
</view>
</view>
<view style="height: 330rpx; background-color: #FF9B9B;"></view>
<view class="bottom-c">
<text class="number_c" @click="goToNumberBook">
号码本
</text>
<text class="select_code_c" @click="goToSelectCode">
立即选号
</text>
</view>
</view>
</view>
</view>
</template>
<script>
import NumberQiu from '../../components/NumberQiu.vue'
import http from '../../utils/http.js'
import utils from "@/utils/utils.js";
import LoadingView from '../../components/LoadingView.vue'
export default {
components: {
NumberQiu,
LoadingView
},
data() {
return {
titleHeight : 0,
loading: false,
utils,
currentNumber: {
"OpenNumber": "00,00,00,00,00,00+00",
},
options: {
autoHeight: true,
centeredSlides: true,
centeredSlidesBounds: true,
initialSlide: 0
},
historyNumber: [],
tabs: ["星座选号", "生肖选号"],
grid_select_index1: 0,
grid_select_index2: 0,
xin_zuo_data: [{
name: "水瓶座",
icon: '../../static/1-1-1.png',
select_icon: '../../static/1-1-2.png'
}, {
name: "双鱼座",
icon: '../../static/1-2-1.png',
select_icon: '../../static/1-2-2.png'
}, {
name: "白羊座",
icon: '../../static/1-3-1.png',
select_icon: '../../static/1-3-2.png'
}, {
name: "金牛座",
icon: '../../static/1-4-1.png',
select_icon: '../../static/1-4-2.png'
}, {
name: "双子座",
icon: '../../static/1-5-1.png',
select_icon: '../../static/1-5-2.png'
}, {
name: "巨蟹座",
icon: '../../static/1-6-1.png',
select_icon: '../../static/1-6-2.png'
}, {
name: "狮子座",
icon: '../../static/1-7-1.png',
select_icon: '../../static/1-7-2.png'
}, {
name: "处女座",
icon: '../../static/1-8-1.png',
select_icon: '../../static/1-8-2.png'
}, {
name: "天秤座",
icon: '../../static/1-9-1.png',
select_icon: '../../static/1-9-2.png'
}, {
name: "天蝎座",
icon: '../../static/1-10-1.png',
select_icon: '../../static/1-10-2.png'
}, {
name: "射手座",
icon: '../../static/1-11-1.png',
select_icon: '../../static/1-11-2.png'
}, {
name: "摩羯座",
icon: '../../static/1-12-1.png',
select_icon: '../../static/1-12-2.png'
}],
sheng_xiao_data: [{
name: "鼠",
icon: '../../static/2-1-1.png',
select_icon: '../../static/2-1-2.png'
}, {
name: "牛",
icon: '../../static/2-2-1.png',
select_icon: '../../static/2-2-2.png'
}, {
name: "虎",
icon: '../../static/2-3-1.png',
select_icon: '../../static/2-3-2.png'
}, {
name: "兔",
icon: '../../static/2-4-1.png',
select_icon: '../../static/2-4-2.png'
}, {
name: "龙",
icon: '../../static/2-5-1.png',
select_icon: '../../static/2-5-2.png'
}, {
name: "蛇",
icon: '../../static/2-6-1.png',
select_icon: '../../static/2-6-2.png'
}, {
name: "马",
icon: '../../static/2-7-1.png',
select_icon: '../../static/2-7-2.png'
}, {
name: "羊",
icon: '../../static/2-8-1.png',
select_icon: '../../static/2-8-2.png'
}, {
name: "猴",
icon: '../../static/2-9-1.png',
select_icon: '../../static/2-9-2.png'
}, {
name: "鸡",
icon: '../../static/2-10-1.png',
select_icon: '../../static/2-10-2.png'
}, {
name: "狗",
icon: '../../static/2-11-1.png',
select_icon: '../../static/2-11-2.png'
}, {
name: "猪",
icon: '../../static/2-12-1.png',
select_icon: '../../static/2-12-2.png'
}],
current: 0
}
},
onLoad() {
this.requestData()
this.titleHeight = uni.getSystemInfoSync().navigationBarHeight
console.log("titile：" + this.titleHeight)
},
methods: {
goToNumberBook() {
uni.navigateTo({
url: '/pages/number_book/number_book'
})
},
goToSelectCode() {
var titleStr = this.xin_zuo_data[this.grid_select_index1].name
if (this.current !== 0) {
titleStr = "生肖" + this.sheng_xiao_data[this.grid_select_index2].name
}
let tempData = {
title: titleStr
}
uni.navigateTo({
url: `/pages/select_code/select_code?info=${encodeURIComponent(JSON.stringify(tempData))}`
})
},
onSwiperChange(event) {
console.log(event)
this.current = this.$refs.zSwiper.swiper.activeIndex
},
onItemClick(e) {
var index = e.detail.index
if (this.current == 0) {
this.grid_select_index1 = index
} else {
this.grid_select_index2 = index
}
},
changeTab(index) {
this.$refs.zSwiper.swiper.slideTo(index); //切换到第一个slide，速度为1秒
},
dateFormatStr(value) {
var result = utils.dateFormatWeek(value);
return result;
},
goToHistory() {
const params = encodeURIComponent(JSON.stringify(this.historyNumber));
const url = '/pages/history/history';
uni.navigateTo({
url: `${url}?params=${params}`
})
},
async requestData() {
this.loading = true
let query_data = `query{
get_more_open_info(lottery_id:5)
}`;
console.info(query_data);
let result = await http.gql({
query: query_data
})
this.loginBtnLoading = false;
console.info(result);
//处理返回请求
if (result && result.data && result.data.get_more_open_info &&
!result.data.get_more_open_info.error) {
this.currentNumber = result.data.get_more_open_info[0]
this.historyNumber = result.data.get_more_open_info
} else {
uni.showToast({
icon: "none",
title: "请求异常",
});
}
this.loading = false
}
}
}
</script>
<style>
.bottom-c {
width: 100%;
height: 230rpx;
position: fixed;
z-index: 2;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
text-align: center;
}
.number_c {
flex: 1;
height: 100rpx;
margin-left: 32rpx;
margin-right: 15rpx;
border-radius: 100px;
background-color: rgba(255, 255, 255, 1);
color: rgba(255, 51, 51, 1);
font-size: 16px;
text-align: center;
line-height: 100rpx;
font-family: -apple-system;
border: 1px solid rgba(255, 155, 155, 1);
}
.select_code_c {
flex: 1;
margin-left: 15rpx;
margin-right: 32rpx;
height: 100rpx;
line-height: 100rpx;
border-radius: 100px;
align-items: center;
background: linear-gradient(180deg, rgba(255, 233, 150, 1) 0%, rgba(255, 185, 14, 1) 100%);
color: rgba(194, 33, 33, 1);
font-size: 16px;
text-align: center;
}
.item-c {
width: 90%;
height: 222rpx;
justify-self: center;
align-self: center;
}
.cark_c {
border-radius: 10px;
background-color: white;
text-align: center;
}
.history_text {
height: 30px;
padding-left: 18rpx;
padding-right: 18rpx;
line-height: 30px;
border-radius: 32px;
background-color: rgba(255, 255, 255, 1);
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: center;
font-family: -apple-system;
border: 1px solid rgba(242, 187, 187, 1);
}
</style>
\ No newline at end of file
pages/number_book/number_book.vue 0 → 100644
<template>
<view>
<view v-if="!data_list || data_list.length == 0 " class="gloabal-empty-content-c">
<image class="gloabal-empty-image-c" src="../../static/empty-icon.jpeg"></image>
<text>暂无号码</text>
</view>
<view v-else v-for="(item,index) in data_list" class="item-c">
<view style="display: flex; justify-content: space-between;">
<view class="qihao_c">{{'双色球' + item.qihao + '期选号'}}</view>
<view class="type_name">{{item.typeName}}</view>
</view>
<view v-for="(item2, index2) in item.codes" style="margin-top: 12rpx; margin-bottom: 12rpx;">
<NumberQiu :data_info="item2"></NumberQiu>
</view>
<view style="display: flex; margin: 30rpx;">
<view @click="copyNumber(item.codes)">
复制选号
</view>
<view style="margin-left: 30rpx;" @click="deleteDate(index)">
删除选号
</view>
</view>
</view>
</view>
</template>
<script>
import NumberQiu from '../../components/NumberQiu.vue'
export default {
components: {
NumberQiu
},
data() {
return {
data_list: []
}
},
async onLoad() {
var temp_data = await uni.getStorageSync("number_book")
console.log(temp_data)
if (temp_data.length > 0) {
let temp_list = JSON.parse(temp_data)
temp_list.reverse()
this.data_list.push(...temp_list)
}
},
methods: {
copyNumber(codes) {
let value = JSON.stringify(codes)
uni.setClipboardData({
data: value,
success: function() {
uni.getClipboardData({
success: function(res) {
console.log(res.data);
uni.showToast({
title: "已复制到剪贴板",
icon: "none"
});
},
});
},
});
},
deleteDate(index) {
this.data_list.splice(index, 1);
let str = JSON.stringify(this.data_list)
uni.setStorageSync("number_book", str)
uni.showToast({
title: "已删除",
icon: "none"
});
}
}
}
</script>
<style>
.gloabal-empty-content-c {
min-height: 80vh;
}
.item-c {
line-height: 20px;
border-radius: 10px;
background-color: rgba(255, 245, 245, 1);
text-align: center;
padding: 30rpx;
margin: 30rpx;
}
.qihao_c {
color: rgba(16, 16, 16, 1);
font-size: 14px;
text-align: left;
}
.type_name {
padding: 6rpx 12rpx;
line-height: 20px;
border-radius: 4px;
background: linear-gradient(88.38deg, rgba(255, 111, 56, 1) 2.07%, rgba(255, 160, 75, 1) 102.13%);
color: rgba(255, 255, 255, 1);
font-size: 12px;
text-align: center;
font-family: -apple-system;
}
</style>
\ No newline at end of file
pages/select_code/select_code.vue 0 → 100644
<template>
<view class="gloabal-root-content-c" :style="'background-color:' + (typeName.indexOf('生肖') != -1 ? '#2F73F3' : '#201024')+ ' ;'">
<image v-if="typeName.indexOf('生肖') != -1" style="width: 100vw; height: 412rpx;" src="../../static/bg3.jpg" mode="scaleToFill"></image>
<image v-else style="width: 100vw; height: 412rpx;" src="../../static/bg2.jpg" mode="scaleToFill"></image>
<view class="content">
<LoadingView v-if="loading"></LoadingView>
<view v-else>
<view class="cark_c">
<view class="cark_c_title">
{{"已为您生成 " + typeName + "幸运号码"}}
</view>
<view style="display: flex; justify-content: space-between; align-items: center;">
<view class="line-c"></view>
<text class="qihao-text">{{'双色球 第'+data_result.issue+'期'}}</text>
<view class="line-c"></view>
</view>
<view v-for="(item, index) in codes"
style="display: flex; margin-top: 18rpx; align-items: center; ">
<text style="width: 90rpx; font-size: 28rpx;">{{"第" + (index + 1) + "组"}}</text>
<NumberQiu :data_info="item" qiu_height="68rpx" :select_number="select_number"></NumberQiu>
</view>
<view class="btn-ll-c">
<text class="number_c" @click="copyNumber">
复制号码
</text>
<text class="select_code_c" @click="joinNumberBook">
加入号码本
</text>
</view>
</view>
<view class="cark_c">
<view style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
<text class="xinyun_c">{{data_result.xyh}}</text>
<text style="font-size: 32rpx; color: #A74F4F;">今日幸运数字</text>
</view>
<view class="title_samlge_c"> 今日运势：</view>
<view class="content-text-c">{{data_result.jrys}}</view>
<view v-show="data_result.xgys && data_result.xgys.length > 0" class="title_samlge_c">
{{typeName + "性格："}}
</view>
<view v-show="data_result.xgys && data_result.xgys.length > 0" class="content-text-c">
{{data_result.xgys}}
</view>
</view>
</view>
</view>
<view class="warn_text">
幸运号码仅供娱乐参考，不保证中奖结果。今日运势仅供您娱乐，无实际指导意义。
</view>
</view>
</template>
<script>
import NumberQiu from '../../components/NumberQiu.vue'
import http from '../../utils/http.js'
import LoadingView from '../../components/LoadingView.vue'
import common from '../../utils/common.js'
export default {
components: {
NumberQiu,
LoadingView
},
data() {
return {
common,
typeName: "",
codes: [],
numberArray: [],
loading: false,
data_result: "",
select_number: "",
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
}
},
onLoad(val) {
let data = JSON.parse(decodeURIComponent(val.info))
if (data.title) {
this.typeName = data.title
uni.setNavigationBarTitle({
title: data.title + "幸运选号"
})
var result = data.title.replace("生肖", "")
this.requestData(result)
}
console.log(this.codes)
},
methods: {
onBack() {
uni.navigateBack()
},
async requestData(name) {
this.loading = true
var devicesId = uni.getSystemInfoSync().deviceId
let query_data = `query{
tools_get_xyxh_info(name :"${name}",lottery:"双色球",device_number:"${devicesId}")
}`;
console.info(query_data);
let result = await http.gql({
query: query_data
})
console.info(result);
//处理返回请求
if (result && result.data && result.data.tools_get_xyxh_info &&
!result.data.tools_get_xyxh_info.error) {
var list = result.data.tools_get_xyxh_info.bet_list
for (let i = 0; i < list.length; i++) {
this.codes.push(this.genNumberStr(list[i]))
}
this.select_number = result.data.tools_get_xyxh_info.xyh
this.data_result = result.data.tools_get_xyxh_info
} else {
uni.showToast({
icon: "none",
title: "请求异常",
});
}
this.loading = false
},
genNumberStr(value) {
var reds = [];
for (let i = 0; i < value[0].length; i++) {
var str = value[0][i] < 10 ? "0" + value[0][i] : value[0][i];
reds.push(str)
}
const redBalls = reds.join(",");
const blueBall = value[1][0] < 10 ? "0" + value[1][0] : value[1][0];
var result = redBalls + "+" + blueBall;
return result
},
joinNumberBook() {
var temp_data = uni.getStorageSync("number_book")
var list = []
console.log(temp_data)
if (temp_data.length > 0) {
let temp_list = JSON.parse(temp_data)
list.push(...temp_list)
}
var item = {
typeName: this.typeName,
qihao: this.data_result.issue,
codes: this.codes
}
var param = list.some(function(value, index, list) {
return JSON.stringify(value.codes) === JSON.stringify(item.codes)
})
if (!param) {
list.push(item)
let str = JSON.stringify(list)
uni.setStorageSync("number_book", str)
uni.showToast({
title: "加入成功",
icon: "none"
});
} else {
uni.showToast({
title: "已经加入过了",
icon: "none"
});
}
},
copyNumber() {
let value = JSON.stringify(this.codes)
uni.setClipboardData({
data: value,
success: function() {
uni.getClipboardData({
success: function(res) {
console.log(res.data);
uni.showToast({
title: "已复制到剪贴板",
icon: "none"
});
},
});
},
});
}
}
}
</script>
<style>
.title_bg {
background-color: transparent;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 24rpx;
padding-right: 24rpx;
padding-bottom: 20rpx;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.cark_c {
z-index: 2;
border-radius: 10px;
background-color: rgba(255, 246, 246, 1);
text-align: center;
padding: 30rpx;
margin: 30rpx;
}
.cark_c_title {
width: 100%;
line-height: 20px;
background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 197, 197, 0.56), rgba(255, 255, 255, 1));
text-align: center;
font-family: -apple-system;
color: rgba(167, 79, 79, 1);
font-size: 16px;
margin-bottom: 30rpx;
padding-top: 16rpx;
padding-bottom: 16rpx;
text-align: center;
}
.line-c {
flex: 1;
height: 2rpx;
background-color: rgba(242, 191, 191, 1);
margin-left: 30rpx;
margin-right: 30rpx;
}
.qihao-text {
color: rgba(16, 16, 16, 1);
font-size: 18px;
text-align: left;
}
.number_c {
flex: 1;
height: 100rpx;
margin-left: 32rpx;
margin-right: 15rpx;
border-radius: 100px;
background-color: rgba(255, 255, 255, 1);
color: rgba(255, 51, 51, 1);
font-size: 16px;
text-align: center;
line-height: 100rpx;
font-family: -apple-system;
border: 1px solid rgba(255, 155, 155, 1);
}
.select_code_c {
flex: 1;
margin-left: 15rpx;
margin-right: 32rpx;
height: 100rpx;
line-height: 100rpx;
border-radius: 100px;
align-items: center;
background: linear-gradient(180deg, rgba(255, 233, 150, 1) 0%, rgba(255, 185, 14, 1) 100%);
color: rgba(194, 33, 33, 1);
font-size: 16px;
text-align: center;
}
.btn-ll-c {
margin-top: 40rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
}
.xinyun_c {
color: rgba(255, 51, 51, 1);
font-size: 36px;
text-align: center;
}
.title_samlge_c {
color: #000000;
font-size: 16px;
text-align: left;
}
.content-text-c {
margin-top: 30rpx;
margin-bottom: 30rpx;
left: 36px;
color: #4D4040;
font-size: 16px;
text-align: justify;
}
.head-iv {
flex-direction: column;
background-image: url('../../static/bg2.jpg');
background-size: 50% 100%;
width: 100vh;
height: 15vh;
display: flex;
background-color: transparent;
background-repeat: no-repeat;
}
.warn_text {
font-size: 24rpx;
font-weight: 400;
color: white;
margin: 30rpx;
padding-bottom: 200rpx;
}
</style>
\ No newline at end of file
uni.promisify.adaptor.js 0 → 100644
uni.addInterceptor({
returnValue (res) {
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
return res;
}
return new Promise((resolve, reject) => {
res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
});
},
});
\ No newline at end of file
uni.scss 0 → 100644
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;
uni_modules/qiun-data-charts/changelog.md 0 → 100644
## 2.5.0-20230101（2023-01-01）
- 秋云图表组件 修改条件编译顺序，确保uniapp的cli方式的项目依赖不完整时可以正常显示
- 秋云图表组件 恢复props属性directory的使用，以修复vue3项目中，开启echarts后，echarts目录识别错误的bug
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
- uCharts.js 修复x轴使用labelCount时，并且boundaryGap = 'justify' 并且关闭Y轴显示的时候，最后一个坐标值不显示的bug
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
- uCharts.js 修复玫瑰图半径显示不正确的bug
- uCharts.js 柱状图、山峰图增加正负图功能，y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定，后续版本优化自动显示0轴
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition，数据标签位置，有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow，否显示各项标识文案是，默认true
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding，提示窗边框填充距离，默认3px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize，提示窗字体大小配置，默认13px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight，提示窗文字行高，默认20px
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow，是否显示左侧图例，默认true
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape，图例形状，图例标识样式，有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize，字体大小配置，默认13px
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding，标签边框内填充距离，默认6px
- uCharts.js 折线图line增加 opts.extra.line.linearType，渐变色类型，可选值 none关闭渐变色，custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
- uCharts.js 折线图line增加 serie.linearColor，渐变色数组，格式为2维数组[起始位置，颜色值]，例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
- uCharts.js 折线图line增加 opts.extra.line.onShadow，是否开启折线阴影，开启后请赋值serie.setShadow阴影设置
- uCharts.js 折线图line增加 serie.setShadow，阴影配置，格式为4位数组：[offsetX,offsetY,blur,color]
- uCharts.js 折线图line增加 opts.extra.line.animation，动画效果方向，可选值为vertical 垂直动画效果，horizontal 水平动画效果
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight，X轴字体行高，默认20px
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop，X轴文字距离轴线的距离，默认0px
- uCharts.js X轴xAxis增加 opts.xAxis.title，当前X轴标题
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize，标题字体大小，默认13px
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY，标题纵向偏移距离，负数为向上偏移，正数向下偏移
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX，标题横向偏移距离，负数为向左偏移，正数向右偏移
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor，标题字体颜色，默认#666666
## 报错TypeError: Cannot read properties of undefined (reading 'length')
- 如果是uni-modules版本组件，请先登录HBuilderX账号；
- 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
- 如果是cli项目请使用码云上的非uniCloud版本组件；
- 或者添加uniCloud的依赖；
- 或者使用原生uCharts；
## 2.4.5-20221130（2022-11-30）
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
- uCharts.js 折线图修复特殊情况下只有单点数据，并改变线宽后点变为圆形的bug
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
- uCharts.js 折线图、区域图增加tooltip指示点，opts.extra.line.activeType/opts.extra.area.activeType，可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
## 2.4.4-20221102（2022-11-02）
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
- 秋云图表组件 修复使用echarts时，初始化时宽高不正确的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
- 秋云图表组件 修复uniapp的h5使用history模式时，无法加载echarts的bug
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出，方便一些特殊需求的交互获取数据。
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
- uCharts.js 地图新增参数opts.series[i].fillOpacity，以透明度方式来设置颜色过度效果，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
- uCharts.js 地图新增参数opts.extra.map.active，是否启用点击激活变色
- uCharts.js 地图新增参数opts.extra.map.activeTextColor，是否启用点击激活变色
- uCharts.js 地图新增渲染完成事件renderComplete
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小，默认opts.fontSize
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色，默认#FFFFFF
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度，默认0
- uCharts.js 进度条新增参数opts.extra.arcbar.direction，动画方向，可选值为cw顺时针、ccw逆时针
- uCharts.js 混合图新增参数opts.extra.mix.line.width，折线的宽度，默认2
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时，图表显示错位的bug
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
## 报错TypeError: Cannot read properties of undefined (reading 'length')
1. 如果是uni-modules版本组件，请先登录HBuilderX账号；
2. 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
3. 如果是cli项目请使用码云上的非uniCloud版本组件；
4. 或者添加uniCloud的依赖；
5. 或者使用原生uCharts；
## 2.4.3-20220505（2022-05-05）
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时，再次赋值后画布闪动的bug
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval，数据点位网格抽希，默认1
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel， 是否显示刻度点值，默认false
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix，刻度点值小数位数，默认0
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow，是否显示末端刻度圆点，默认false
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius，刻度圆点的半径，默认3
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor，刻度圆点的颜色，默认#cccccc
- uCharts.js 雷达图新增参数opts.extra.radar.linearType，渐变色类型，可选值"none"关闭渐变,"custom"开启渐变
- uCharts.js 雷达图新增参数opts.extra.radar.customColor，自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
- uCharts.js 柱状图中温度计式图标，优化支持全圆角类型，修复边框有缝隙的bug，详见官网【演示】中的温度计图表
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth，当前点击柱状图的背景宽度，默认一个单元格单位
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度，默认0.2
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelText，自定义标签文字，避免formatter格式化的繁琐，详见官网【演示】中的饼图
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelShow，自定义是否显示某一个指示标签，避免因饼图类别太多导致标签重复或者居多导致图形变形的问题，详见官网【演示】中的饼图
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText（与series.name同级）自定义图例显示文字的方法
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参，统一为fromatter:function(value,index,opts){}
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
- 【官网模板】增加外部自定义图例与图表交互的例子，[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
## 注意：非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下，请到码云更新非 unimodules 版本组件，[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
## 2.4.2-20220421（2022-04-21）
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
## 2.4.2-20220420（2022-04-20）
## 重要！此版本uCharts新增了很多功能，修复了诸多已知问题
- 秋云图表组件 新增onzoom开启双指缩放功能（仅uCharts），前提需要直角坐标系类图表类型，并且ontouch为true、opts.enableScroll为true，详见实例项目K线图
- 秋云图表组件 新增optsWatch是否监听opts变化，关闭optsWatch后，动态修改opts不会触发图表重绘
- 秋云图表组件 修复开启canvas2d功能后，动态更新数据后画布闪动的bug
- 秋云图表组件 去除directory属性，改为自动获取echarts.min.js路径（升级不受影响）
- 秋云图表组件 增加getImage()方法及@getImage事件，通过ref调用getImage()方法获，触发@getImage事件获取当前画布的base64图片文件流。
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
- 秋云图表组件 新增加【非uniCloud】版本组件，避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题，请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)，或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
- uCharts.js 新增dobuleZoom双指缩放功能
- uCharts.js 新增山峰图type="mount"，数据格式为饼图类格式，不需要传入categories，具体详见新版官网在线演示
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts)，方便格式化时有更多参数可用
- uCharts.js 标记线功能增加labelText自定义显示文字，增加labelAlign标签显示位置（左侧或右侧），增加标签显示位置微调labelOffsetX、labelOffsetY
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
- uCharts.js 修复X轴开启disabled后，X轴仍占用空间的bug
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后，X轴文字与滚动条重叠的bug
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度，取值范围(-90至90)
- uCharts.js 修复地图文字标签层级显示不正确的bug
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
- uCharts.js 修复当opts.padding上边距为0时，Y轴顶部刻度标签位置不正确的bug
## 另外我们还开发了各大原生小程序组件，已发布至码云和npm
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
## 对于原生uCharts文档我们已上线新版官方网站，详情点击下面链接进入官网
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
## 2.3.7-20220122（2022-01-22）
## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
## 2.3.7-20220118（2022-01-18）
## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
## 2.3.67-20220118（2022-01-18）
- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
## 2.3.6-20220111（2022-01-11）
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
## 2.3.6-20211201（2021-12-01）
- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
## 2.3.5-20211014（2021-10-15）
- uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
## 2.3.4-20211012（2021-10-12）
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
## 2.3.3-20210706（2021-07-06）
- uCharts.js 增加雷达图开启数据点值（opts.dataLabel）的显示
## 2.3.2-20210627（2021-06-27）
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
## 2.3.1-20210616（2021-06-16）
- uCharts.js 修复圆角柱状图使用4角圆角时，当数值过大时不正确的bug
## 2.3.0-20210612（2021-06-12）
- uCharts.js 【重要】uCharts增加nvue兼容，可在nvue项目中使用gcanvas组件渲染uCharts，[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
- 秋云图表组件 增加tapLegend属性，是否开启图例点击交互事件
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数，以便在页面中调用参数
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法，详见showOptsTooltip方法
## 2.2.1-20210603（2021-06-03）
- uCharts.js 修复饼图、圆环图、玫瑰图，当起始角度不为0时，tooltip位置不准确的bug
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
## 2.2.0-20210529（2021-05-29）
- uCharts.js 增加条状图type="bar"
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
## 2.1.7-20210524（2021-05-24）
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
## 2.1.6-20210523（2021-05-23）
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
## 2.1.5-2021051702（2021-05-17）
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
## 2.1.5-20210517（2021-05-17）
- uCharts.js 修复Y轴自定义min和max时，未按指定的最大值最小值显示坐标轴刻度的bug
## 2.1.4-20210516（2021-05-16）
- 秋云图表组件 优化onWindowResize防抖方法
- 秋云图表组件 修复APP端uCharts更新数据时，清空series显示loading图标后再显示图表，图表抖动的bug
- uCharts.js 修复开启canvas2d后，x轴、y轴、series自定义字体大小未按比例缩放的bug
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
## 2.1.3-20210513（2021-05-13）
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法，支持带滚动条的数据动态打点
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言，如尘般染指流年づ
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时，原数据闪现的bug
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
- uCharts.js 增加tooltip显示category（x轴对应点位）标题的功能，opts.extra.tooltip.showCategory，默认为false
- uCharts.js 修复mix混合图只有柱状图时，tooltip的分割线显示位置不正确的bug
- uCharts.js 修复开启滚动条，图表在拖动中动态打点，滚动条位置不正确的bug
- uCharts.js 修复饼图类数据格式为echarts数据格式，series为空数组报错的bug
- 示例项目 修改uCharts.js更新到v2.1.2版本后，@getIndex方法获取索引值变更为e.currentIndex.index
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新（数据动态打点）的demo
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
## 2.1.2-20210509（2021-05-09）
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
## 2.1.1-20210509（2021-05-09）
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行，支持在config-echarts.js配置文件内写function配置。
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
- 秋云图表组件 修复APP端报错Error: Not Found：Page[6][-1,27] at view.umd.min.js:1的bug。
## 2.1.0-20210507（2021-05-07）
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
## 2.1.0-20210506（2021-05-06）
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用，无法显示图表的bug
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图（type="tline"）、时间轴区域图（type="tarea"）、散点图（type="scatter"）、气泡图demo（type="bubble"）、倒三角形漏斗图（opts.extra.funnel.type="triangle"）、金字塔形漏斗图（opts.extra.funnel.type="pyramid"）
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
- uCharts.js 升级至v2.1.0版本
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
- uCharts.js 修复 玫瑰图点击图例，只剩一个类别显示空白的bug
- uCharts.js 修复 饼图类图点击图例，其他图表tooltip位置某些情况下不准的bug
- uCharts.js 修复 x轴为矢量轴（时间轴）情况下，点击tooltip位置不正确的bug
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
- uCharts.js 增加 直角坐标系图表X轴format格式化方法（原生uCharts.js用法请使用formatter）
- uCharts.js 增加 漏斗图扩展配置，倒三角形（opts.extra.funnel.type="triangle"），金字塔形（opts.extra.funnel.type="pyramid"）
- uCharts.js 增加 散点图（opts.type="scatter"）、气泡图（opts.type="bubble"）
- 后期计划 完善散点图、气泡图，增加markPoints标记点，增加横向条状图。
## 2.0.0-20210502（2021-05-02）
- uCharts.js 修复词云图获取点击索引不正确的bug
## 2.0.0-20210501（2021-05-01）
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下，v-for循环使用图表，显示不正确的bug
## 2.0.0-20210426（2021-04-26）
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
- uCharts.js 增加 extra.column.categoryGap 参数，柱状图类每个category点位（X轴点）柱子组之间的间距
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数，标题纵向偏移距离，负数为向上偏移，正数向下偏移
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数，标题横向偏移距离，负数为向左偏移，正数向右偏移
- uCharts.js 增加 extra.gauge.labelOffset 参数，仪表盘标签文字径向便宜距离，默认13px
## 2.0.0-20210422-2（2021-04-22）
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
## 2.0.0-20210422（2021-04-22）
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
## 2.0.0-20210421（2021-04-21）
- uCharts.js 修复多行图例的情况下，图例在上方或者下方时，图例float为左侧或者右侧时，第二行及以后的图例对齐方式不正确的bug
## 2.0.0-20210420（2021-04-20）
- 秋云图表组件 修复微信小程序开启canvas2d模式后，windows版微信小程序不支持canvas2d模式的bug
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
## 2.0.0-20210419（2021-04-19）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件，请重启HBuilderX，如仍不好用，请重启电脑；
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
- uCharts.js 修复多Y轴单独设置fontSize时，开启canvas2d后，未对应放大字体的bug
## 2.0.0-20210418（2021-04-18）
- 秋云图表组件 增加directory配置，修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
## 2.0.0-20210416（2021-04-16）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件，请重启HBuilderX，如仍不好用，请重启电脑；
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
## 2.0.0-20210415（2021-04-15）
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
## 2.0.0-20210414（2021-04-14）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件，请重启HBuilderX，如仍不好用，请重启电脑；
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
## 2.0.0-20210413（2021-04-13）
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
- 秋云图表组件 修改ontouch时，@getTouchStart@getTouchMove@getTouchEnd的触发条件
- uCharts.js 修复饼图类数据格式series属性不生效的bug
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
## 2.0.0-20210412-2（2021-04-12）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册&lt;qiun-data-charts&gt;组件，请重启HBuilderX。如仍不好用，请重启电脑，此问题已于DCloud官方确认，HBuilderX下个版本会修复。
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图（条状图）的示例
## 2.0.0-20210412（2021-04-12）
- 秋云图表组件 修复created中判断echarts导致APP端无法识别，改回mounted中判断echarts初始化
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
## 2.0.0-20210411（2021-04-11）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，并清空小程序开发者工具缓存。
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 折线图区域图增加connectNulls断点续连的功能，详见示例项目中ucharts.vue
- 秋云图表组件 变更初始化方法为created，变更type2d默认值为true，优化2d模式下组件初始化后dom获取不到的bug
- 秋云图表组件 修复左右布局时，右侧图表点击坐标错误的bug，修复tooltip柱状图自定义颜色显示object的bug
## 2.0.0-20210410（2021-04-10）
- 修复左右布局时，右侧图表点击坐标错误的bug，修复柱状图自定义颜色tooltip显示object的bug
- 增加标记线及柱状图自定义颜色的demo
## 2.0.0-20210409（2021-04-08）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug，修复2d模式下饼图类activeRadius为按比例放大的bug
- 修复组件在支付宝小程序端点击位置不准确的bug
## 2.0.0-20210408（2021-04-07）
- 修复组件在支付宝小程序端不能显示的bug（目前支付宝小程不能点击交互，后续修复）
- uCharts.js 修复高分屏下柱状图类，圆弧进度条 自定义宽度不能按比例放大的bug
## 2.0.0-20210407（2021-04-06）
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
## 2.0.0-20210406（2021-04-05）
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
## 2.0.0（2021-04-05）
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue 0 → 100644
<!--
* qiun-data-charts 秋云高性能跨全端图表组件
* Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
* 为方便更多开发者使用，如有更好的建议请提交码云 Pull Requests ！
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
-->
<template>
<view class="chartsview" :id="'ChartBoxId'+cid">
<view v-if="mixinDatacomLoading">
<!-- 自定义加载状态，请改这里 -->
<qiun-loading :loadingType="loadingType" />
</view>
<view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading">
<!-- 自定义错误提示，请改这里 -->
<qiun-error :errorMessage="errorMessage" />
</view>
<!-- APP和H5采用renderjs渲染图表 -->
<!-- #ifdef APP-VUE || H5 -->
<block v-if="echarts">
<view
:style="{ background: background }"
style="width: 100%;height: 100%;"
:data-directory="directory"
:id="'EC'+cid"
:prop="echartsOpts"
:change:prop="rdcharts.ecinit"
:resize="echartsResize"
:change:resize="rdcharts.ecresize"
v-show="showchart"
/>
</block>
<block v-else>
<view
v-on:tap="rdcharts.tap"
v-on:mousemove="rdcharts.mouseMove"
v-on:mousedown="rdcharts.mouseDown"
v-on:mouseup="rdcharts.mouseUp"
v-on:touchstart="rdcharts.touchStart"
v-on:touchmove="rdcharts.touchMove"
v-on:touchend="rdcharts.touchEnd"
:id="'UC'+cid"
:prop="uchartsOpts"
:change:prop="rdcharts.ucinit"
>
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disableScroll"
@error="_error"
v-show="showchart"
/>
</view>
</block>
<!-- #endif -->
<!-- 支付宝小程序 -->
<!-- #ifdef MP-ALIPAY -->
<block v-if="ontouch">
<canvas
:id="cid"
:canvasId="cid"
:width="cWidth * pixel"
:height="cHeight * pixel"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
@error="_error"
v-show="showchart"
/>
</block>
<block v-if="!ontouch">
<canvas
:id="cid"
:canvasId="cid"
:width="cWidth * pixel"
:height="cHeight * pixel"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@error="_error"
v-show="showchart"
/>
</block>
<!-- #endif -->
<!-- 其他小程序通过vue渲染图表 -->
<!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD || MP-360 -->
<block v-if="type2d">
<view v-if="ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
type="2d"
:disable-scroll="disScroll"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
@error="_error"
v-show="showchart"
/>
</view>
<view v-if="!ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
type="2d"
:disable-scroll="disScroll"
@error="_error"
v-show="showchart"
/>
</view>
</block>
<block v-if="!type2d">
<view v-if="ontouch" @tap="_tap">
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
@touchstart="_touchStart"
@touchmove="_touchMove"
@touchend="_touchEnd"
:disable-scroll="disScroll"
@error="_error"
v-if="showchart"
/>
</view>
<view v-if="!ontouch" >
<canvas
:id="cid"
:canvasId="cid"
:style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
:disable-scroll="disScroll"
@tap="_tap"
@error="_error"
v-if="showchart"
/>
</view>
</block>
<!-- #endif -->
</view>
</template>
<script>
import uCharts from '../../js_sdk/u-charts/u-charts.js';
import cfu from '../../js_sdk/u-charts/config-ucharts.js';
// #ifdef APP-VUE || H5
import cfe from '../../js_sdk/u-charts/config-echarts.js';
// #endif
function deepCloneAssign(origin = {}, ...args) {
for (let i in args) {
for (let key in args[i]) {
if (args[i].hasOwnProperty(key)) {
origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
}
}
}
return origin;
}
function formatterAssign(args,formatter) {
for (let key in args) {
if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
formatterAssign(args[key],formatter)
}else if(key === 'format' && typeof args[key] === 'string'){
args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
}
}
return args;
}
// 时间转换函数，为了匹配uniClinetDB读取出的时间与categories不同
function getFormatDate(date) {
var seperator = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator + month + seperator + strDate;
return currentdate;
}
var lastMoveTime = null;
/**
* 防抖
*
* @param { Function } fn 要执行的方法
* @param { Number } wait 防抖多少毫秒
*
* 在 vue 中使用（注意：不能使用箭头函数，否则this指向不对，并且不能再次封装如：
* move(){ // 错误调用方式
* debounce(function () {
* console.log(this.title);
* }, 1000)}）;
* 应该直接使用：// 正确调用方式
* move: debounce(function () {
* console.log(this.title);
* }, 1000)
*/
function debounce(fn, wait) {
let timer = false;
return function() {
clearTimeout(timer);
timer && clearTimeout(timer);
timer = setTimeout(() => {
timer = false;
fn.apply(this, arguments); // 把参数传进去
}, wait);
};
}
export default {
name: 'qiun-data-charts',
mixins: [uniCloud.mixinDatacom],
props: {
type: {
type: String,
default: null
},
canvasId: {
type: String,
default: 'uchartsid'
},
canvas2d: {
type: Boolean,
default: false
},
background: {
type: String,
default: 'rgba(0,0,0,0)'
},
animation: {
type: Boolean,
default: true
},
chartData: {
type: Object,
default() {
return {
categories: [],
series: []
};
}
},
opts: {
type: Object,
default() {
return {};
}
},
eopts: {
type: Object,
default() {
return {};
}
},
loadingType: {
type: Number,
default: 2
},
errorShow: {
type: Boolean,
default: true
},
errorReload: {
type: Boolean,
default: true
},
errorMessage: {
type: String,
default: null
},
inScrollView: {
type: Boolean,
default: false
},
reshow: {
type: Boolean,
default: false
},
reload: {
type: Boolean,
default: false
},
disableScroll: {
type: Boolean,
default: false
},
optsWatch: {
type: Boolean,
default: true
},
onzoom: {
type: Boolean,
default: false
},
ontap: {
type: Boolean,
default: true
},
ontouch: {
type: Boolean,
default: false
},
onmouse: {
type: Boolean,
default: true
},
onmovetip: {
type: Boolean,
default: false
},
echartsH5: {
type: Boolean,
default: false
},
echartsApp: {
type: Boolean,
default: false
},
tooltipShow: {
type: Boolean,
default: true
},
tooltipFormat: {
type: String,
default: undefined
},
tooltipCustom: {
type: Object,
default: undefined
},
startDate: {
type: String,
default: undefined
},
endDate: {
type: String,
default: undefined
},
textEnum: {
type: Array,
default () {
return []
}
},
groupEnum: {
type: Array,
default () {
return []
}
},
pageScrollTop: {
type: Number,
default: 0
},
directory: {
type: String,
default: '/'
},
tapLegend: {
type: Boolean,
default: true
},
menus: {
type: Array,
default () {
return []
}
}
},
data() {
return {
cid: 'uchartsid',
inWx: false,
inAli: false,
inTt: false,
inBd: false,
inH5: false,
inApp: false,
inWin: false,
type2d: true,
disScroll: false,
openmouse: false,
pixel: 1,
cWidth: 375,
cHeight: 250,
showchart: false,
echarts: false,
echartsResize:{
state:false
},
uchartsOpts: {},
echartsOpts: {},
drawData:{},
lastDrawTime:null,
};
},
created(){
this.cid = this.canvasId
if (this.canvasId == 'uchartsid' || this.canvasId == '') {
let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
let len = t.length
let id = ''
for (let i = 0; i < 32; i++) {
id += t.charAt(Math.floor(Math.random() * len))
}
this.cid = id
}
const systemInfo = uni.getSystemInfoSync()
if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){
this.inWin = true;
}
// #ifdef MP-WEIXIN
this.inWx = true;
if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
this.type2d = false;
}else{
this.type2d = true;
this.pixel = systemInfo.pixelRatio;
}
// #endif
//非微信小程序端强制关闭canvas2d模式
// #ifndef MP-WEIXIN
this.type2d = false;
// #endif
// #ifdef MP-TOUTIAO || MP-LARK || MP-ALIPAY
this.type2d = this.canvas2d;
// #endif
// #ifdef MP-ALIPAY
this.inAli = true;
this.pixel = systemInfo.pixelRatio;
// #endif
// #ifdef MP-BAIDU
this.inBd = true;
// #endif
// #ifdef MP-TOUTIAO
this.inTt = true;
// #endif
this.disScroll = this.disableScroll;
},
mounted() {
// #ifdef APP-VUE
this.inApp = true;
if (this.echartsApp === true) {
this.echarts = true;
this.openmouse = false;
}
// #endif
// #ifdef APP-NVUE
this.inApp = true;
this.mixinDatacomLoading = false
this.mixinDatacomErrorMessage = "暂不支持NVUE"
// #endif
// #ifdef H5
this.inH5 = true;
if(this.inWin === true){
this.openmouse = this.onmouse;
}
if (this.echartsH5 === true) {
this.echarts = true;
}
// #endif
this.$nextTick(()=>{
this.beforeInit();
})
// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE
const time = this.inH5 ? 500 : 200;
const _this = this;
uni.onWindowResize(
debounce(function(res) {
if (_this.mixinDatacomLoading == true) {
return;
}
let errmsg = _this.mixinDatacomErrorMessage;
if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {
return;
}
if (_this.echarts) {
_this.echartsResize.state = !_this.echartsResize.state;
} else {
_this.resizeHandler();
}
}, time)
);
// #endif
},
destroyed(){
if(this.echarts === true){
delete cfe.option[this.cid]
delete cfe.instance[this.cid]
}else{
delete cfu.option[this.cid]
delete cfu.instance[this.cid]
}
// #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
uni.offWindowResize(()=>{})
// #endif
},
watch: {
chartDataProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval)) {
this._clearChart();
if (val.series && val.series.length > 0) {
this.beforeInit();
}else{
this.mixinDatacomLoading = true;
this.showchart = false;
this.mixinDatacomErrorMessage = null;
}
}
} else {
this.mixinDatacomLoading = false;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：chartData数据类型错误';
}
},
immediate: false,
deep: true
},
localdata:{
handler(val, oldval) {
if (JSON.stringify(val) !== JSON.stringify(oldval)) {
if (val.length > 0) {
this.beforeInit();
}else{
this.mixinDatacomLoading = true;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = null;
}
}
},
immediate: false,
deep: true
},
optsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
this.checkData(this.drawData);
}
} else {
this.mixinDatacomLoading = false;
this._clearChart();
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：opts数据类型错误';
}
},
immediate: false,
deep: true
},
eoptsProps: {
handler(val, oldval) {
if (typeof val === 'object') {
if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) {
this.checkData(this.drawData);
}
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：eopts数据类型错误';
}
},
immediate: false,
deep: true
},
reshow(val, oldval) {
if (val === true && this.mixinDatacomLoading === false) {
setTimeout(() => {
this.mixinDatacomErrorMessage = null;
this.echartsResize.state = !this.echartsResize.state;
this.checkData(this.drawData);
}, 200);
}
},
reload(val, oldval) {
if (val === true) {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this.reloading();
}
},
mixinDatacomErrorMessage(val, oldval) {
if (val) {
this.emitMsg({name: 'error', params: {type:"error", errorShow: this.errorShow, msg: val, id: this.cid}});
if(this.errorShow){
console.log('[秋云图表组件]' + val);
}
}
},
errorMessage(val, oldval) {
if (val && this.errorShow && val !== null && val !== 'null' && val !== '') {
this.showchart = false;
this.mixinDatacomLoading = false;
this.mixinDatacomErrorMessage = val;
} else {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this.reloading();
}
}
},
computed: {
optsProps() {
return JSON.parse(JSON.stringify(this.opts));
},
eoptsProps() {
return JSON.parse(JSON.stringify(this.eopts));
},
chartDataProps() {
return JSON.parse(JSON.stringify(this.chartData));
},
},
methods: {
beforeInit(){
this.mixinDatacomErrorMessage = null;
if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {
//拷贝一下chartData，为了opts变更后统一数据来源
this.drawData = deepCloneAssign({}, this.chartData);
this.mixinDatacomLoading = false;
this.showchart = true;
this.checkData(this.chartData);
}else if(this.localdata.length>0){
this.mixinDatacomLoading = false;
this.showchart = true;
this.localdataInit(this.localdata);
}else if(this.collection !== ''){
this.mixinDatacomLoading = false;
this.getCloudData();
}else{
this.mixinDatacomLoading = true;
}
},
localdataInit(resdata){
//替换enum类型为正确的描述
if(this.groupEnum.length>0){
for (let i = 0; i < resdata.length; i++) {
for (let j = 0; j < this.groupEnum.length; j++) {
if(resdata[i].group === this.groupEnum[j].value){
resdata[i].group = this.groupEnum[j].text
}
}
}
}
if(this.textEnum.length>0){
for (let i = 0; i < resdata.length; i++) {
for (let j = 0; j < this.textEnum.length; j++) {
if(resdata[i].text === this.textEnum[j].value){
resdata[i].text = this.textEnum[j].text
}
}
}
}
let needCategories = false;
let tmpData = {categories:[], series:[]}
let tmpcategories = []
let tmpseries = [];
//拼接categories
if(this.echarts === true){
needCategories = cfe.categories.includes(this.type)
}else{
needCategories = cfu.categories.includes(this.type)
}
if(needCategories === true){
//如果props中的chartData带有categories，则优先使用chartData的categories
if(this.chartData && this.chartData.categories && this.chartData.categories.length>0){
tmpcategories = this.chartData.categories
}else{
//如果是日期类型的数据，不管是本地数据还是云数据，都按起止日期自动拼接categories
if(this.startDate && this.endDate){
let idate = new Date(this.startDate)
let edate = new Date(this.endDate)
while (idate <= edate) {
tmpcategories.push(getFormatDate(idate))
idate = idate.setDate(idate.getDate() + 1)
idate = new Date(idate)
}
//否则从结果中去重并拼接categories
}else{
let tempckey = {};
resdata.map(function(item, index) {
if (item.text != undefined && !tempckey[item.text]) {
tmpcategories.push(item.text)
tempckey[item.text] = true
}
});
}
}
tmpData.categories = tmpcategories
}
//拼接series
let tempskey = {};
resdata.map(function(item, index) {
if (item.group != undefined && !tempskey[item.group]) {
tmpseries.push({ name: item.group, data: [] });
tempskey[item.group] = true;
}
});
//如果没有获取到分组名称(可能是带categories的数据，也可能是不带的饼图类)
if (tmpseries.length == 0) {
tmpseries = [{ name: '默认分组', data: [] }];
//如果是需要categories的图表类型
if(needCategories === true){
for (let j = 0; j < tmpcategories.length; j++) {
let seriesdata = 0;
for (let i = 0; i < resdata.length; i++) {
if (resdata[i].text == tmpcategories[j]) {
seriesdata = resdata[i].value;
}
}
tmpseries[0].data.push(seriesdata);
}
//如果是饼图类的图表类型
}else{
for (let i = 0; i < resdata.length; i++) {
tmpseries[0].data.push({"name": resdata[i].text,"value": resdata[i].value});
}
}
//如果有分组名
} else {
for (let k = 0; k < tmpseries.length; k++) {
//如果有categories
if (tmpcategories.length > 0) {
for (let j = 0; j < tmpcategories.length; j++) {
let seriesdata = 0;
for (let i = 0; i < resdata.length; i++) {
if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) {
seriesdata = resdata[i].value;
}
}
tmpseries[k].data.push(seriesdata);
}
//如果传了group而没有传text，即没有categories（正常情况下这种数据是不符合数据要求规范的）
} else {
for (let i = 0; i < resdata.length; i++) {
if (tmpseries[k].name == resdata[i].group) {
tmpseries[k].data.push(resdata[i].value);
}
}
}
}
}
tmpData.series = tmpseries
//拷贝一下chartData，为了opts变更后统一数据来源
this.drawData = deepCloneAssign({}, tmpData);
this.checkData(tmpData)
},
reloading() {
if(this.errorReload === false){
return;
}
this.showchart = false;
this.mixinDatacomErrorMessage = null;
if (this.collection !== '') {
this.mixinDatacomLoading = false;
this.onMixinDatacomPropsChange(true);
} else {
this.beforeInit();
}
},
checkData(anyData) {
let cid = this.cid
//复位opts或eopts
if(this.echarts === true){
cfe.option[cid] = deepCloneAssign({}, this.eopts);
cfe.option[cid].id = cid;
cfe.option[cid].type = this.type;
}else{
if (this.type && cfu.type.includes(this.type)) {
cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts);
cfu.option[cid].canvasId = cid;
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：props参数中type类型不正确';
}
}
//挂载categories和series
let newData = deepCloneAssign({}, anyData);
if (newData.series !== undefined && newData.series.length > 0) {
this.mixinDatacomErrorMessage = null;
if (this.echarts === true) {
cfe.option[cid].chartData = newData;
this.$nextTick(()=>{
this.init()
})
}else{
cfu.option[cid].categories = newData.categories;
cfu.option[cid].series = newData.series;
this.$nextTick(()=>{
this.init()
})
}
}
},
resizeHandler() {
//渲染防抖
let currTime = Date.now();
let lastDrawTime = this.lastDrawTime?this.lastDrawTime:currTime-3000;
let duration = currTime - lastDrawTime;
if (duration < 1000) return;
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('#ChartBoxId'+this.cid)
.boundingClientRect(data => {
this.showchart = true;
if (data.width > 0 && data.height > 0) {
if (data.width !== this.cWidth || data.height !== this.cHeight) {
this.checkData(this.drawData)
}
}
})
.exec();
},
getCloudData() {
if (this.mixinDatacomLoading == true) {
return;
}
this.mixinDatacomLoading = true;
this.mixinDatacomGet()
.then(res => {
this.mixinDatacomResData = res.result.data;
this.localdataInit(this.mixinDatacomResData);
})
.catch(err => {
this.mixinDatacomLoading = false;
this.showchart = false;
this.mixinDatacomErrorMessage = '请求错误：' + err;
});
},
onMixinDatacomPropsChange(needReset, changed) {
if (needReset == true && this.collection !== '') {
this.showchart = false;
this.mixinDatacomErrorMessage = null;
this._clearChart();
this.getCloudData();
}
},
_clearChart() {
let cid = this.cid
if (this.echarts !== true && cfu.option[cid] && cfu.option[cid].context) {
const ctx = cfu.option[cid].context;
if(typeof ctx === "object" && !!!cfu.option[cid].update){
ctx.clearRect(0, 0, this.cWidth*this.pixel, this.cHeight*this.pixel);
ctx.draw();
}
}
},
init() {
let cid = this.cid
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
.select('#ChartBoxId'+cid)
.boundingClientRect(data => {
if (data.width > 0 && data.height > 0) {
this.mixinDatacomLoading = false;
this.showchart = true;
this.lastDrawTime = Date.now();
this.cWidth = data.width;
this.cHeight = data.height;
if(this.echarts !== true){
cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.background;
cfu.option[cid].canvas2d = this.type2d;
cfu.option[cid].pixelRatio = this.pixel;
cfu.option[cid].animation = this.animation;
cfu.option[cid].width = data.width * this.pixel;
cfu.option[cid].height = data.height * this.pixel;
cfu.option[cid].onzoom = this.onzoom;
cfu.option[cid].ontap = this.ontap;
cfu.option[cid].ontouch = this.ontouch;
cfu.option[cid].onmouse = this.openmouse;
cfu.option[cid].onmovetip = this.onmovetip;
cfu.option[cid].tooltipShow = this.tooltipShow;
cfu.option[cid].tooltipFormat = this.tooltipFormat;
cfu.option[cid].tooltipCustom = this.tooltipCustom;
cfu.option[cid].inScrollView = this.inScrollView;
cfu.option[cid].lastDrawTime = this.lastDrawTime;
cfu.option[cid].tapLegend = this.tapLegend;
}
//如果是H5或者App端，采用renderjs渲染图表
if (this.inH5 || this.inApp) {
if (this.echarts == true) {
cfe.option[cid].ontap = this.ontap;
cfe.option[cid].onmouse = this.openmouse;
cfe.option[cid].tooltipShow = this.tooltipShow;
cfe.option[cid].tooltipFormat = this.tooltipFormat;
cfe.option[cid].tooltipCustom = this.tooltipCustom;
cfe.option[cid].lastDrawTime = this.lastDrawTime;
this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
} else {
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
}
//如果是小程序端，采用uCharts渲染
} else {
cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter)
this.mixinDatacomErrorMessage = null;
this.mixinDatacomLoading = false;
this.showchart = true;
this.$nextTick(()=>{
if (this.type2d === true) {
const query = uni.createSelectorQuery().in(this)
query
.select('#' + cid)
.fields({ node: true, size: true })
.exec(res => {
if (res[0]) {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
cfu.option[cid].context = ctx;
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this._updataUChart(cid)
}else{
canvas.width = data.width * this.pixel;
canvas.height = data.height * this.pixel;
canvas._width = data.width * this.pixel;
canvas._height = data.height * this.pixel;
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this._newChart(cid)
},100)
}
} else {
this.showchart = false;
this.mixinDatacomErrorMessage = '参数错误：开启2d模式后，未获取到dom节点，canvas-id:' + cid;
}
});
} else {
if(this.inAli){
cfu.option[cid].rotateLock = cfu.option[cid].rotate;
}
cfu.option[cid].context = uni.createCanvasContext(cid, this);
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this._updataUChart(cid)
}else{
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this._newChart(cid)
},100)
}
}
})
}
} else {
this.mixinDatacomLoading = false;
this.showchart = false;
if (this.reshow == true) {
this.mixinDatacomErrorMessage = '布局错误：未获取到父元素宽高尺寸！canvas-id:' + cid;
}
}
})
.exec();
},
saveImage(){
uni.canvasToTempFilePath({
canvasId: this.cid,
success: res=>{
//#ifdef H5
var a = document.createElement("a");
a.href = res.tempFilePath;
a.download = this.cid;
a.target = '_blank'
a.click();
//#endif
//#ifndef H5
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function () {
uni.showToast({
title: '保存成功',
duration: 2000
});
}
});
//#endif
}
},this);
},
getImage(){
if(this.type2d == false){
uni.canvasToTempFilePath({
canvasId: this.cid,
success: res=>{
this.emitMsg({name: 'getImage', params: {type:"getImage", base64: res.tempFilePath}});
}
},this);
}else{
const query = uni.createSelectorQuery().in(this)
query
.select('#' + this.cid)
.fields({ node: true, size: true })
.exec(res => {
if (res[0]) {
const canvas = res[0].node;
this.emitMsg({name: 'getImage', params: {type:"getImage", base64: canvas.toDataURL('image/png')}});
}
});
}
},
// #ifndef APP-VUE || H5
_newChart(cid) {
if (this.mixinDatacomLoading == true) {
return;
}
this.showchart = true;
cfu.instance[cid] = new uCharts(cfu.option[cid]);
cfu.instance[cid].addEventListener('renderComplete', () => {
this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid, opts: cfu.instance[cid].opts}});
cfu.instance[cid].delEventListener('renderComplete')
});
cfu.instance[cid].addEventListener('scrollLeft', () => {
this.emitMsg({name: 'scrollLeft', params: {type:"scrollLeft", scrollLeft: true, id: cid, opts: cfu.instance[cid].opts}});
});
cfu.instance[cid].addEventListener('scrollRight', () => {
this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});
});
},
_updataUChart(cid) {
cfu.instance[cid].updateData(cfu.option[cid])
},
_tooltipDefault(item, category, index, opts) {
if (category) {
let data = item.data
if(typeof item.data === "object"){
data = item.data.value
}
return category + ' ' + item.name + ':' + data;
} else {
if (item.properties && item.properties.name) {
return item.properties.name;
} else {
return item.name + ':' + item.data;
}
}
},
_showTooltip(e) {
let cid = this.cid
let tc = cfu.option[cid].tooltipCustom
if (tc && tc !== undefined && tc !== null) {
let offset = undefined;
if (tc.x >= 0 && tc.y >= 0) {
offset = { x: tc.x, y: tc.y + 10 };
}
cfu.instance[cid].showToolTip(e, {
index: tc.index,
offset: offset,
textList: tc.textList,
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this._tooltipDefault(item, category, index, opts);
}
}
});
} else {
cfu.instance[cid].showToolTip(e, {
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this._tooltipDefault(item, category, index, opts);
}
}
});
}
},
_tap(e,move) {
let cid = this.cid
let currentIndex = null;
let legendIndex = null;
if (this.inScrollView === true || this.inAli) {
let chartdom = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
.select('#ChartBoxId'+cid)
// #endif
// #ifdef MP-ALIPAY
.select('#'+this.cid)
// #endif
.boundingClientRect(data => {
e.changedTouches=[];
if (this.inAli) {
e.changedTouches.unshift({ x: e.detail.clientX - data.left, y: e.detail.clientY - data.top});
}else{
e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.pageScrollTop});
}
if(move){
if (this.tooltipShow === true) {
this._showTooltip(e);
}
}else{
currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
legendIndex = cfu.instance[cid].getLegendDataIndex(e);
if(this.tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if (this.tooltipShow === true) {
this._showTooltip(e);
}
this.emitMsg({name: 'getIndex', params: { type:"getIndex", event:{ x: e.detail.x - data.left, y: e.detail.y - data.top }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
}
})
.exec();
} else {
if(move){
if (this.tooltipShow === true) {
this._showTooltip(e);
}
}else{
e.changedTouches=[];
e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop });
currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
legendIndex = cfu.instance[cid].getLegendDataIndex(e);
if(this.tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if (this.tooltipShow === true) {
this._showTooltip(e);
}
this.emitMsg({name: 'getIndex', params: {type:"getIndex", event:{ x: e.detail.x, y: e.detail.y - e.currentTarget.offsetTop }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
}
}
},
_touchStart(e) {
let cid = this.cid
lastMoveTime=Date.now();
if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
cfu.instance[cid].scrollStart(e);
}
this.emitMsg({name:'getTouchStart', params:{type:"touchStart", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
},
_touchMove(e) {
let cid = this.cid
let currMoveTime = Date.now();
let duration = currMoveTime - lastMoveTime;
let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
if (duration < Math.floor(1000 / touchMoveLimit)) return;//每秒60帧
lastMoveTime = currMoveTime;
if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
cfu.instance[cid].scroll(e);
}
if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
this._tap(e,true)
}
if(this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e.changedTouches.length == 2){
cfu.instance[cid].dobuleZoom(e);
}
this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid, opts: cfu.instance[cid].opts}});
},
_touchEnd(e) {
let cid = this.cid
if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
cfu.instance[cid].scrollEnd(e);
}
this.emitMsg({name:'getTouchEnd', params:{type:"touchEnd", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
this._tap(e,true)
}
},
// #endif
_error(e) {
this.mixinDatacomErrorMessage = e.detail.errMsg;
},
emitMsg(msg) {
this.$emit(msg.name, msg.params);
},
getRenderType() {
//防止如果开启echarts且父元素为v-if的情况renderjs监听不到prop变化的问题
if(this.echarts===true && this.mixinDatacomLoading===false){
this.beforeInit()
}
},
toJSON(){
return this
}
}
};
</script>
<!-- #ifdef APP-VUE || H5 -->
<script module="rdcharts" lang="renderjs">
import uChartsRD from '../../js_sdk/u-charts/u-charts.js';
import cfu from '../../js_sdk/u-charts/config-ucharts.js';
import cfe from '../../js_sdk/u-charts/config-echarts.js';
var that = {};
var rootdom = null;
function rddeepCloneAssign(origin = {}, ...args) {
for (let i in args) {
for (let key in args[i]) {
if (args[i].hasOwnProperty(key)) {
origin[key] = args[i][key] && typeof args[i][key] === 'object' ? rddeepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
}
}
}
return origin;
}
function rdformatterAssign(args,formatter) {
for (let key in args) {
if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
rdformatterAssign(args[key],formatter)
}else if(key === 'format' && typeof args[key] === 'string'){
args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
}
}
return args;
}
export default {
data() {
return {
rid:null
}
},
mounted() {
rootdom = {top:0,left:0}
// #ifdef H5
let dm = document.querySelectorAll('uni-main')[0]
if(dm === undefined){
dm = document.querySelectorAll('uni-page-wrapper')[0]
}
rootdom = {top:dm.offsetTop,left:dm.offsetLeft}
// #endif
setTimeout(()=>{
if(this.rid === null){
this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')
}
},200)
},
destroyed(){
delete cfu.option[this.rid]
delete cfu.instance[this.rid]
delete cfe.option[this.rid]
delete cfe.instance[this.rid]
},
methods: {
//==============以下是ECharts的方法====================
ecinit(newVal, oldVal, owner, instance){
let cid = JSON.stringify(newVal.id)
this.rid = cid
that[cid] = this.$ownerInstance || instance
let eopts = JSON.parse(JSON.stringify(newVal))
let type = eopts.type;
//载入并覆盖默认配置
if (type && cfe.type.includes(type)) {
cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);
}else{
cfe.option[cid] = rddeepCloneAssign({}, eopts);
}
let newData = eopts.chartData;
if(newData){
//挂载categories和series
if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){
cfe.option[cid].xAxis.data = newData.categories
}
if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){
cfe.option[cid].yAxis.data = newData.categories
}
cfe.option[cid].series = []
for (var i = 0; i < newData.series.length; i++) {
cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {}
let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i])
cfe.option[cid].series.push(Template)
}
}
if (typeof window.echarts === 'object') {
this.newEChart()
}else{
const script = document.createElement('script')
// #ifdef APP-VUE
script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js'
// #endif
// #ifdef H5
const rooturl = window.location.origin
const directory = instance.getDataset().directory
script.src = rooturl + directory + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js'
// #endif
script.onload = this.newEChart
document.head.appendChild(script)
}
},
ecresize(newVal, oldVal, owner, instance){
if(cfe.instance[this.rid]){
cfe.instance[this.rid].resize()
}
},
newEChart(){
let cid = this.rid
if(cfe.instance[cid] === undefined){
cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
//ontap开启后才触发click事件
if(cfe.option[cid].ontap === true){
cfe.instance[cid].on('click', resdata => {
let event = JSON.parse(JSON.stringify({
x:resdata.event.offsetX,y:resdata.event.offsetY
}))
that[cid].callMethod('emitMsg',{name:"getIndex", params:{type:"getIndex", event:event, currentIndex:resdata.dataIndex, value:resdata.data, seriesName: resdata.seriesName,id:cid}})
})
// 增加ECharts的highlight消息，实现按下移动返回索引功能。add by onefish 创建于 2021-12-11 09:50
cfe.instance[cid].on('highlight', resdata => {
that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})
})
}
this.updataEChart(cid,cfe.option[cid])
}else{
this.updataEChart(cid,cfe.option[cid])
}
},
updataEChart(cid,option){
//替换option内format属性为formatter的预定义方法
option = rdformatterAssign(option,cfe.formatter)
if(option.tooltip){
option.tooltip.show = option.tooltipShow?true:false;
option.tooltip.position = this.tooltipPosition()
//tooltipFormat方法，替换组件的tooltipFormat为config-echarts.js内对应的方法
if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) {
option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[option.tooltipFormat]
}
}
// 颜色渐变添加的方法
if (option.series) {
for (let i in option.series) {
let linearGradient = option.series[i].linearGradient
if (linearGradient) {
option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],linearGradient[1],linearGradient[2],linearGradient[3],linearGradient[4])
}
}
}
cfe.instance[cid].setOption(option, option.notMerge)
cfe.instance[cid].on('finished', function(){
that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}})
if(cfe.instance[cid]){
cfe.instance[cid].off('finished')
}
});
//修复init初始化实例获取宽高不正确问题
if(
typeof that[cid].$el.children[0].clientWidth != 'undefined' &&
(
Math.abs( that[cid].$el.children[0].clientWidth - cfe.instance[cid].getWidth() )>3 ||
Math.abs( that[cid].$el.children[0].clientHeight - cfe.instance[cid].getHeight() )>3
)
){this.ecresize();}
},
tooltipPosition(){
return (point, params, dom, rect, size) => {
let x = point[0]
let y = point[1]
let viewWidth = size.viewSize[0]
let viewHeight = size.viewSize[1]
let boxWidth = size.contentSize[0]
let boxHeight = size.contentSize[1]
let posX = x + 30
let posY = y + 30
if (posX + boxWidth > viewWidth) {
posX = x - boxWidth - 30
}
if (posY + boxHeight > viewHeight) {
posY = y - boxHeight - 30
}
return [posX, posY]
}
},
//==============以下是uCharts的方法====================
ucinit(newVal, oldVal, owner, instance){
if(JSON.stringify(newVal) == JSON.stringify(oldVal)){
return;
}
if(!newVal.canvasId){
return;
}
let cid = JSON.parse(JSON.stringify(newVal.canvasId))
this.rid = cid
that[cid] = this.$ownerInstance || instance
cfu.option[cid] = JSON.parse(JSON.stringify(newVal))
cfu.option[cid] = rdformatterAssign(cfu.option[cid],cfu.formatter)
let canvasdom = document.getElementById(cid)
if(canvasdom && canvasdom.children[0]){
cfu.option[cid].context = canvasdom.children[0].getContext("2d")
if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
this.updataUChart()
}else{
setTimeout(()=>{
cfu.option[cid].context.restore();
cfu.option[cid].context.save();
this.newUChart()
},100)
}
}
},
newUChart() {
let cid = this.rid
cfu.instance[cid] = new uChartsRD(cfu.option[cid])
cfu.instance[cid].addEventListener('renderComplete', () => {
that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid, opts: cfu.instance[cid].opts}})
cfu.instance[cid].delEventListener('renderComplete')
});
cfu.instance[cid].addEventListener('scrollLeft', () => {
that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid, opts: cfu.instance[cid].opts}})
});
cfu.instance[cid].addEventListener('scrollRight', () => {
that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})
});
},
updataUChart() {
let cid = this.rid
cfu.instance[cid].updateData(cfu.option[cid])
},
tooltipDefault(item, category, index, opts) {
if (category) {
let data = item.data
if(typeof item.data === "object"){
data = item.data.value
}
return category + ' ' + item.name + ':' + data;
} else {
if (item.properties && item.properties.name) {
return item.properties.name ;
} else {
return item.name + ':' + item.data;
}
}
},
showTooltip(e,cid) {
let tc = cfu.option[cid].tooltipCustom
if (tc && tc !== undefined && tc !== null) {
let offset = undefined;
if (tc.x >= 0 && tc.y >= 0) {
offset = { x: tc.x, y: tc.y + 10 };
}
cfu.instance[cid].showToolTip(e, {
index: tc.index,
offset: offset,
textList: tc.textList,
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this.tooltipDefault(item, category, index, opts);
}
}
});
} else {
cfu.instance[cid].showToolTip(e, {
formatter: (item, category, index, opts) => {
if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
} else {
return this.tooltipDefault(item, category, index, opts);
}
}
});
}
},
tap(e) {
let cid = this.rid
let ontap = cfu.option[cid].ontap
let tooltipShow = cfu.option[cid].tooltipShow
let tapLegend = cfu.option[cid].tapLegend
if(ontap == false) return;
let currentIndex=null
let legendIndex=null
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
if(e.detail.x){//tap或者click的事件
tmpe = { x: e.detail.x - rchartdom.left, y:e.detail.y - rchartdom.top + rootdom.top}
}else{//mouse的事件
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
currentIndex=cfu.instance[cid].getCurrentDataIndex(e)
legendIndex=cfu.instance[cid].getLegendDataIndex(e)
if(tapLegend === true){
cfu.instance[cid].touchLegend(e);
}
if(tooltipShow==true){
this.showTooltip(e,cid)
}
that[cid].callMethod('emitMsg',{name:"getIndex",params:{type:"getIndex",event:tmpe,currentIndex:currentIndex,legendIndex:legendIndex,id:cid, opts: cfu.instance[cid].opts}})
},
touchStart(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
cfu.instance[cid].scrollStart(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
touchMove(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
cfu.instance[cid].scroll(e);
}
if(cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid].onmovetip === true){
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = { x: e.changedTouches[0].clientX - rchartdom.left, y:e.changedTouches[0].clientY - rchartdom.top + rootdom.top}
e.changedTouches.unshift(tmpe)
if(cfu.option[cid].tooltipShow === true){
this.showTooltip(e,cid)
}
}
if(ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e.changedTouches.length == 2){
cfu.instance[cid].dobuleZoom(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
touchEnd(e) {
let cid = this.rid
let ontouch = cfu.option[cid].ontouch
if(ontouch == false) return;
if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
cfu.instance[cid].scrollEnd(e);
}
that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
},
mouseDown(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
cfu.instance[cid].scrollStart(e)
cfu.option[cid].mousedown=true;
that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
mouseMove(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
let tooltipShow = cfu.option[cid].tooltipShow
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
if(cfu.option[cid].mousedown){
cfu.instance[cid].scroll(e)
that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"mouseMove",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
}else if(cfu.instance[cid]){
if(tooltipShow==true){
this.showTooltip(e,cid)
}
}
},
mouseUp(e) {
let cid = this.rid
let onmouse = cfu.option[cid].onmouse
if(onmouse == false) return;
let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
let tmpe = {}
tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
e.changedTouches = [];
e.changedTouches.unshift(tmpe)
cfu.instance[cid].scrollEnd(e)
cfu.option[cid].mousedown=false;
that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
},
}
}
</script>
<!-- #endif -->
<style scoped>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex: 1;
justify-content: center;
align-items: center;
}
</style>
uni_modules/qiun-data-charts/components/qiun-error/qiun-error.vue 0 → 100644
<template>
<view class="chartsview">
<view class="charts-error"></view>
<view class="charts-font">{{errorMessage==null?'请点击重试':errorMessage}}</view>
</view>
</template>
<script>
export default {
name: 'qiun-error',
props: {
errorMessage: {
type: String,
default: null
},
},
data() {
return {
};
},
}
</script>
<style>
.chartsview {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
justify-content: center;
align-items: center;
}
.charts-font{
font-size: 14px;
color: #CCCCCC;
margin-top: 10px;
}
.charts-error{
width: 128px;
height: 128px;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAUz0lEQVR4Xu1de3Bc1X3+zmp3jYVWfkPAgCWwY8zLEglNQCSW0yT9o2SQaDKdNulUykwfM+k09p+J3ImYIPJXi9yZzDSZZiwyaZuZBCwnNG1DMogEmUAAy7xs/MAyNhCMjWWtsK1deU/n23OvtLu6j3Pv3t29d71nxjOSde455/5+3/m9z7kCjRY4BR7eK7fkcmhrasLT37hbTAY+QYADigDHagwFYGhc7gZwHMAUgG4hMPzNe8RoWInTAECAnHl4r+yREt0DXWIbhx3cJ5fHP8TYjntFR4DTBDqUIwBmMrJDCtyPHDoQw0Q8jkeXinCLtECp43Gwh56R22IxTBbu+KFxOTbQJbo9DlW17rYASGdlNySeKl2JADpbkmKiait0mWhoXHZkmzE52CkocmvavvOsbMvl8MhAl+jlQrg2CQzu6BI9NV2Yw+T2AJiVo+DuL2kSeLQ1KfrC8kLcYbkYBv/pbjEWhjUNjUvSpk9KSAicm2tGXxjAaUcbewBkJAm6xeLBp1PJ2os06ttcDl8H0CEEaGnvGegSg2EAQZTW4B0AEntSS2ov0mhgJc5jmwT6IDEWi2E0zNZ2WEFhC4CZjCRxH7GwAfpbkmIkLC9EFQBg20BXeOySsNBGZx2OXkB6Vg5CgAbMZgD7BTDSkhTDOgM3+kSDAr7iANNz8n4hQRdxojUu9kTjVRurtKKAJwBIKZfPZPOuYWFgY6wlgV4hau+GNVjsnQKeAJDOSIp/Wt6lbSKeQG8jSOSdAbV+wisA7FxDSGAqBmwNS5DIiGIucyNwKiGedutTz3/3BgCb4JBJoGqDIJ2VW4REmxRog0S3lGgT/NlfY3RzCgJjQmJSCkxeDuDwBgCb8HAhvQkCIdCbSgQfmSPDmWGDzHsm1UqwjBEUAMbqERCeAEBGz2RknwR2uW0yAZQdL6DR+WEW90syXLmjtW8So0Jg9MoE9tSD4esZANUAAd1M5NAjGOULaaOkAzCKGEaj7Ar7AoBHEGxrSYqdOnxMZ+W3ZA59ZehxnWkC7yMlJkUMIy1x7IyaVPANAAMEHTlgTACO1rYERlqTot+J8nbp58C5VcEBDftnOEpAKAsAgYPAPgNZQbYFP3QeCAybJ/Bg2CVC2QDwCoJUAtudiJKuExCQLoZbPKirAoOHovuIThVByuXii2jE/C9I2TaXBYsfmThyahMtCWy1A4ERbj7rvvRI9aCa3F7pINm3n5XdXgtjFgHAYCQrW4v8bBo6MYFep5cwmEefuSwQpDNSRoq9+osdrqRaGBqXMhfDVi8gWASAdEbuswuyGCKNSLatBygXBHUqAQohMmHESAKrqzSro4TIS2yOq10dVQQAuyKQUoC7BXnIxHQWwwL4ay/qIM/8DHaFJuijv7M99QzaNmAx6hzQFsvhKSmxvakJo7oHUooA4MUA0wHBTDYfQnVUB6bFnLc1JHqiFgPwxPnSzhKjLUn0B+UpsDoqFkOfLvO5HN8AMN5lOJUU2+2IMD0ne0QOtCcq0k7OANe1VGToag7qaBRXeiFFAJjOyBENsV20Jqcgj2FQHgvyJWYvAQfPAJuvAv7198ADm4DMHJBKAmuag5ypemPpGNiVWk2pDcCDDDQCPTU7EOgmjrxMRgA8dgBYmwJOXwBuWgH87m3gz26OLgDy6q9G9RSLvIAymFZUGsaCjJzE7qB1+vvngXRGQebG5QB/P30eaF2iQBHllk8wxdDfGq/eYVLLQJBfEOQNOpk3/Bg86hbA8iAZwt2/a78asX8zsKRJ/fzYQeDttFIHUbcJqi0JnM4FaOX9g2Sw7lgHTgPTs0DHRxTjT5wDtqzTfTr8/aoJArfTwX055P1519q6apGV4v8/XlU6nzv/vo8CvzwK3L0W2LS6Wquo/DzVAoFrMiivyzVSvpUnycIMVAUU///2kgIC9b+pDqq5jirMVXEX0RUAfMkwgoDrMoFQBUbUcoqxVFJsrdQCtAAQZhBUijChGlfiwdSSypx81gaAAQLLA6OhIlaNF2MGqriMm1cFqJoEtlai0lobAIzqZbPYF7RrV2N+BT79L99c8Eh+dzI474RGYSqB9qDyBuaLawMgnZE8Exjau24C56TPAZ8+vsD0594GPrHW50DWjwVuD2gBwDgm/q1AX6VOB/v5YeDWNerlXnsf+MKGYF/ULQvrdTZXAFQioeN1kVHqTxuAgSo2xiWCdk+DVgWuAEjPyt31XqARJYAZa92ZSqq7CMttjgCoh1r9cgkU1ueDuq7PEQDTs/JY0Nm8sBI0gusKxCCMZDIogsyqzJIDiA3YAqCx+yvDs4BHLVsKBFoPEPDLNYbToUCZUsASAFHY/SfTCxWtq5qBK4ziEB2a1VmfsqTAIgBUupLXL/Evshj0NNCaBM7NAr89sTDSp64HOj/id+ToP1eOR7AYAD4qg6tBwufeARhabV8BfPJaFWxZEgeSMWDTmstaApD8vuMCRQAI47Gs37wFrG4GrksBR882mG212VhW3rpEtPvZiL6OhvmZyOszFPm7D6qqX+76L6xfGIH/l7mkVMGNKy773Z8njIyh1081cfHBkJAEfgqZv2kV8Cmj4HP/H4ADZ1RBqNmYbfvEtV7hVX/9/X7HYR4AYUr6PPmmYjSZ/7kblRT47yOK8Uyu8DxA6xXqHADVw2XsARQhuSWBFV7rBeYBoHsyuNJ7582zwBNHgNVLgb+8TTH/8YOq/o+7ffPVCwynpAiC+W+cUfOcnwOuvlIdO4ti86MG5gGQdrkFtFoE2fUykJ4F+u4AknHgx6+pnf/ZduCW1QD9f3oDPA/A5tcFpA3x8ingxXcVuPJ61Dgt27MRuKG1Wm8c6DyevYE8AMJk/f/nq8BNK5VeN10/k8mvnwZ+ZRw1pfjnYdCOq1VZuJd2/Bzwv0cXGL9hpdr1PGNIgMUF8Oe3AquWehk1FH0nUknR6WUleQCENe37vZeUFOi/AyhUDbQL/JwE5q4ngI4YNxBxl7NiZ5kBoCePAb9/R4mBq64EejcGX9DhhTl++sYTaPdya7sCgPoySM1LvujzM8Dzd3cuMNy08ikZeBqYqoE7njv1t28p3c3f/+hapSLs2jszAI1Luo40JMn4j64s7v3PzympQNeSgLtnLfDxiHkYXkvGFAA0r2Yjsf3sPF0km/r/H+9aEP8P8ORPEhh5ecErIPNpGLJxF7/3oWLcfesV80rboQ+UyDf7f3HTYuPx+XeAX00Ct68BPn0D8O8TasyvbgZakrpvEIp+nuyAPACmM/KsW7k3b+N4/ABA5lSq8cIH0/o39f9f3KoYQYab0uDnR4BjZ4Gv3LYAgB+9qiQB+xe2X0+q4kw22hL8V9roTXz3BTXP1z6mVAJzDfxHqUIDNELN02f9hI7/T6v7zSklbml8MfFCXzzoRp1Pv57n/Wj5M/RrJnn2/QG4rlVJIPM4+DfvWVjB9/YpFfFJIzBEZv7iMHAirUT+59qBO2zcu7zuf1ftfrOKtxAUVElBF3cGTTtzPBaNtiaFhRy0nlHoGIDc/a+fUlez0Dq/ZY26kiXoRoCR0G5WvRkoMnf0/xwFXnwPiAFINgE3LAOmLwKnjPEoKejfW7Xj0+q0Mef92seLVQNLvF95H/iTm4CNJfZC0O8e5HheAkJCNwBkHsv++zuDXKq/sSgd/uu1xf47gfnWOR5mVeNe1Qx8adOClW8l+n8woQzDL9682Cik7fDTg8D1KaD3Zn9rrdRTlHA0mmmvLJJOHopERFg8AK+EIgiomo6dAy7OKdXwNx3AiRngRy8DOQl0XgN8Zp19tJDMJZMLRX/pOh7eqwhMNRCmZtpkVreiePEECADLj0SH6WWd1kIgPP6G2sVty4Av36pE/+43gDMX1K6+b8NiEJhGHqXEV263Bwm9AY731Q6gJVF7qnDnT7ynbCS6zDx8QpXJgNi8JPBwmljouoC1f3X7FdDHH30DmMsBG1YosU+m0Vg8exG4pkV5B2begCFg5htIMCf7gDOadsCXbgGusbEjqkkbMp+iv7QR5POG+eUGADL/rWmgSQBzEui4CvjT9cBUBnjikPqbCYJzF4EfGBdNMW5g5xmYBKY3cOgMsGEVcClXTVY7z+WkArxUCIkoFIA6keLXx4DXTiuDb2ubihdkcsCnDZ+fDPzZIRX+pYvJRBPF6GfbVPRQt124FE4AULJZBOe0YwFUAZG9mv2Fd4G9J4tdOEb0fnNCVQxtuQHoug4gCH5yADgxrdjtZPRZeQqvnFISgEmiMDV6ZjbueP0DgBm9PYes9Tizhr84mr98Ol9Qwps66OszZOyF+WS2GSQKiw2gCcD6BkBMABT9DNLY6XFKgicnVWCIuQR6BMwb0Ojz0hhipg3x5dsilR6ubwA0xwGCgDvaLsJHJtPPP/yBKvQg862SQG5gYByArZI5ELc1+Pi7PgCmM5JfuArNRZBuL0uGMkdg5dsXPktwcPfS4PMq9s1xzDAxS9KZlYxQ0wdAlOIAFOPU5Wxm1s6KKfTzqbvLYT7HNWMANCZZixihVp8AYHSPlrxdWpcMMiN8/Pmua1QW0E+LajbQeNf6A4BZ1MGw5z98bDFLybAnDqvYPptOkMcJGBGuB+BraReFRCYU/OPXgVMfWjOW+p4Gn1nu5RbedZMIHOe7L6pevJa+EqlvtzWU9XdPoeCQ1AM6vbCp+0t3P3c96wJZzMHG6l4WdJR7VuCR54ELc6q4xEu0sCymBfiwp2ygbj1AgOvzPBQjcU8dL9bpNPQops1dT7sgCGYxScSxGURa2+rubXh+mWo84KkeICu7IcFbQEPb6Pqx6mdpXBV9HvlgoRiktLS7nJcw9X4ipuIM9CJWXqHSxVFqXkrDRZgOhdgROZsDvv8ScMnMWgiV9uWOXxfACR6qErp8BJpVY7KF2UW3UrUwgEQC51qTQrtiU1UFz8pJIRDqj67MzAGPva5EPsO7zPkHwXyO98NX1IeomE4myFgnQHAxysiQMkPBLIZlsWoEmrYLyHfxdC6g1i/PxfJkD9O/bOWIf/OaGep7Nur8eEwBoNCFpHQw6wb/9s7yDcwq0FDbBVwAQAQ8gULCUVSPn1y4J4BlX+uWqfIv85iXFaHN4g7uaJ4INr84wtLzrAReeFs99Ve3Fx8O/ZfnVd3hXdeqbxOFuXnxAOYBENaLoZwITWnA3ct6APN0L/tTbFOEXxFXP3OnT11UI5HxhY2HPnjYhCqFpeY8+8BWGGnk89/fB9AOYWPRCXMLYW1eDMB5APCHqBaGEAisDWCI+PDZ4ttDSplEYKxfody79uUKKOapI55J4Glg2gIsJqF6IYAIMvZh/2MGQG5bA3ymLXgI0IATAj3ml0G8VmxLieOtS4SnlYXufoByydoUUwdHeUhkdk6dLqbzwCNndO8KG5nO8DGZblYHs2bwJweLgWQGmFgbyDgBG08OXx+AB1K0IAv/3ctHPP1cExO6G0LKBYDu82Q+q4a52ynSWTlUGEFkKpht+ZJiu4L/T8/g8+1Ac6JY/ejObdcvlRSWRWc8vSUlRt3S9mXdEKJzRrDcFwzL86ynZ7qYzW+tAA3Knx5Qhaa0GcotrHQ706f16T6J0ZYk+r3cE1SEuHRGTgDYHBZGVWIdhcz3WhlcuJ7CdDGDUn/crozJcprbDtYCAeDpY5PFAIiYO+iV2Nz15udcyk0Xc+7CqiPeKPLAxvJAoPO5WOOr7KMugTttEBQBoJ7VQCHzGS9wqiX0AiyCwKxBqBYIjPA9v9LuJK0n4gn0ul0XE5m7gr0wpbSveYqmnDF0nw3qWhm3gI4OCHQkyiIA6NwXoEuMsPSjH8/IX2ausiuiIcjawXJtAXOVgYBAYjKVRKedYWj3vYDQJ4cqy8rwjO4GAq502uWGdyfjsvHFkPDw2n4lAoOphHjQaalOIHACkSUAqF/SWUy6BR6iQLt6WaMERlqTot8rCBheTiTQYWcM2h539BKCrBcih/09dEBAvuWAYW5eMh8x9JnXyBu5hS359xQYa4ljp+N51ygUioSdaUGvjyBIJbDdLdpHKV7YxyqxxNyBIwDq0SMImiE1Gk870GOuz+oEGN1E1xPvUTo6ViNm1GpaTyCwC/O7AoChRwnsq9VbNuZ1pIA2CCy9BIk9rgDg9OmMHAbw9QYzQkkBLRAYkcNRAMoIBPYLoE8LAAYI6j5TGEr26i3KUyFo4ZDaANBMReott9ErUAq41RI4TaYNAA4ShWNkgVI2QoPZVRO5vYItAIbGZYcQWJZZiv2DncIoh8x/XCLSN4u6ESSqfw8UAEPjeaOvj1+kBLCuqQmd37hb8Gfz+0Juueio0jGS6/ZTDGq+6CIJMLhPLk+cx9lYDO1k+kPPyBEhMDnQJQbNh1g4ks1iopErqDhe9scT6JnLYBgC91vN5hbrd1vhIgB851nZlsvhWLYZKyj6DWmAgS6xrXCwhlHoRtry/s4a/1QSHWY4l6FcKbCtcNOxT0ygpyUp6KH5apY2gLHrt1AFCIHOWAwdpgoonKURKvZFc9eHuKtjQHcpY/Mle3NoQw7dsgkTfr4VXDq5rRH48F7Zk8uhrakJo1bMNwdqZA1d+empgx3zPQ3iobMnN9Bu3AYIPFDcoWu1mc+lBAIADsQDpshhpGEY+gNDLZgfCADoNSQvqPLkTSuxfuNq7IwJhODTCv4YUYunsjkc3f8+Bo7M4v8KYy5cixmPKVxXaWymnDWXLQGGxiVjAmaCoZy1XPbPSon9O+4VHSYhaIdJid2lhJESUzvu1f80nBNhywYA3cY5oOhI8uqlaLk+hfWXPUc1CHAijSOnL2CGXePAZKHBzd0PgEG50jZR6pZrTGXZpWwA+J248Vw4KNAAQDj4ULNVBA6Abz8ru8Ul9SVyITCVbUY/DRsjxLxLSmhdYSYEHh3oEiMch2rm0iXssqHSxI57xfZKU/ChZ+QjAOb1c6XnM+g3T4NKzRc4AIbGZR8TSeaCYzH0Ua8ZIeY8QzXbSBEAcvlSZyvwBKYPndb10LjkBQ1a4NV8P51u8zTQ6eynT+AA8LOIxjO1o0ADALWjfShmjhwACgNPoaCgsnWOO+VLwrJOq3VEDgCGLrbMjdeK0EEGZqr9DpEDgFXgqdpEK50vlsPUQJf/nHwt1///89bqDjCPWPAAAAAASUVORK5CYII=");
background-position: center;
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/loading1.vue 0 → 100644
<template>
<view class="container loading1">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading1',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading1 .shape1 {
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
animation: animation1shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
@keyframes animation1shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, 16px);
transform: translate(16px, 16px);
}
}
.loading1 .shape2 {
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
animation: animation1shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
@keyframes animation1shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, 16px);
transform: translate(-16px, 16px);
}
}
.loading1 .shape3 {
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
animation: animation1shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
@keyframes animation1shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(16px, -16px);
transform: translate(16px, -16px);
}
}
.loading1 .shape4 {
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
animation: animation1shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
@keyframes animation1shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-16px, -16px);
transform: translate(-16px, -16px);
}
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/loading2.vue 0 → 100644
<template>
<view class="container loading2">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading2',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading2 {
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
}
.container.loading2 .shape {
border-radius: 5px;
}
.container.loading2{
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading2 .shape1 {
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
animation: animation2shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
@keyframes animation2shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
}
.loading2 .shape2 {
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
animation: animation2shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
@keyframes animation2shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, 20px);
transform: translate(-20px, 20px);
}
}
.loading2 .shape3 {
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
animation: animation2shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
@keyframes animation2shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(20px, -20px);
transform: translate(20px, -20px);
}
}
.loading2 .shape4 {
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
animation: animation2shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
@keyframes animation2shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-20px, -20px);
transform: translate(-20px, -20px);
}
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/loading3.vue 0 → 100644
<template>
<view class="container loading3">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading3',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading3 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading3 .shape1 {
border-top-left-radius: 10px;
}
.container.loading3 .shape2 {
border-top-right-radius: 10px;
}
.container.loading3 .shape3 {
border-bottom-left-radius: 10px;
}
.container.loading3 .shape4 {
border-bottom-right-radius: 10px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading3 .shape1 {
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
animation: animation3shape1 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
@keyframes animation3shape1 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, 5px);
transform: translate(5px, 5px);
}
}
.loading3 .shape2 {
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
animation: animation3shape2 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
@keyframes animation3shape2 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, 5px);
transform: translate(-5px, 5px);
}
}
.loading3 .shape3 {
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
animation: animation3shape3 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
@keyframes animation3shape3 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(5px, -5px);
transform: translate(5px, -5px);
}
}
.loading3 .shape4 {
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
animation: animation3shape4 0.5s ease 0s infinite alternate;
}
@-webkit-keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
@keyframes animation3shape4 {
from {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
to {
-webkit-transform: translate(-5px, -5px);
transform: translate(-5px, -5px);
}
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/loading4.vue 0 → 100644
<template>
<view class="container loading5">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading5',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading5 .shape {
width: 15px;
height: 15px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading5 .shape1 {
animation: animation5shape1 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
@keyframes animation5shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
50% {
-webkit-transform: translate(15px, 15px);
transform: translate(15px, 15px);
}
75% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
}
.loading5 .shape2 {
animation: animation5shape2 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
@keyframes animation5shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
50% {
-webkit-transform: translate(-15px, 15px);
transform: translate(-15px, 15px);
}
75% {
-webkit-transform: translate(0, 15px);
transform: translate(0, 15px);
}
}
.loading5 .shape3 {
animation: animation5shape3 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
@keyframes animation5shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(15px, 0);
transform: translate(15px, 0);
}
50% {
-webkit-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
75% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
}
.loading5 .shape4 {
animation: animation5shape4 2s ease 0s infinite reverse;
}
@-webkit-keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
@keyframes animation5shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -15px);
transform: translate(0, -15px);
}
50% {
-webkit-transform: translate(-15px, -15px);
transform: translate(-15px, -15px);
}
75% {
-webkit-transform: translate(-15px, 0);
transform: translate(-15px, 0);
}
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/loading5.vue 0 → 100644
<template>
<view class="container loading6">
<view class="shape shape1"></view>
<view class="shape shape2"></view>
<view class="shape shape3"></view>
<view class="shape shape4"></view>
</view>
</template>
<script>
export default {
name: 'loading6',
data() {
return {
};
}
}
</script>
<style scoped="true">
.container {
width: 30px;
height: 30px;
position: relative;
}
.container.loading6 {
-webkit-animation: rotation 1s infinite;
animation: rotation 1s infinite;
}
.container.loading6 .shape {
width: 12px;
height: 12px;
border-radius: 2px;
}
.container .shape {
position: absolute;
width: 10px;
height: 10px;
border-radius: 1px;
}
.container .shape.shape1 {
left: 0;
background-color: #1890FF;
}
.container .shape.shape2 {
right: 0;
background-color: #91CB74;
}
.container .shape.shape3 {
bottom: 0;
background-color: #FAC858;
}
.container .shape.shape4 {
bottom: 0;
right: 0;
background-color: #EE6666;
}
.loading6 .shape1 {
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
animation: animation6shape1 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
@keyframes animation6shape1 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
50% {
-webkit-transform: translate(18px, 18px);
transform: translate(18px, 18px);
}
75% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
}
.loading6 .shape2 {
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
animation: animation6shape2 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
@keyframes animation6shape2 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
50% {
-webkit-transform: translate(-18px, 18px);
transform: translate(-18px, 18px);
}
75% {
-webkit-transform: translate(0, 18px);
transform: translate(0, 18px);
}
}
.loading6 .shape3 {
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
animation: animation6shape3 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
@keyframes animation6shape3 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(18px, 0);
transform: translate(18px, 0);
}
50% {
-webkit-transform: translate(18px, -18px);
transform: translate(18px, -18px);
}
75% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
}
.loading6 .shape4 {
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
animation: animation6shape4 2s linear 0s infinite normal;
}
@-webkit-keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
@keyframes animation6shape4 {
0% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
25% {
-webkit-transform: translate(0, -18px);
transform: translate(0, -18px);
}
50% {
-webkit-transform: translate(-18px, -18px);
transform: translate(-18px, -18px);
}
75% {
-webkit-transform: translate(-18px, 0);
transform: translate(-18px, 0);
}
}
</style>
uni_modules/qiun-data-charts/components/qiun-loading/qiun-loading.vue 0 → 100644
<template>
<view>
<Loading1 v-if="loadingType==1"/>
<Loading2 v-if="loadingType==2"/>
<Loading3 v-if="loadingType==3"/>
<Loading4 v-if="loadingType==4"/>
<Loading5 v-if="loadingType==5"/>
</view>
</template>
<script>
import Loading1 from "./loading1.vue";
import Loading2 from "./loading2.vue";
import Loading3 from "./loading3.vue";
import Loading4 from "./loading4.vue";
import Loading5 from "./loading5.vue";
export default {
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
name: 'qiun-loading',
props: {
loadingType: {
type: Number,
default: 2
},
},
data() {
return {
};
},
}
</script>
<style>
</style>
uni_modules/qiun-data-charts/js_sdk/u-charts/config-echarts.js 0 → 100644
/*
* uCharts®
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 通用配置项
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
const cfe = {
//demotype为自定义图表类型
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
//instance为实例变量承载属性，option为eopts承载属性，不要删除
"instance": {},
"option": {},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{
"tooltipDemo1":function(res){
let result = ''
for (let i in res) {
if (i == 0) {
result += res[i].axisValueLabel + '年销售额'
}
let value = '--'
if (res[i].data !== null) {
value = res[i].data
}
// #ifdef H5
result += '\n' + res[i].seriesName + '：' + value + ' 万元'
// #endif
// #ifdef APP-PLUS
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
// #endif
}
return result;
},
legendFormat:function(name){
return "自定义图例+"+name;
},
yAxisFormatDemo:function (value, index) {
return value + '元';
},
seriesFormatDemo:function(res){
return res.name + '年' + res.value + '元';
}
},
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
"demotype":{
"color": color,
//在这里填写echarts的option即可
},
//下面是自定义配置，请添加项目所需的通用配置
"column": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'bar',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"line": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"barwidth": 20,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"area": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'axis'
},
"grid": {
"top": 30,
"bottom": 50,
"right": 15,
"left": 40
},
"legend": {
"bottom": 'left',
},
"toolbox": {
"show": false,
},
"xAxis": {
"type": 'category',
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
"boundaryGap": true,
"data": []
},
"yAxis": {
"type": 'value',
"axisTick": {
"show": false,
},
"axisLabel": {
"color": '#666666'
},
"axisLine": {
"lineStyle": {
"color": '#CCCCCC'
}
},
},
"seriesTemplate": {
"name": '',
"type": 'line',
"data": [],
"areaStyle": {},
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"pie": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": '50%',
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
},
},
"ring": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"grid": {
"top": 40,
"bottom": 30,
"right": 15,
"left": 15
},
"legend": {
"bottom": 'left',
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": ['40%', '70%'],
"avoidLabelOverlap": false,
"label": {
"show": true,
"color": "#666666",
"position": 'top',
},
"labelLine": {
"show": true
},
},
},
"rose": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item'
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'pie',
"data": [],
"radius": "55%",
"center": ['50%', '50%'],
"roseType": 'area',
},
},
"funnel": {
"color": color,
"title": {
"text": ''
},
"tooltip": {
"trigger": 'item',
"formatter": "{b} : {c}%"
},
"legend": {
"top": 'bottom'
},
"seriesTemplate": {
"name": '',
"type": 'funnel',
"left": '10%',
"top": 60,
"bottom": 60,
"width": '80%',
"min": 0,
"max": 100,
"minSize": '0%',
"maxSize": '100%',
"sort": 'descending',
"gap": 2,
"label": {
"show": true,
"position": 'inside'
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": 'solid'
}
},
"itemStyle": {
"bordercolor": '#fff',
"borderwidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [],
},
},
"gauge": {
"color": color,
"tooltip": {
"formatter": '{a} <br/>{b} : {c}%'
},
"seriesTemplate": {
"name": '业务指标',
"type": 'gauge',
"detail": {"formatter": '{value}%'},
"data": [{"value": 50, "name": '完成率'}]
},
},
"candle": {
"xAxis": {
"data": []
},
"yAxis": {},
"color": color,
"title": {
"text": ''
},
"dataZoom": [{
"type": 'inside',
"xAxisIndex": [0, 1],
"start": 10,
"end": 100
},
{
"show": true,
"xAxisIndex": [0, 1],
"type": 'slider',
"bottom": 10,
"start": 10,
"end": 100
}
],
"seriesTemplate": {
"name": '',
"type": 'k',
"data": [],
},
}
}
export default cfe;
\ No newline at end of file
uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 0 → 100644
/*
* uCharts®
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
* 复制使用请保留本段注释，感谢支持开源！
*
* uCharts®官方网站
* https://www.uCharts.cn
*
* 开源地址:
* https://gitee.com/uCharts/uCharts
*
* uni-app插件市场地址：
* http://ext.dcloud.net.cn/plugin?id=271
*
*/
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
const formatDateTime = (timeStamp, returnType)=>{
var date = new Date();
date.setTime(timeStamp * 1000);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
if(returnType == 'h:m'){return h +':' + minute;}
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
return [y, m, d, h, minute, second];
}
const cfu = {
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
//instance为实例变量承载属性，不要删除
"instance":{},
//option为opts及eopts承载属性，不要删除
"option":{},
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
"formatter":{
"yAxisDemo1":function(val, index, opts){return val+'元'},
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
"xAxisDemo1":function(val, index, opts){return val+'年';},
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
"seriesDemo1":function(val, index, series, opts){return val+'元'},
"tooltipDemo1":function(item, category, index, opts){
if(index==0){
return '随便用'+item.data+'年'
}else{
return '其他我没改'+item.data+'天'
}
},
"pieDemo":function(val, index, series, opts){
if(index !== undefined){
return series[index].name+'：'+series[index].data+'元'
}
},
},
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
"demotype":{
//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"line": {
"type": "curve",
"width": 2
},
}
},
//下面是自定义配置，请添加项目所需的通用配置
"pie":{
"type": "pie",
"color": color,
"padding": [5,5,5,5],
"extra": {
"pie": {
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": true,
"borderWidth": 3,
"borderColor": "#FFFFFF"
},
}
},
"ring":{
"type": "ring",
"color": color,
"padding": [5,5,5,5],
"rotate": false,
"dataLabel": true,
"legend": {
"show": true,
"position": "right",
"lineHeight": 25,
},
"title": {
"name": "收益率",
"fontSize": 15,
"color": "#666666"
},
"subtitle": {
"name": "70%",
"fontSize": 25,
"color": "#7cb5ec"
},
"extra": {
"ring": {
"ringWidth":30,
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": true,
"borderWidth": 3,
"borderColor": "#FFFFFF"
},
},
},
"rose":{
"type": "rose",
"color": color,
"padding": [5,5,5,5],
"legend": {
"show": true,
"position": "left",
"lineHeight": 25,
},
"extra": {
"rose": {
"type": "area",
"minRadius": 50,
"activeOpacity": 0.5,
"activeRadius": 10,
"offsetAngle": 0,
"labelWidth": 15,
"border": false,
"borderWidth": 2,
"borderColor": "#FFFFFF"
},
}
},
"word":{
"type": "word",
"color": color,
"extra": {
"word": {
"type": "normal",
"autoColors": false
}
}
},
"funnel":{
"type": "funnel",
"color": color,
"padding": [15,15,0,15],
"extra": {
"funnel": {
"activeOpacity": 0.3,
"activeWidth": 10,
"border": true,
"borderWidth": 2,
"borderColor": "#FFFFFF",
"fillOpacity": 1,
"labelAlign": "right"
},
}
},
"map":{
"type": "map",
"color": color,
"padding": [0,0,0,0],
"dataLabel": true,
"extra": {
"map": {
"border": true,
"borderWidth": 1,
"borderColor": "#666666",
"fillOpacity": 0.6,
"activeBorderColor": "#F04864",
"activeFillColor": "#FACC14",
"activeFillOpacity": 1
},
}
},
"arcbar":{
"type": "arcbar",
"color": color,
"title": {
"name": "百分比",
"fontSize": 25,
"color": "#00FF00"
},
"subtitle": {
"name": "默认标题",
"fontSize": 15,
"color": "#666666"
},
"extra": {
"arcbar": {
"type": "default",
"width": 12,
"backgroundColor": "#E9E9E9",
"startAngle": 0.75,
"endAngle": 0.25,
"gap": 2
}
}
},
"line":{
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"line": {
"type": "straight",
"width": 2,
"activeType": "hollow"
},
}
},
"tline":{
"type": "line",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": false,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"line": {
"type": "curve",
"width": 2,
"activeType": "hollow"
},
}
},
"tarea":{
"type": "area",
"color": color,
"padding": [15,10,0,15],
"xAxis": {
"disableGrid": true,
"boundaryGap":"justify",
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
"data":[
{
"min":0,
"max":80
}
]
},
"legend": {
},
"extra": {
"area": {
"type": "curve",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": true,
"activeType": "hollow"
},
}
},
"column":{
"type": "column",
"color": color,
"padding": [15,15,0,5],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"data":[{"min":0}]
},
"legend": {
},
"extra": {
"column": {
"type": "group",
"width": 30,
"activeBgColor": "#000000",
"activeBgOpacity": 0.08
},
}
},
"mount":{
"type": "mount",
"color": color,
"padding": [15,15,0,5],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"data":[{"min":0}]
},
"legend": {
},
"extra": {
"mount": {
"type": "mount",
"widthRatio": 1.5,
},
}
},
"bar":{
"type": "bar",
"color": color,
"padding": [15,30,0,5],
"xAxis": {
"boundaryGap":"justify",
"disableGrid":false,
"min":0,
"axisLine":false
},
"yAxis": {
},
"legend": {
},
"extra": {
"bar": {
"type": "group",
"width": 30,
"meterBorde": 1,
"meterFillColor": "#FFFFFF",
"activeBgColor": "#000000",
"activeBgOpacity": 0.08
},
}
},
"area":{
"type": "area",
"color": color,
"padding": [15,15,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"gridType": "dash",
"dashLength": 2,
},
"legend": {
},
"extra": {
"area": {
"type": "straight",
"opacity": 0.2,
"addLine": true,
"width": 2,
"gradient": false,
"activeType": "hollow"
},
}
},
"radar":{
"type": "radar",
"color": color,
"padding": [5,5,5,5],
"dataLabel": false,
"legend": {
"show": true,
"position": "right",
"lineHeight": 25,
},
"extra": {
"radar": {
"gridType": "radar",
"gridColor": "#CCCCCC",
"gridCount": 3,
"opacity": 0.2,
"max": 200,
"labelShow": true
},
}
},
"gauge":{
"type": "gauge",
"color": color,
"title": {
"name": "66Km/H",
"fontSize": 25,
"color": "#2fc25b",
"offsetY": 50
},
"subtitle": {
"name": "实时速度",
"fontSize": 15,
"color": "#1890ff",
"offsetY": -50
},
"extra": {
"gauge": {
"type": "default",
"width": 30,
"labelColor": "#666666",
"startAngle": 0.75,
"endAngle": 0.25,
"startNumber": 0,
"endNumber": 100,
"labelFormat": "",
"splitLine": {
"fixRadius": 0,
"splitNumber": 10,
"width": 30,
"color": "#FFFFFF",
"childNumber": 5,
"childWidth": 12
},
"pointer": {
"width": 24,
"color": "auto"
}
}
}
},
"candle":{
"type": "candle",
"color": color,
"padding": [15,15,0,15],
"enableScroll": true,
"enableMarkLine": true,
"dataLabel": false,
"xAxis": {
"labelCount": 4,
"itemCount": 40,
"disableGrid": true,
"gridColor": "#CCCCCC",
"gridType": "solid",
"dashLength": 4,
"scrollShow": true,
"scrollAlign": "left",
"scrollColor": "#A6A6A6",
"scrollBackgroundColor": "#EFEBEF"
},
"yAxis": {
},
"legend": {
},
"extra": {
"candle": {
"color": {
"upLine": "#f04864",
"upFill": "#f04864",
"downLine": "#2fc25b",
"downFill": "#2fc25b"
},
"average": {
"show": true,
"name": ["MA5","MA10","MA30"],
"day": [5,10,20],
"color": ["#1890ff","#2fc25b","#facc14"]
}
},
"markLine": {
"type": "dash",
"dashLength": 5,
"data": [
{
"value": 2150,
"lineColor": "#f04864",
"showLabel": true
},
{
"value": 2350,
"lineColor": "#f04864",
"showLabel": true
}
]
}
}
},
"mix":{
"type": "mix",
"color": color,
"padding": [15,15,0,15],
"xAxis": {
"disableGrid": true,
},
"yAxis": {
"disabled": false,
"disableGrid": false,
"splitNumber": 5,
"gridType": "dash",
"dashLength": 4,
"gridColor": "#CCCCCC",
"padding": 10,
"showTitle": true,
"data": []
},
"legend": {
},
"extra": {
"mix": {
"column": {
"width": 20
}
},
}
},
"scatter":{
"type": "scatter",
"color":color,
"padding":[15,15,0,15],
"dataLabel":false,
"xAxis": {
"disableGrid": false,
"gridType":"dash",
"splitNumber":5,
"boundaryGap":"justify",
"min":0
},
"yAxis": {
"disableGrid": false,
"gridType":"dash",
},
"legend": {
},
"extra": {
"scatter": {
},
}
},
"bubble":{
"type": "bubble",
"color":color,
"padding":[15,15,0,15],
"xAxis": {
"disableGrid": false,
"gridType":"dash",
"splitNumber":5,
"boundaryGap":"justify",
"min":0,
"max":250
},
"yAxis": {
"disableGrid": false,
"gridType":"dash",
"data":[{
"min":0,
"max":150
}]
},
"legend": {
},
"extra": {
"bubble": {
"border":2,
"opacity": 0.5,
},
}
}
}
export default cfu;
\ No newline at end of file
uni_modules/qiun-data-charts/js_sdk/u-charts/readme.md 0 → 100644
# uCharts JSSDK说明
1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`120kb`。
2、如果120kb的体积仍需压缩，请手到uCharts官网通过在线定制选择您需要的图表。
3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
4、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
\ No newline at end of file
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js 0 → 100644
此文件的差异太大，无法显示。
uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.min.js 0 → 100644
此文件的差异太大，无法显示。
uni_modules/qiun-data-charts/package.json 0 → 100644
{
"id": "qiun-data-charts",
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
"version": "2.5.0-20230101",
"description": "uCharts 新增正负柱状图！支持H5及APP用 ucharts echarts 渲染图表，uniapp可视化首选组件",
"keywords": [
"ucharts",
"echarts",
"f2",
"图表",
"可视化"
],
"repository": "https://gitee.com/uCharts/uCharts",
"engines": {
"HBuilderX": "^3.3.8"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "474119"
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/~qiun",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
},
"快应用": {
"华为": "y",
"联盟": "y"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
uni_modules/qiun-data-charts/readme.md 0 → 100644
![logo](https://img-blog.csdnimg.cn/4a276226973841468c1be356f8d9438b.png)
[![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
[![fork](https://gitee.com/uCharts/uCharts/badge/fork.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/members)
[![License](https://img.shields.io/badge/license-Apache%202-4EB1BA.svg)](https://www.apache.org/licenses/LICENSE-2.0.html)
[![npm package](https://img.shields.io/npm/v/@qiun/ucharts.svg?style=flat-square)](https://www.npmjs.com/~qiun)
## uCharts简介
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。
## 官方网站
## [https://www.ucharts.cn](https://www.ucharts.cn)
## 快速体验
一套代码编到多个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！其他平台请自行编译。
![](https://www.ucharts.cn/images/web/guide/qrcode20220224.png)
![](https://img-blog.csdnimg.cn/7d0115593ff24ac39a224fb7c6ed72a4.png)
## 致开发者
感谢各位开发者`五年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具，我们推出了新版官网，增加了在线定制、问答社区、在线配置等一些增值服务，为确保您能更好的应用图表组件，建议您先`仔细阅读官网指南`以及`常见问题`，而不是下载下来`直接使用`。如仍然不能解决，请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
## 视频教程
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
## 社群支持
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持，庞大的用户量证明我们一直在努力，请各位放心使用！uCharts的开源图表组件的开发，团队付出了大量的时间与精力，经过四来的考验，不会有比较明显的bug，请各位放心使用。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
#### 官方交流群
- 交流群1：371774600（已满）
- 交流群2：619841586（已满）
- 交流群3：955340127（已满）
- 交流群4：641669795（已满）
- 交流群5：236294809（只能扫码加入）
![](https://www.ucharts.cn/images/web/qq5.jpg)
- 口令`uniapp`
#### 专属VIP会员群
- 开通会员后详见【账号详情】页面中顶部的滚动通知
- 口令`您的用户ID`
## 版权信息
uCharts始终坚持开源，遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议，意味着您无需支付任何费用，即可将uCharts应用到您的产品中。
注意：这并不意味着您可以将uCharts应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uCharts相关方及秋云科技不承担任何责任。
## 合作伙伴
[![DIY官网](https://www.ucharts.cn/images/web/guide/links/diy-gw.png)](https://www.diygw.com/)
[![HasChat](https://www.ucharts.cn/images/web/guide/links/haschat.png)](https://gitee.com/howcode/has-chat)
[![uViewUI](https://www.ucharts.cn/images/web/guide/links/uView.png)](https://www.uviewui.com/)
[![图鸟UI](https://www.ucharts.cn/images/web/guide/links/tuniao.png)](https://ext.dcloud.net.cn/plugin?id=7088)
[![thorui](https://www.ucharts.cn/images/web/guide/links/thorui.png)](https://ext.dcloud.net.cn/publisher?id=202)
[![FirstUI](https://www.ucharts.cn/images/web/guide/links/first.png)](https://www.firstui.cn/)
[![nProUI](https://www.ucharts.cn/images/web/guide/links/nPro.png)](https://ext.dcloud.net.cn/plugin?id=5169)
[![GraceUI](https://www.ucharts.cn/images/web/guide/links/grace.png)](https://www.graceui.com/)
## 更新记录
详见官网指南中说明，[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
## 相关链接
- [uCharts官网](https://www.ucharts.cn)
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [![star](https://gitee.com/uCharts/uCharts/badge/star.svg?theme=gvp)](https://gitee.com/uCharts/uCharts/stargazers)
- [uCharts npm开源地址](https://www.ucharts.cn)
- [ECharts官网](https://echarts.apache.org/zh/index.html)
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
\ No newline at end of file
uni_modules/qiun-data-charts/static/app-plus/echarts.min.js 0 → 100644
此文件的差异太大，无法显示。
uni_modules/qiun-data-charts/static/h5/echarts.min.js 0 → 100644
此文件的差异太大，无法显示。
uni_modules/uni-grid/changelog.md 0 → 100644
## 1.4.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-grid](https://uniapp.dcloud.io/component/uniui/uni-grid)
## 1.3.2（2021-11-09）
- 新增 提供组件设计资源，组件样式调整
## 1.3.1（2021-07-30）
- 优化 vue3下事件警告的问题
## 1.3.0（2021-07-13）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.2.4（2021-05-12）
- 新增 组件示例地址
## 1.2.3（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-grid/components/uni-grid-item/uni-grid-item.vue 0 → 100644
<template>
<view v-if="width" :style="'width:'+width+';'+(square?'height:'+width:'')" class="uni-grid-item">
<view :class="{ 'uni-grid-item--border': showBorder, 'uni-grid-item--border-top': showBorder && index < column, 'uni-highlight': highlight }"
:style="{'border-right-color': borderColor ,'border-bottom-color': borderColor ,'border-top-color': borderColor }"
class="uni-grid-item__box" @click="_onClick">
<slot />
</view>
</view>
</template>
<script>
/**
* GridItem 宫格
* @description 宫格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
* @property {Number} index 子组件的唯一标识 ，点击gird会返回当前的标识
*/
export default {
name: 'UniGridItem',
inject: ['grid'],
props: {
index: {
type: Number,
default: 0
}
},
data() {
return {
column: 0,
showBorder: true,
square: true,
highlight: true,
left: 0,
top: 0,
openNum: 2,
width: 0,
borderColor: '#e5e5e5'
}
},
created() {
this.column = this.grid.column
this.showBorder = this.grid.showBorder
this.square = this.grid.square
this.highlight = this.grid.highlight
this.top = this.hor === 0 ? this.grid.hor : this.hor
this.left = this.ver === 0 ? this.grid.ver : this.ver
this.borderColor = this.grid.borderColor
this.grid.children.push(this)
// this.grid.init()
this.width = this.grid.width
},
beforeDestroy() {
this.grid.children.forEach((item, index) => {
if (item === this) {
this.grid.children.splice(index, 1)
}
})
},
methods: {
_onClick() {
this.grid.change({
detail: {
index: this.index
}
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-grid-item {
/* #ifndef APP-NVUE */
height: 100%;
display: flex;
/* #endif */
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-grid-item__box {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
position: relative;
flex: 1;
flex-direction: column;
// justify-content: center;
// align-items: center;
}
.uni-grid-item--border {
position: relative;
/* #ifdef APP-NVUE */
border-bottom-color: #D2D2D2;
border-bottom-style: solid;
border-bottom-width: 0.5px;
border-right-color: #D2D2D2;
border-right-style: solid;
border-right-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
z-index: 0;
border-bottom: 1px #D2D2D2 solid;
border-right: 1px #D2D2D2 solid;
/* #endif */
}
.uni-grid-item--border-top {
position: relative;
/* #ifdef APP-NVUE */
border-top-color: #D2D2D2;
border-top-style: solid;
border-top-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
border-top: 1px #D2D2D2 solid;
z-index: 0;
/* #endif */
}
.uni-highlight:active {
background-color: #f1f1f1;
}
</style>
uni_modules/uni-grid/components/uni-grid/uni-grid.vue 0 → 100644
<template>
<view class="uni-grid-wrap">
<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
<slot />
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
/**
* Grid 宫格
* @description 宫格组件
* @tutorial https://ext.dcloud.net.cn/plugin?id=27
* @property {Number} column 每列显示个数
* @property {String} borderColor 边框颜色
* @property {Boolean} showBorder 是否显示边框
* @property {Boolean} square 是否方形显示
* @property {Boolean} Boolean 点击背景是否高亮
* @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
*/
export default {
name: 'UniGrid',
emits:['change'],
props: {
// 每列显示个数
column: {
type: Number,
default: 3
},
// 是否显示边框
showBorder: {
type: Boolean,
default: true
},
// 边框颜色
borderColor: {
type: String,
default: '#D2D2D2'
},
// 是否正方形显示,默认为 true
square: {
type: Boolean,
default: true
},
highlight: {
type: Boolean,
default: true
}
},
provide() {
return {
grid: this
}
},
data() {
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
return {
elId,
width: 0
}
},
created() {
this.children = []
},
mounted() {
this.$nextTick(()=>{
this.init()
})
},
methods: {
init() {
setTimeout(() => {
this._getSize((width) => {
this.children.forEach((item, index) => {
item.width = width
})
})
}, 50)
},
change(e) {
this.$emit('change', e)
},
_getSize(fn) {
// #ifndef APP-NVUE
uni.createSelectorQuery()
.in(this)
.select(`#${this.elId}`)
.boundingClientRect()
.exec(ret => {
this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
fn(this.width)
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
fn(this.width)
})
// #endif
}
}
}
</script>
<style lang="scss" scoped>
.uni-grid-wrap {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
/* #ifdef H5 */
width: 100%;
/* #endif */
}
.uni-grid {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// flex: 1;
flex-direction: row;
flex-wrap: wrap;
}
.uni-grid--border {
position: relative;
/* #ifdef APP-NVUE */
border-left-color: #D2D2D2;
border-left-style: solid;
border-left-width: 0.5px;
/* #endif */
/* #ifndef APP-NVUE */
z-index: 1;
border-left: 1px #D2D2D2 solid;
/* #endif */
}
</style>
uni_modules/uni-grid/package.json 0 → 100644
{
"id": "uni-grid",
"displayName": "uni-grid 宫格",
"version": "1.4.0",
"description": "Grid 宫格组件，提供移动端常见的宫格布局，如九宫格。",
"keywords": [
"uni-ui",
"uniui",
"九宫格",
"表格"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss","uni-icons"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/uni-grid/readme.md 0 → 100644
## Grid 宫格
> **组件名：uni-grid**
> 代码块： `uGrid`
宫格组件。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-grid)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-icons/changelog.md 0 → 100644
## 1.3.5（2022-01-24）
- 优化 size 属性可以传入不带单位的字符串数值
## 1.3.4（2022-01-24）
- 优化 size 支持其他单位
## 1.3.3（2022-01-17）
- 修复 nvue 有些图标不显示的bug，兼容老版本图标
## 1.3.2（2021-12-01）
- 优化 示例可复制图标名称
## 1.3.1（2021-11-23）
- 优化 兼容旧组件 type 值
## 1.3.0（2021-11-19）
- 新增 更多图标
- 优化 自定义图标使用方式
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
## 1.1.7（2021-11-08）
## 1.2.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.5（2021-05-12）
- 新增 组件示例地址
## 1.1.4（2021-02-05）
- 调整为uni_modules目录规范
uni_modules/uni-icons/components/uni-icons/icons.js 0 → 100644
export default {
"id": "2852637",
"name": "uniui图标库",
"font_family": "uniicons",
"css_prefix_text": "uniui-",
"description": "",
"glyphs": [
{
"icon_id": "25027049",
"name": "yanse",
"font_class": "color",
"unicode": "e6cf",
"unicode_decimal": 59087
},
{
"icon_id": "25027048",
"name": "wallet",
"font_class": "wallet",
"unicode": "e6b1",
"unicode_decimal": 59057
},
{
"icon_id": "25015720",
"name": "settings-filled",
"font_class": "settings-filled",
"unicode": "e6ce",
"unicode_decimal": 59086
},
{
"icon_id": "25015434",
"name": "shimingrenzheng-filled",
"font_class": "auth-filled",
"unicode": "e6cc",
"unicode_decimal": 59084
},
{
"icon_id": "24934246",
"name": "shop-filled",
"font_class": "shop-filled",
"unicode": "e6cd",
"unicode_decimal": 59085
},
{
"icon_id": "24934159",
"name": "staff-filled-01",
"font_class": "staff-filled",
"unicode": "e6cb",
"unicode_decimal": 59083
},
{
"icon_id": "24932461",
"name": "VIP-filled",
"font_class": "vip-filled",
"unicode": "e6c6",
"unicode_decimal": 59078
},
{
"icon_id": "24932462",
"name": "plus_circle_fill",
"font_class": "plus-filled",
"unicode": "e6c7",
"unicode_decimal": 59079
},
{
"icon_id": "24932463",
"name": "folder_add-filled",
"font_class": "folder-add-filled",
"unicode": "e6c8",
"unicode_decimal": 59080
},
{
"icon_id": "24932464",
"name": "yanse-filled",
"font_class": "color-filled",
"unicode": "e6c9",
"unicode_decimal": 59081
},
{
"icon_id": "24932465",
"name": "tune-filled",
"font_class": "tune-filled",
"unicode": "e6ca",
"unicode_decimal": 59082
},
{
"icon_id": "24932455",
"name": "a-rilidaka-filled",
"font_class": "calendar-filled",
"unicode": "e6c0",
"unicode_decimal": 59072
},
{
"icon_id": "24932456",
"name": "notification-filled",
"font_class": "notification-filled",
"unicode": "e6c1",
"unicode_decimal": 59073
},
{
"icon_id": "24932457",
"name": "wallet-filled",
"font_class": "wallet-filled",
"unicode": "e6c2",
"unicode_decimal": 59074
},
{
"icon_id": "24932458",
"name": "paihangbang-filled",
"font_class": "medal-filled",
"unicode": "e6c3",
"unicode_decimal": 59075
},
{
"icon_id": "24932459",
"name": "gift-filled",
"font_class": "gift-filled",
"unicode": "e6c4",
"unicode_decimal": 59076
},
{
"icon_id": "24932460",
"name": "fire-filled",
"font_class": "fire-filled",
"unicode": "e6c5",
"unicode_decimal": 59077
},
{
"icon_id": "24928001",
"name": "refreshempty",
"font_class": "refreshempty",
"unicode": "e6bf",
"unicode_decimal": 59071
},
{
"icon_id": "24926853",
"name": "location-ellipse",
"font_class": "location-filled",
"unicode": "e6af",
"unicode_decimal": 59055
},
{
"icon_id": "24926735",
"name": "person-filled",
"font_class": "person-filled",
"unicode": "e69d",
"unicode_decimal": 59037
},
{
"icon_id": "24926703",
"name": "personadd-filled",
"font_class": "personadd-filled",
"unicode": "e698",
"unicode_decimal": 59032
},
{
"icon_id": "24923351",
"name": "back",
"font_class": "back",
"unicode": "e6b9",
"unicode_decimal": 59065
},
{
"icon_id": "24923352",
"name": "forward",
"font_class": "forward",
"unicode": "e6ba",
"unicode_decimal": 59066
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrow-right",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923353",
"name": "arrowthinright",
"font_class": "arrowthinright",
"unicode": "e6bb",
"unicode_decimal": 59067
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrow-left",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923354",
"name": "arrowthinleft",
"font_class": "arrowthinleft",
"unicode": "e6bc",
"unicode_decimal": 59068
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrow-up",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923355",
"name": "arrowthinup",
"font_class": "arrowthinup",
"unicode": "e6bd",
"unicode_decimal": 59069
},
{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrow-down",
"unicode": "e6be",
"unicode_decimal": 59070
},{
"icon_id": "24923356",
"name": "arrowthindown",
"font_class": "arrowthindown",
"unicode": "e6be",
"unicode_decimal": 59070
},
{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "bottom",
"unicode": "e6b8",
"unicode_decimal": 59064
},{
"icon_id": "24923349",
"name": "arrowdown",
"font_class": "arrowdown",
"unicode": "e6b8",
"unicode_decimal": 59064
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "right",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923346",
"name": "arrowright",
"font_class": "arrowright",
"unicode": "e6b5",
"unicode_decimal": 59061
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "top",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923347",
"name": "arrowup",
"font_class": "arrowup",
"unicode": "e6b6",
"unicode_decimal": 59062
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "left",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923348",
"name": "arrowleft",
"font_class": "arrowleft",
"unicode": "e6b7",
"unicode_decimal": 59063
},
{
"icon_id": "24923334",
"name": "eye",
"font_class": "eye",
"unicode": "e651",
"unicode_decimal": 58961
},
{
"icon_id": "24923335",
"name": "eye-filled",
"font_class": "eye-filled",
"unicode": "e66a",
"unicode_decimal": 58986
},
{
"icon_id": "24923336",
"name": "eye-slash",
"font_class": "eye-slash",
"unicode": "e6b3",
"unicode_decimal": 59059
},
{
"icon_id": "24923337",
"name": "eye-slash-filled",
"font_class": "eye-slash-filled",
"unicode": "e6b4",
"unicode_decimal": 59060
},
{
"icon_id": "24923305",
"name": "info-filled",
"font_class": "info-filled",
"unicode": "e649",
"unicode_decimal": 58953
},
{
"icon_id": "24923299",
"name": "reload-01",
"font_class": "reload",
"unicode": "e6b2",
"unicode_decimal": 59058
},
{
"icon_id": "24923195",
"name": "mic_slash_fill",
"font_class": "micoff-filled",
"unicode": "e6b0",
"unicode_decimal": 59056
},
{
"icon_id": "24923165",
"name": "map-pin-ellipse",
"font_class": "map-pin-ellipse",
"unicode": "e6ac",
"unicode_decimal": 59052
},
{
"icon_id": "24923166",
"name": "map-pin",
"font_class": "map-pin",
"unicode": "e6ad",
"unicode_decimal": 59053
},
{
"icon_id": "24923167",
"name": "location",
"font_class": "location",
"unicode": "e6ae",
"unicode_decimal": 59054
},
{
"icon_id": "24923064",
"name": "starhalf",
"font_class": "starhalf",
"unicode": "e683",
"unicode_decimal": 59011
},
{
"icon_id": "24923065",
"name": "star",
"font_class": "star",
"unicode": "e688",
"unicode_decimal": 59016
},
{
"icon_id": "24923066",
"name": "star-filled",
"font_class": "star-filled",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "24899646",
"name": "a-rilidaka",
"font_class": "calendar",
"unicode": "e6a0",
"unicode_decimal": 59040
},
{
"icon_id": "24899647",
"name": "fire",
"font_class": "fire",
"unicode": "e6a1",
"unicode_decimal": 59041
},
{
"icon_id": "24899648",
"name": "paihangbang",
"font_class": "medal",
"unicode": "e6a2",
"unicode_decimal": 59042
},
{
"icon_id": "24899649",
"name": "font",
"font_class": "font",
"unicode": "e6a3",
"unicode_decimal": 59043
},
{
"icon_id": "24899650",
"name": "gift",
"font_class": "gift",
"unicode": "e6a4",
"unicode_decimal": 59044
},
{
"icon_id": "24899651",
"name": "link",
"font_class": "link",
"unicode": "e6a5",
"unicode_decimal": 59045
},
{
"icon_id": "24899652",
"name": "notification",
"font_class": "notification",
"unicode": "e6a6",
"unicode_decimal": 59046
},
{
"icon_id": "24899653",
"name": "staff",
"font_class": "staff",
"unicode": "e6a7",
"unicode_decimal": 59047
},
{
"icon_id": "24899654",
"name": "VIP",
"font_class": "vip",
"unicode": "e6a8",
"unicode_decimal": 59048
},
{
"icon_id": "24899655",
"name": "folder_add",
"font_class": "folder-add",
"unicode": "e6a9",
"unicode_decimal": 59049
},
{
"icon_id": "24899656",
"name": "tune",
"font_class": "tune",
"unicode": "e6aa",
"unicode_decimal": 59050
},
{
"icon_id": "24899657",
"name": "shimingrenzheng",
"font_class": "auth",
"unicode": "e6ab",
"unicode_decimal": 59051
},
{
"icon_id": "24899565",
"name": "person",
"font_class": "person",
"unicode": "e699",
"unicode_decimal": 59033
},
{
"icon_id": "24899566",
"name": "email-filled",
"font_class": "email-filled",
"unicode": "e69a",
"unicode_decimal": 59034
},
{
"icon_id": "24899567",
"name": "phone-filled",
"font_class": "phone-filled",
"unicode": "e69b",
"unicode_decimal": 59035
},
{
"icon_id": "24899568",
"name": "phone",
"font_class": "phone",
"unicode": "e69c",
"unicode_decimal": 59036
},
{
"icon_id": "24899570",
"name": "email",
"font_class": "email",
"unicode": "e69e",
"unicode_decimal": 59038
},
{
"icon_id": "24899571",
"name": "personadd",
"font_class": "personadd",
"unicode": "e69f",
"unicode_decimal": 59039
},
{
"icon_id": "24899558",
"name": "chatboxes-filled",
"font_class": "chatboxes-filled",
"unicode": "e692",
"unicode_decimal": 59026
},
{
"icon_id": "24899559",
"name": "contact",
"font_class": "contact",
"unicode": "e693",
"unicode_decimal": 59027
},
{
"icon_id": "24899560",
"name": "chatbubble-filled",
"font_class": "chatbubble-filled",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "24899561",
"name": "contact-filled",
"font_class": "contact-filled",
"unicode": "e695",
"unicode_decimal": 59029
},
{
"icon_id": "24899562",
"name": "chatboxes",
"font_class": "chatboxes",
"unicode": "e696",
"unicode_decimal": 59030
},
{
"icon_id": "24899563",
"name": "chatbubble",
"font_class": "chatbubble",
"unicode": "e697",
"unicode_decimal": 59031
},
{
"icon_id": "24881290",
"name": "upload-filled",
"font_class": "upload-filled",
"unicode": "e68e",
"unicode_decimal": 59022
},
{
"icon_id": "24881292",
"name": "upload",
"font_class": "upload",
"unicode": "e690",
"unicode_decimal": 59024
},
{
"icon_id": "24881293",
"name": "weixin",
"font_class": "weixin",
"unicode": "e691",
"unicode_decimal": 59025
},
{
"icon_id": "24881274",
"name": "compose",
"font_class": "compose",
"unicode": "e67f",
"unicode_decimal": 59007
},
{
"icon_id": "24881275",
"name": "qq",
"font_class": "qq",
"unicode": "e680",
"unicode_decimal": 59008
},
{
"icon_id": "24881276",
"name": "download-filled",
"font_class": "download-filled",
"unicode": "e681",
"unicode_decimal": 59009
},
{
"icon_id": "24881277",
"name": "pengyouquan",
"font_class": "pyq",
"unicode": "e682",
"unicode_decimal": 59010
},
{
"icon_id": "24881279",
"name": "sound",
"font_class": "sound",
"unicode": "e684",
"unicode_decimal": 59012
},
{
"icon_id": "24881280",
"name": "trash-filled",
"font_class": "trash-filled",
"unicode": "e685",
"unicode_decimal": 59013
},
{
"icon_id": "24881281",
"name": "sound-filled",
"font_class": "sound-filled",
"unicode": "e686",
"unicode_decimal": 59014
},
{
"icon_id": "24881282",
"name": "trash",
"font_class": "trash",
"unicode": "e687",
"unicode_decimal": 59015
},
{
"icon_id": "24881284",
"name": "videocam-filled",
"font_class": "videocam-filled",
"unicode": "e689",
"unicode_decimal": 59017
},
{
"icon_id": "24881285",
"name": "spinner-cycle",
"font_class": "spinner-cycle",
"unicode": "e68a",
"unicode_decimal": 59018
},
{
"icon_id": "24881286",
"name": "weibo",
"font_class": "weibo",
"unicode": "e68b",
"unicode_decimal": 59019
},
{
"icon_id": "24881288",
"name": "videocam",
"font_class": "videocam",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "24881289",
"name": "download",
"font_class": "download",
"unicode": "e68d",
"unicode_decimal": 59021
},
{
"icon_id": "24879601",
"name": "help",
"font_class": "help",
"unicode": "e679",
"unicode_decimal": 59001
},
{
"icon_id": "24879602",
"name": "navigate-filled",
"font_class": "navigate-filled",
"unicode": "e67a",
"unicode_decimal": 59002
},
{
"icon_id": "24879603",
"name": "plusempty",
"font_class": "plusempty",
"unicode": "e67b",
"unicode_decimal": 59003
},
{
"icon_id": "24879604",
"name": "smallcircle",
"font_class": "smallcircle",
"unicode": "e67c",
"unicode_decimal": 59004
},
{
"icon_id": "24879605",
"name": "minus-filled",
"font_class": "minus-filled",
"unicode": "e67d",
"unicode_decimal": 59005
},
{
"icon_id": "24879606",
"name": "micoff",
"font_class": "micoff",
"unicode": "e67e",
"unicode_decimal": 59006
},
{
"icon_id": "24879588",
"name": "closeempty",
"font_class": "closeempty",
"unicode": "e66c",
"unicode_decimal": 58988
},
{
"icon_id": "24879589",
"name": "clear",
"font_class": "clear",
"unicode": "e66d",
"unicode_decimal": 58989
},
{
"icon_id": "24879590",
"name": "navigate",
"font_class": "navigate",
"unicode": "e66e",
"unicode_decimal": 58990
},
{
"icon_id": "24879591",
"name": "minus",
"font_class": "minus",
"unicode": "e66f",
"unicode_decimal": 58991
},
{
"icon_id": "24879592",
"name": "image",
"font_class": "image",
"unicode": "e670",
"unicode_decimal": 58992
},
{
"icon_id": "24879593",
"name": "mic",
"font_class": "mic",
"unicode": "e671",
"unicode_decimal": 58993
},
{
"icon_id": "24879594",
"name": "paperplane",
"font_class": "paperplane",
"unicode": "e672",
"unicode_decimal": 58994
},
{
"icon_id": "24879595",
"name": "close",
"font_class": "close",
"unicode": "e673",
"unicode_decimal": 58995
},
{
"icon_id": "24879596",
"name": "help-filled",
"font_class": "help-filled",
"unicode": "e674",
"unicode_decimal": 58996
},
{
"icon_id": "24879597",
"name": "plus-filled",
"font_class": "paperplane-filled",
"unicode": "e675",
"unicode_decimal": 58997
},
{
"icon_id": "24879598",
"name": "plus",
"font_class": "plus",
"unicode": "e676",
"unicode_decimal": 58998
},
{
"icon_id": "24879599",
"name": "mic-filled",
"font_class": "mic-filled",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "24879600",
"name": "image-filled",
"font_class": "image-filled",
"unicode": "e678",
"unicode_decimal": 59000
},
{
"icon_id": "24855900",
"name": "locked-filled",
"font_class": "locked-filled",
"unicode": "e668",
"unicode_decimal": 58984
},
{
"icon_id": "24855901",
"name": "info",
"font_class": "info",
"unicode": "e669",
"unicode_decimal": 58985
},
{
"icon_id": "24855903",
"name": "locked",
"font_class": "locked",
"unicode": "e66b",
"unicode_decimal": 58987
},
{
"icon_id": "24855884",
"name": "camera-filled",
"font_class": "camera-filled",
"unicode": "e658",
"unicode_decimal": 58968
},
{
"icon_id": "24855885",
"name": "chat-filled",
"font_class": "chat-filled",
"unicode": "e659",
"unicode_decimal": 58969
},
{
"icon_id": "24855886",
"name": "camera",
"font_class": "camera",
"unicode": "e65a",
"unicode_decimal": 58970
},
{
"icon_id": "24855887",
"name": "circle",
"font_class": "circle",
"unicode": "e65b",
"unicode_decimal": 58971
},
{
"icon_id": "24855888",
"name": "checkmarkempty",
"font_class": "checkmarkempty",
"unicode": "e65c",
"unicode_decimal": 58972
},
{
"icon_id": "24855889",
"name": "chat",
"font_class": "chat",
"unicode": "e65d",
"unicode_decimal": 58973
},
{
"icon_id": "24855890",
"name": "circle-filled",
"font_class": "circle-filled",
"unicode": "e65e",
"unicode_decimal": 58974
},
{
"icon_id": "24855891",
"name": "flag",
"font_class": "flag",
"unicode": "e65f",
"unicode_decimal": 58975
},
{
"icon_id": "24855892",
"name": "flag-filled",
"font_class": "flag-filled",
"unicode": "e660",
"unicode_decimal": 58976
},
{
"icon_id": "24855893",
"name": "gear-filled",
"font_class": "gear-filled",
"unicode": "e661",
"unicode_decimal": 58977
},
{
"icon_id": "24855894",
"name": "home",
"font_class": "home",
"unicode": "e662",
"unicode_decimal": 58978
},
{
"icon_id": "24855895",
"name": "home-filled",
"font_class": "home-filled",
"unicode": "e663",
"unicode_decimal": 58979
},
{
"icon_id": "24855896",
"name": "gear",
"font_class": "gear",
"unicode": "e664",
"unicode_decimal": 58980
},
{
"icon_id": "24855897",
"name": "smallcircle-filled",
"font_class": "smallcircle-filled",
"unicode": "e665",
"unicode_decimal": 58981
},
{
"icon_id": "24855898",
"name": "map-filled",
"font_class": "map-filled",
"unicode": "e666",
"unicode_decimal": 58982
},
{
"icon_id": "24855899",
"name": "map",
"font_class": "map",
"unicode": "e667",
"unicode_decimal": 58983
},
{
"icon_id": "24855825",
"name": "refresh-filled",
"font_class": "refresh-filled",
"unicode": "e656",
"unicode_decimal": 58966
},
{
"icon_id": "24855826",
"name": "refresh",
"font_class": "refresh",
"unicode": "e657",
"unicode_decimal": 58967
},
{
"icon_id": "24855808",
"name": "cloud-upload",
"font_class": "cloud-upload",
"unicode": "e645",
"unicode_decimal": 58949
},
{
"icon_id": "24855809",
"name": "cloud-download-filled",
"font_class": "cloud-download-filled",
"unicode": "e646",
"unicode_decimal": 58950
},
{
"icon_id": "24855810",
"name": "cloud-download",
"font_class": "cloud-download",
"unicode": "e647",
"unicode_decimal": 58951
},
{
"icon_id": "24855811",
"name": "cloud-upload-filled",
"font_class": "cloud-upload-filled",
"unicode": "e648",
"unicode_decimal": 58952
},
{
"icon_id": "24855813",
"name": "redo",
"font_class": "redo",
"unicode": "e64a",
"unicode_decimal": 58954
},
{
"icon_id": "24855814",
"name": "images-filled",
"font_class": "images-filled",
"unicode": "e64b",
"unicode_decimal": 58955
},
{
"icon_id": "24855815",
"name": "undo-filled",
"font_class": "undo-filled",
"unicode": "e64c",
"unicode_decimal": 58956
},
{
"icon_id": "24855816",
"name": "more",
"font_class": "more",
"unicode": "e64d",
"unicode_decimal": 58957
},
{
"icon_id": "24855817",
"name": "more-filled",
"font_class": "more-filled",
"unicode": "e64e",
"unicode_decimal": 58958
},
{
"icon_id": "24855818",
"name": "undo",
"font_class": "undo",
"unicode": "e64f",
"unicode_decimal": 58959
},
{
"icon_id": "24855819",
"name": "images",
"font_class": "images",
"unicode": "e650",
"unicode_decimal": 58960
},
{
"icon_id": "24855821",
"name": "paperclip",
"font_class": "paperclip",
"unicode": "e652",
"unicode_decimal": 58962
},
{
"icon_id": "24855822",
"name": "settings",
"font_class": "settings",
"unicode": "e653",
"unicode_decimal": 58963
},
{
"icon_id": "24855823",
"name": "search",
"font_class": "search",
"unicode": "e654",
"unicode_decimal": 58964
},
{
"icon_id": "24855824",
"name": "redo-filled",
"font_class": "redo-filled",
"unicode": "e655",
"unicode_decimal": 58965
},
{
"icon_id": "24841702",
"name": "list",
"font_class": "list",
"unicode": "e644",
"unicode_decimal": 58948
},
{
"icon_id": "24841489",
"name": "mail-open-filled",
"font_class": "mail-open-filled",
"unicode": "e63a",
"unicode_decimal": 58938
},
{
"icon_id": "24841491",
"name": "hand-thumbsdown-filled",
"font_class": "hand-down-filled",
"unicode": "e63c",
"unicode_decimal": 58940
},
{
"icon_id": "24841492",
"name": "hand-thumbsdown",
"font_class": "hand-down",
"unicode": "e63d",
"unicode_decimal": 58941
},
{
"icon_id": "24841493",
"name": "hand-thumbsup-filled",
"font_class": "hand-up-filled",
"unicode": "e63e",
"unicode_decimal": 58942
},
{
"icon_id": "24841494",
"name": "hand-thumbsup",
"font_class": "hand-up",
"unicode": "e63f",
"unicode_decimal": 58943
},
{
"icon_id": "24841496",
"name": "heart-filled",
"font_class": "heart-filled",
"unicode": "e641",
"unicode_decimal": 58945
},
{
"icon_id": "24841498",
"name": "mail-open",
"font_class": "mail-open",
"unicode": "e643",
"unicode_decimal": 58947
},
{
"icon_id": "24841488",
"name": "heart",
"font_class": "heart",
"unicode": "e639",
"unicode_decimal": 58937
},
{
"icon_id": "24839963",
"name": "loop",
"font_class": "loop",
"unicode": "e633",
"unicode_decimal": 58931
},
{
"icon_id": "24839866",
"name": "pulldown",
"font_class": "pulldown",
"unicode": "e632",
"unicode_decimal": 58930
},
{
"icon_id": "24813798",
"name": "scan",
"font_class": "scan",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "24813786",
"name": "bars",
"font_class": "bars",
"unicode": "e627",
"unicode_decimal": 58919
},
{
"icon_id": "24813788",
"name": "cart-filled",
"font_class": "cart-filled",
"unicode": "e629",
"unicode_decimal": 58921
},
{
"icon_id": "24813790",
"name": "checkbox",
"font_class": "checkbox",
"unicode": "e62b",
"unicode_decimal": 58923
},
{
"icon_id": "24813791",
"name": "checkbox-filled",
"font_class": "checkbox-filled",
"unicode": "e62c",
"unicode_decimal": 58924
},
{
"icon_id": "24813794",
"name": "shop",
"font_class": "shop",
"unicode": "e62f",
"unicode_decimal": 58927
},
{
"icon_id": "24813795",
"name": "headphones",
"font_class": "headphones",
"unicode": "e630",
"unicode_decimal": 58928
},
{
"icon_id": "24813796",
"name": "cart",
"font_class": "cart",
"unicode": "e631",
"unicode_decimal": 58929
}
]
}
uni_modules/uni-icons/components/uni-icons/uni-icons.vue 0 → 100644
<template>
<!-- #ifdef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
<!-- #endif -->
</template>
<script>
import icons from './icons.js';
const getVal = (val) => {
const reg = /^[0-9]*$/g
return (typeof val === 'number' ||　reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
var domModule = weex.requireModule('dom');
import iconUrl from './uniicons.ttf'
domModule.addRule('fontFace', {
'fontFamily': "uniicons",
'src': "url('"+iconUrl+"')"
});
// #endif
/**
* Icons 图标
* @description 用于展示 icons 图标
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
* @property {Number} size 图标大小
* @property {String} type 图标图案，参考示例
* @property {String} color 图标颜色
* @property {String} customPrefix 自定义图标
* @event {Function} click 点击 Icon 触发事件
*/
export default {
name: 'UniIcons',
emits:['click'],
props: {
type: {
type: String,
default: ''
},
color: {
type: String,
default: '#333333'
},
size: {
type: [Number, String],
default: 16
},
customPrefix:{
type: String,
default: ''
}
},
data() {
return {
icons: icons.glyphs
}
},
computed:{
unicode(){
let code = this.icons.find(v=>v.font_class === this.type)
if(code){
return unescape(`%u${code.unicode}`)
}
return ''
},
iconSize(){
return getVal(this.size)
}
},
methods: {
_onClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss">
/* #ifndef APP-NVUE */
@import './uniicons.css';
@font-face {
font-family: uniicons;
src: url('./uniicons.ttf') format('truetype');
}
/* #endif */
.uni-icons {
font-family: uniicons;
text-decoration: none;
text-align: center;
}
</style>
uni_modules/uni-icons/components/uni-icons/uniicons.css 0 → 100644
.uniui-color:before {
content: "\e6cf";
}
.uniui-wallet:before {
content: "\e6b1";
}
.uniui-settings-filled:before {
content: "\e6ce";
}
.uniui-auth-filled:before {
content: "\e6cc";
}
.uniui-shop-filled:before {
content: "\e6cd";
}
.uniui-staff-filled:before {
content: "\e6cb";
}
.uniui-vip-filled:before {
content: "\e6c6";
}
.uniui-plus-filled:before {
content: "\e6c7";
}
.uniui-folder-add-filled:before {
content: "\e6c8";
}
.uniui-color-filled:before {
content: "\e6c9";
}
.uniui-tune-filled:before {
content: "\e6ca";
}
.uniui-calendar-filled:before {
content: "\e6c0";
}
.uniui-notification-filled:before {
content: "\e6c1";
}
.uniui-wallet-filled:before {
content: "\e6c2";
}
.uniui-medal-filled:before {
content: "\e6c3";
}
.uniui-gift-filled:before {
content: "\e6c4";
}
.uniui-fire-filled:before {
content: "\e6c5";
}
.uniui-refreshempty:before {
content: "\e6bf";
}
.uniui-location-filled:before {
content: "\e6af";
}
.uniui-person-filled:before {
content: "\e69d";
}
.uniui-personadd-filled:before {
content: "\e698";
}
.uniui-back:before {
content: "\e6b9";
}
.uniui-forward:before {
content: "\e6ba";
}
.uniui-arrow-right:before {
content: "\e6bb";
}
.uniui-arrowthinright:before {
content: "\e6bb";
}
.uniui-arrow-left:before {
content: "\e6bc";
}
.uniui-arrowthinleft:before {
content: "\e6bc";
}
.uniui-arrow-up:before {
content: "\e6bd";
}
.uniui-arrowthinup:before {
content: "\e6bd";
}
.uniui-arrow-down:before {
content: "\e6be";
}
.uniui-arrowthindown:before {
content: "\e6be";
}
.uniui-bottom:before {
content: "\e6b8";
}
.uniui-arrowdown:before {
content: "\e6b8";
}
.uniui-right:before {
content: "\e6b5";
}
.uniui-arrowright:before {
content: "\e6b5";
}
.uniui-top:before {
content: "\e6b6";
}
.uniui-arrowup:before {
content: "\e6b6";
}
.uniui-left:before {
content: "\e6b7";
}
.uniui-arrowleft:before {
content: "\e6b7";
}
.uniui-eye:before {
content: "\e651";
}
.uniui-eye-filled:before {
content: "\e66a";
}
.uniui-eye-slash:before {
content: "\e6b3";
}
.uniui-eye-slash-filled:before {
content: "\e6b4";
}
.uniui-info-filled:before {
content: "\e649";
}
.uniui-reload:before {
content: "\e6b2";
}
.uniui-micoff-filled:before {
content: "\e6b0";
}
.uniui-map-pin-ellipse:before {
content: "\e6ac";
}
.uniui-map-pin:before {
content: "\e6ad";
}
.uniui-location:before {
content: "\e6ae";
}
.uniui-starhalf:before {
content: "\e683";
}
.uniui-star:before {
content: "\e688";
}
.uniui-star-filled:before {
content: "\e68f";
}
.uniui-calendar:before {
content: "\e6a0";
}
.uniui-fire:before {
content: "\e6a1";
}
.uniui-medal:before {
content: "\e6a2";
}
.uniui-font:before {
content: "\e6a3";
}
.uniui-gift:before {
content: "\e6a4";
}
.uniui-link:before {
content: "\e6a5";
}
.uniui-notification:before {
content: "\e6a6";
}
.uniui-staff:before {
content: "\e6a7";
}
.uniui-vip:before {
content: "\e6a8";
}
.uniui-folder-add:before {
content: "\e6a9";
}
.uniui-tune:before {
content: "\e6aa";
}
.uniui-auth:before {
content: "\e6ab";
}
.uniui-person:before {
content: "\e699";
}
.uniui-email-filled:before {
content: "\e69a";
}
.uniui-phone-filled:before {
content: "\e69b";
}
.uniui-phone:before {
content: "\e69c";
}
.uniui-email:before {
content: "\e69e";
}
.uniui-personadd:before {
content: "\e69f";
}
.uniui-chatboxes-filled:before {
content: "\e692";
}
.uniui-contact:before {
content: "\e693";
}
.uniui-chatbubble-filled:before {
content: "\e694";
}
.uniui-contact-filled:before {
content: "\e695";
}
.uniui-chatboxes:before {
content: "\e696";
}
.uniui-chatbubble:before {
content: "\e697";
}
.uniui-upload-filled:before {
content: "\e68e";
}
.uniui-upload:before {
content: "\e690";
}
.uniui-weixin:before {
content: "\e691";
}
.uniui-compose:before {
content: "\e67f";
}
.uniui-qq:before {
content: "\e680";
}
.uniui-download-filled:before {
content: "\e681";
}
.uniui-pyq:before {
content: "\e682";
}
.uniui-sound:before {
content: "\e684";
}
.uniui-trash-filled:before {
content: "\e685";
}
.uniui-sound-filled:before {
content: "\e686";
}
.uniui-trash:before {
content: "\e687";
}
.uniui-videocam-filled:before {
content: "\e689";
}
.uniui-spinner-cycle:before {
content: "\e68a";
}
.uniui-weibo:before {
content: "\e68b";
}
.uniui-videocam:before {
content: "\e68c";
}
.uniui-download:before {
content: "\e68d";
}
.uniui-help:before {
content: "\e679";
}
.uniui-navigate-filled:before {
content: "\e67a";
}
.uniui-plusempty:before {
content: "\e67b";
}
.uniui-smallcircle:before {
content: "\e67c";
}
.uniui-minus-filled:before {
content: "\e67d";
}
.uniui-micoff:before {
content: "\e67e";
}
.uniui-closeempty:before {
content: "\e66c";
}
.uniui-clear:before {
content: "\e66d";
}
.uniui-navigate:before {
content: "\e66e";
}
.uniui-minus:before {
content: "\e66f";
}
.uniui-image:before {
content: "\e670";
}
.uniui-mic:before {
content: "\e671";
}
.uniui-paperplane:before {
content: "\e672";
}
.uniui-close:before {
content: "\e673";
}
.uniui-help-filled:before {
content: "\e674";
}
.uniui-paperplane-filled:before {
content: "\e675";
}
.uniui-plus:before {
content: "\e676";
}
.uniui-mic-filled:before {
content: "\e677";
}
.uniui-image-filled:before {
content: "\e678";
}
.uniui-locked-filled:before {
content: "\e668";
}
.uniui-info:before {
content: "\e669";
}
.uniui-locked:before {
content: "\e66b";
}
.uniui-camera-filled:before {
content: "\e658";
}
.uniui-chat-filled:before {
content: "\e659";
}
.uniui-camera:before {
content: "\e65a";
}
.uniui-circle:before {
content: "\e65b";
}
.uniui-checkmarkempty:before {
content: "\e65c";
}
.uniui-chat:before {
content: "\e65d";
}
.uniui-circle-filled:before {
content: "\e65e";
}
.uniui-flag:before {
content: "\e65f";
}
.uniui-flag-filled:before {
content: "\e660";
}
.uniui-gear-filled:before {
content: "\e661";
}
.uniui-home:before {
content: "\e662";
}
.uniui-home-filled:before {
content: "\e663";
}
.uniui-gear:before {
content: "\e664";
}
.uniui-smallcircle-filled:before {
content: "\e665";
}
.uniui-map-filled:before {
content: "\e666";
}
.uniui-map:before {
content: "\e667";
}
.uniui-refresh-filled:before {
content: "\e656";
}
.uniui-refresh:before {
content: "\e657";
}
.uniui-cloud-upload:before {
content: "\e645";
}
.uniui-cloud-download-filled:before {
content: "\e646";
}
.uniui-cloud-download:before {
content: "\e647";
}
.uniui-cloud-upload-filled:before {
content: "\e648";
}
.uniui-redo:before {
content: "\e64a";
}
.uniui-images-filled:before {
content: "\e64b";
}
.uniui-undo-filled:before {
content: "\e64c";
}
.uniui-more:before {
content: "\e64d";
}
.uniui-more-filled:before {
content: "\e64e";
}
.uniui-undo:before {
content: "\e64f";
}
.uniui-images:before {
content: "\e650";
}
.uniui-paperclip:before {
content: "\e652";
}
.uniui-settings:before {
content: "\e653";
}
.uniui-search:before {
content: "\e654";
}
.uniui-redo-filled:before {
content: "\e655";
}
.uniui-list:before {
content: "\e644";
}
.uniui-mail-open-filled:before {
content: "\e63a";
}
.uniui-hand-down-filled:before {
content: "\e63c";
}
.uniui-hand-down:before {
content: "\e63d";
}
.uniui-hand-up-filled:before {
content: "\e63e";
}
.uniui-hand-up:before {
content: "\e63f";
}
.uniui-heart-filled:before {
content: "\e641";
}
.uniui-mail-open:before {
content: "\e643";
}
.uniui-heart:before {
content: "\e639";
}
.uniui-loop:before {
content: "\e633";
}
.uniui-pulldown:before {
content: "\e632";
}
.uniui-scan:before {
content: "\e62a";
}
.uniui-bars:before {
content: "\e627";
}
.uniui-cart-filled:before {
content: "\e629";
}
.uniui-checkbox:before {
content: "\e62b";
}
.uniui-checkbox-filled:before {
content: "\e62c";
}
.uniui-shop:before {
content: "\e62f";
}
.uniui-headphones:before {
content: "\e630";
}
.uniui-cart:before {
content: "\e631";
}
uni_modules/uni-icons/package.json 0 → 100644
{
"id": "uni-icons",
"displayName": "uni-icons 图标",
"version": "1.3.5",
"description": "图标组件，用于展示移动端常见的图标，可自定义颜色、大小。",
"keywords": [
"uni-ui",
"uniui",
"icon",
"图标"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.2.14"
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"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"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-icons/readme.md 0 → 100644
## Icons 图标
> **组件名：uni-icons**
> 代码块： `uIcons`
用于展示 icons 图标 。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
uni_modules/uni-scss/changelog.md 0 → 100644
## 1.0.3（2022-01-21）
- 优化 组件示例
## 1.0.2（2021-11-22）
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
## 1.0.1（2021-11-22）
- 修复 vue3中scss语法兼容问题
## 1.0.0（2021-11-18）
- init
uni_modules/uni-scss/index.scss 0 → 100644
@import './styles/index.scss';
uni_modules/uni-scss/package.json 0 → 100644
{
"id": "uni-scss",
"displayName": "uni-scss 辅助样式",
"version": "1.0.3",
"description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
"keywords": [
"uni-scss",
"uni-ui",
"辅助样式"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"JS SDK",
"通用 SDK"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "u"
},
"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"
},
"快应用": {
"华为": "n",
"联盟": "n"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
uni_modules/uni-scss/readme.md 0 → 100644
`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
uni_modules/uni-scss/styles/index.scss 0 → 100644
@import './setting/_variables.scss';
@import './setting/_border.scss';
@import './setting/_color.scss';
@import './setting/_space.scss';
@import './setting/_radius.scss';
@import './setting/_text.scss';
@import './setting/_styles.scss';
uni_modules/uni-scss/styles/setting/_border.scss 0 → 100644
.uni-border {
border: 1px $uni-border-1 solid;
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_color.scss 0 → 100644
// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
// @mixin get-styles($k,$c) {
// @if $k == size or $k == weight{
// font-#{$k}:#{$c}
// }@else{
// #{$k}:#{$c}
// }
// }
$uni-ui-color:(
// 主色
primary: $uni-primary,
primary-disable: $uni-primary-disable,
primary-light: $uni-primary-light,
// 辅助色
success: $uni-success,
success-disable: $uni-success-disable,
success-light: $uni-success-light,
warning: $uni-warning,
warning-disable: $uni-warning-disable,
warning-light: $uni-warning-light,
error: $uni-error,
error-disable: $uni-error-disable,
error-light: $uni-error-light,
info: $uni-info,
info-disable: $uni-info-disable,
info-light: $uni-info-light,
// 中性色
main-color: $uni-main-color,
base-color: $uni-base-color,
secondary-color: $uni-secondary-color,
extra-color: $uni-extra-color,
// 背景色
bg-color: $uni-bg-color,
// 边框颜色
border-1: $uni-border-1,
border-2: $uni-border-2,
border-3: $uni-border-3,
border-4: $uni-border-4,
// 黑色
black:$uni-black,
// 白色
white:$uni-white,
// 透明
transparent:$uni-transparent
) !default;
@each $key, $child in $uni-ui-color {
.uni-#{"" + $key} {
color: $child;
}
.uni-#{"" + $key}-bg {
background-color: $child;
}
}
.uni-shadow-sm {
box-shadow: $uni-shadow-sm;
}
.uni-shadow-base {
box-shadow: $uni-shadow-base;
}
.uni-shadow-lg {
box-shadow: $uni-shadow-lg;
}
.uni-mask {
background-color:$uni-mask;
}
uni_modules/uni-scss/styles/setting/_radius.scss 0 → 100644
@mixin radius($r,$d:null ,$important: false){
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
// Key exists within the $uni-radius variable
@if (map-has-key($uni-radius, $r) and $d){
@if $d == t {
border-top-left-radius:$radius-value;
border-top-right-radius:$radius-value;
}@else if $d == r {
border-top-right-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == b {
border-bottom-left-radius:$radius-value;
border-bottom-right-radius:$radius-value;
}@else if $d == l {
border-top-left-radius:$radius-value;
border-bottom-left-radius:$radius-value;
}@else if $d == tl {
border-top-left-radius:$radius-value;
}@else if $d == tr {
border-top-right-radius:$radius-value;
}@else if $d == br {
border-bottom-right-radius:$radius-value;
}@else if $d == bl {
border-bottom-left-radius:$radius-value;
}
}@else{
border-radius:$radius-value;
}
}
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $key} {
@include radius($key)
}
}@else{
.uni-radius {
@include radius($key)
}
}
}
@each $direction in t, r, b, l,tl, tr, br, bl {
@each $key, $child in $uni-radius {
@if($key){
.uni-radius-#{"" + $direction}-#{"" + $key} {
@include radius($key,$direction,false)
}
}@else{
.uni-radius-#{$direction} {
@include radius($key,$direction,false)
}
}
}
}
uni_modules/uni-scss/styles/setting/_space.scss 0 → 100644
@mixin fn($space,$direction,$size,$n) {
@if $n {
#{$space}-#{$direction}: #{$size*$uni-space-root}px
} @else {
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
}
}
@mixin get-styles($direction,$i,$space,$n){
@if $direction == t {
@include fn($space, top,$i,$n);
}
@if $direction == r {
@include fn($space, right,$i,$n);
}
@if $direction == b {
@include fn($space, bottom,$i,$n);
}
@if $direction == l {
@include fn($space, left,$i,$n);
}
@if $direction == x {
@include fn($space, left,$i,$n);
@include fn($space, right,$i,$n);
}
@if $direction == y {
@include fn($space, top,$i,$n);
@include fn($space, bottom,$i,$n);
}
@if $direction == a {
@if $n {
#{$space}:#{$i*$uni-space-root}px;
} @else {
#{$space}:#{-$i*$uni-space-root}px;
}
}
}
@each $orientation in m,p {
$space: margin;
@if $orientation == m {
$space: margin;
} @else {
$space: padding;
}
@for $i from 0 through 16 {
@each $direction in t, r, b, l, x, y, a {
.uni-#{$orientation}#{$direction}-#{$i} {
@include get-styles($direction,$i,$space,true);
}
.uni-#{$orientation}#{$direction}-n#{$i} {
@include get-styles($direction,$i,$space,false);
}
}
}
}
\ No newline at end of file
uni_modules/uni-scss/styles/setting/_styles.scss 0 → 100644
/* #ifndef APP-NVUE */
$-color-white:#fff;
$-color-black:#000;
@mixin base-style($color) {
color: #fff;
background-color: $color;
border-color: mix($-color-black, $color, 8%);
&:not([hover-class]):active {
background: mix($-color-black, $color, 10%);
border-color: mix($-color-black, $color, 20%);
color: $-color-white;
outline: none;
}
}
@mixin is-color($color) {
@include base-style($color);
&[loading] {
@include base-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&[loading],
&:not([hover-class]):active {
color: $-color-white;
border-color: mix(darken($color,10%), $-color-white);
background-color: mix($color, $-color-white);
}
}
}
@mixin base-plain-style($color) {
color:$color;
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 70%);
&:not([hover-class]):active {
background: mix($-color-white, $color, 80%);
color: $color;
outline: none;
border-color: mix($-color-white, $color, 50%);
}
}
@mixin is-plain($color){
&[plain] {
@include base-plain-style($color);
&[loading] {
@include base-plain-style($color);
&::before {
margin-right:5px;
}
}
&[disabled] {
&,
&:active {
color: mix($-color-white, $color, 40%);
background-color: mix($-color-white, $color, 90%);
border-color: mix($-color-white, $color, 80%);
}
}
}
}
.uni-btn {
margin: 5px;
color: #393939;
border:1px solid #ccc;
font-size: 16px;
font-weight: 200;
background-color: #F9F9F9;
// TODO 暂时处理边框隐藏一边的问题
overflow: visible;
&::after{
border: none;
}
&:not([type]),&[type=default] {
color: #999;
&[loading] {
background: none;
&::before {
margin-right:5px;
}
}
&[disabled]{
color: mix($-color-white, #999, 60%);
&,
&[loading],
&:active {
color: mix($-color-white, #999, 60%);
background-color: mix($-color-white,$-color-black , 98%);
border-color: mix($-color-white, #999, 85%);
}
}
&[plain] {
color: #999;
background: none;
border-color: $uni-border-1;
&:not([hover-class]):active {
background: none;
color: mix($-color-white, $-color-black, 80%);
border-color: mix($-color-white, $-color-black, 90%);
outline: none;
}
&[disabled]{
&,
&[loading],
&:active {
background: none;
color: mix($-color-white, #999, 60%);
border-color: mix($-color-white, #999, 85%);
}
}
}
}
&:not([hover-class]):active {
color: mix($-color-white, $-color-black, 50%);
}
&[size=mini] {
font-size: 16px;
font-weight: 200;
border-radius: 8px;
}
&.uni-btn-small {
font-size: 14px;
}
&.uni-btn-mini {
font-size: 12px;
}
&.uni-btn-radius {
border-radius: 999px;
}
&[type=primary] {
@include is-color($uni-primary);
@include is-plain($uni-primary)
}
&[type=success] {
@include is-color($uni-success);
@include is-plain($uni-success)
}
&[type=error] {
@include is-color($uni-error);
@include is-plain($uni-error)
}
&[type=warning] {
@include is-color($uni-warning);
@include is-plain($uni-warning)
}
&[type=info] {
@include is-color($uni-info);
@include is-plain($uni-info)
}
}
/* #endif */
uni_modules/uni-scss/styles/setting/_text.scss 0 → 100644
@mixin get-styles($k,$c) {
@if $k == size or $k == weight{
font-#{$k}:#{$c}
}@else{
#{$k}:#{$c}
}
}
@each $key, $child in $uni-headings {
/* #ifndef APP-NVUE */
.uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
/* #ifdef APP-NVUE */
.container .uni-#{$key} {
@each $k, $c in $child {
@include get-styles($k,$c)
}
}
/* #endif */
}
uni_modules/uni-scss/styles/setting/_variables.scss 0 → 100644
// @use "sass:math";
@import '../tools/functions.scss';
// 间距基础倍数
$uni-space-root: 2 !default;
// 边框半径默认值
$uni-radius-root:5px !default;
$uni-radius: () !default;
// 边框半径断点
$uni-radius: map-deep-merge(
(
0: 0,
// TODO 当前版本暂时不支持 sm 属性
// 'sm': math.div($uni-radius-root, 2),
null: $uni-radius-root,
'lg': $uni-radius-root * 2,
'xl': $uni-radius-root * 6,
'pill': 9999px,
'circle': 50%
),
$uni-radius
);
// 字体家族
$body-font-family: 'Roboto', sans-serif !default;
// 文本
$heading-font-family: $body-font-family !default;
$uni-headings: () !default;
$letterSpacing: -0.01562em;
$uni-headings: map-deep-merge(
(
'h1': (
size: 32px,
weight: 300,
line-height: 50px,
// letter-spacing:-0.01562em
),
'h2': (
size: 28px,
weight: 300,
line-height: 40px,
// letter-spacing: -0.00833em
),
'h3': (
size: 24px,
weight: 400,
line-height: 32px,
// letter-spacing: normal
),
'h4': (
size: 20px,
weight: 400,
line-height: 30px,
// letter-spacing: 0.00735em
),
'h5': (
size: 16px,
weight: 400,
line-height: 24px,
// letter-spacing: normal
),
'h6': (
size: 14px,
weight: 500,
line-height: 18px,
// letter-spacing: 0.0125em
),
'subtitle': (
size: 12px,
weight: 400,
line-height: 20px,
// letter-spacing: 0.00937em
),
'body': (
font-size: 14px,
font-weight: 400,
line-height: 22px,
// letter-spacing: 0.03125em
),
'caption': (
'size': 12px,
'weight': 400,
'line-height': 20px,
// 'letter-spacing': 0.03333em,
// 'text-transform': false
)
),
$uni-headings
);
// 主色
$uni-primary: #2979ff !default;
$uni-primary-disable:lighten($uni-primary,20%) !default;
$uni-primary-light: lighten($uni-primary,25%) !default;
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37 !default;
$uni-success-disable:lighten($uni-success,20%) !default;
$uni-success-light: lighten($uni-success,25%) !default;
$uni-warning: #f3a73f !default;
$uni-warning-disable:lighten($uni-warning,20%) !default;
$uni-warning-light: lighten($uni-warning,25%) !default;
$uni-error: #e43d33 !default;
$uni-error-disable:lighten($uni-error,20%) !default;
$uni-error-light: lighten($uni-error,25%) !default;
$uni-info: #8f939c !default;
$uni-info-disable:lighten($uni-info,20%) !default;
$uni-info-light: lighten($uni-info,25%) !default;
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a !default; // 主要文字
$uni-base-color: #6a6a6a !default; // 常规文字
$uni-secondary-color: #909399 !default; // 次要文字
$uni-extra-color: #c7c7c7 !default; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0 !default;
$uni-border-2: #EDEDED !default;
$uni-border-3: #DCDCDC !default;
$uni-border-4: #B9B9B9 !default;
// 常规色
$uni-black: #000000 !default;
$uni-white: #ffffff !default;
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
// 背景色
$uni-bg-color: #f7f7f7 !default;
/* 水平间距 */
$uni-spacing-sm: 8px !default;
$uni-spacing-base: 15px !default;
$uni-spacing-lg: 30px !default;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
uni_modules/uni-scss/styles/tools/functions.scss 0 → 100644
// 合并 map
@function map-deep-merge($parent-map, $child-map){
$result: $parent-map;
@each $key, $child in $child-map {
$parent-has-key: map-has-key($result, $key);
$parent-value: map-get($result, $key);
$parent-type: type-of($parent-value);
$child-type: type-of($child);
$parent-is-map: $parent-type == map;
$child-is-map: $child-type == map;
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
$result: map-merge($result, ( $key: $child ));
}@else {
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
}
}
@return $result;
};
uni_modules/uni-scss/theme.scss 0 → 100644
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
// 辅助色
$uni-success: #4cd964;
// 警告色
$uni-warning: #f0ad4e;
// 错误色
$uni-error: #dd524d;
// 描述色
$uni-info: #909399;
// 中性色
$uni-main-color: #303133;
$uni-base-color: #606266;
$uni-secondary-color: #909399;
$uni-extra-color: #C0C4CC;
// 背景色
$uni-bg-color: #f5f5f5;
// 边框颜色
$uni-border-1: #DCDFE6;
$uni-border-2: #E4E7ED;
$uni-border-3: #EBEEF5;
$uni-border-4: #F2F6FC;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
uni_modules/uni-scss/variables.scss 0 → 100644
@import './styles/setting/_variables.scss';
// 间距基础倍数
$uni-space-root: 2;
// 边框半径默认值
$uni-radius-root:5px;
// 主色
$uni-primary: #2979ff;
$uni-primary-disable:mix(#fff,$uni-primary,50%);
$uni-primary-light: mix(#fff,$uni-primary,80%);
// 辅助色
// 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
$uni-success: #18bc37;
$uni-success-disable:mix(#fff,$uni-success,50%);
$uni-success-light: mix(#fff,$uni-success,80%);
$uni-warning: #f3a73f;
$uni-warning-disable:mix(#fff,$uni-warning,50%);
$uni-warning-light: mix(#fff,$uni-warning,80%);
$uni-error: #e43d33;
$uni-error-disable:mix(#fff,$uni-error,50%);
$uni-error-light: mix(#fff,$uni-error,80%);
$uni-info: #8f939c;
$uni-info-disable:mix(#fff,$uni-info,50%);
$uni-info-light: mix(#fff,$uni-info,80%);
// 中性色
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
$uni-main-color: #3a3a3a; // 主要文字
$uni-base-color: #6a6a6a; // 常规文字
$uni-secondary-color: #909399; // 次要文字
$uni-extra-color: #c7c7c7; // 辅助说明
// 边框颜色
$uni-border-1: #F0F0F0;
$uni-border-2: #EDEDED;
$uni-border-3: #DCDCDC;
$uni-border-4: #B9B9B9;
// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;
/* 水平间距 */
$uni-spacing-sm: 8px;
$uni-spacing-base: 15px;
$uni-spacing-lg: 30px;
// 阴影
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
// 蒙版
$uni-mask: rgba($color: #000000, $alpha: 0.4);
uni_modules/v-tabs/changelog.md 0 → 100644
## 2.1.2（2023-06-12）
1. [新增]添加`z-index`参数控制层级大小，默认1993
2. [说明]以后该插件只更新`uni_modules`方式的，`zip`方式的不提供更新了
## 2.1.1（2022-09-16）
1. 将插件更新为`uni_modules`方式
## 2.1.0（2022-08-12）
1. 增加`disable`参数，控制是否可以点击，只能应用在数组对象中，见[disabled 的用法](#112-当tabs使用的数组对象的方式特定参数需要注意一下)
```js
export default {
data() {
return {
tabs: [{ id: 1, name: '' }]
}
}
}
```
## 2.0.10（2022-01-27）
1. 更新属性line-animation设置为false可以不要动画，这是好多朋友问到，特此加上
## 2.0.9（2020-10-12）
1. 修复 v-tabs 第一次可能出现第一个标签显示不完整的情况
2. 修改了 pages/tabs/order 示例文件
## 2.0.8（2020-09-21）
1. 修复添加 fixed 属性后，滚动条无效
2. 修复选项很少的情况下，下划线计算计算错误
3. 新增 paddingItem 属性，设置选项左右边距（上下边距需要设置 height 属性，或者设置 padding 属性）
## 2.0.7（2020-09-17）
1. 紧急修复 bug，横向滑动不了的情况
## 2.0.6（2020-09-16）
1. 新增 fixed 属性，是否固定在顶部，示例地址：pages/tabs/tabs-static
2. 优化之前的页面结构
## 2.0.5（2020-09-09）
1. 修复 width 错误，dom 加载的时候没有及时获取到 data 属性导致的 。
## 2.0.4（2020-08-29）
1. 优化异步改变 tabs 后，下划线不初始化问题
2. github 地址上有图 2 的源码，需要的自行下载，页面路径：pages/tabs/order.vue
## 2.0.3（2020-08-20）
1. 优化 节点查询 和 选中渲染
2. 优化支付宝中 createSelectorQuery() 的影响
**特别说明：**
> 支付宝中平铺方法和其他方法不能在一个页面中出现，不然有一个显示错误（具体什么原因没查到，有好心的人发现了，望告知一下，感谢
## 2.0.2（2020-08-19）
1. 优化 change 事件触发机制
## 2.0.1（2020-08-16）
1. 修改默认高度为 70rpx
2. 新增属性 bgColor，可设置背景颜色，默认 #fff
3. 新增整个 tab 的 padding 属性，默认 0
## 2.0.0（2020-08-13）
1. 全新的 v-tabs 2.0
2. 支持 H5 小程序 APP
3. 属性高度可配置
## 1.3.2（2020-07-21）
1. 新增 auto 的配置，是否平铺 tab
2. 修复文档上的错误示例（感谢 lushgwe@163.com 的反馈）
## 1.3.0（2020-07-05）
1. 新增 padding 的可配置
2. 修复 v-model 双向绑定问题
3. 修复初始化下划线没定位的为题
## 1.2.0（2020-06-19）
1. 添加注释
2. 修复 bug
## 1.1.8（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
3. 修复下划线不居中问题
## 1.1.6（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
## 1.1.4（2020-06-11）
1. 添加 change 事件
2. 修复插件内容问题
## 1.1.2（2020-06-11）
1. 添加 change 事件
## 1.1.1（2020-06-09）
1. 修复小程序端选中的下划线不显示问题
2. 新增 tab 高度设置
3. lineHeight 修改为只支持 String 方式
## 1.1.0（2020-06-09）
1. 修复小程序端选中的下划线不显示问题
2. 新增 tab 高度设置
3. lineHeight 修改为只支持 String 方式
## 1.0.0（2020-06-04）
1. 更新插件1.0.0
\ No newline at end of file
uni_modules/v-tabs/components/v-tabs/v-tabs.vue 0 → 100644
<template>
<view :id="elId" class="v-tabs">
<scroll-view
id="scrollContainer"
:scroll-x="scroll"
:scroll-left="scroll ? scrollLeft : 0"
:scroll-with-animation="scroll"
:style="{ position: fixed ? 'fixed' : 'relative', zIndex }"
>
<view
class="v-tabs__container"
:style="{
display: scroll ? 'inline-flex' : 'flex',
whiteSpace: scroll ? 'nowrap' : 'normal',
background: bgColor,
height,
padding
}"
>
<view
:class="['v-tabs__container-item', { disabled: !!v.disabled }]"
v-for="(v, i) in tabs"
:key="i"
:style="{
color: current == i ? activeColor : color,
fontSize: current == i ? fontSize : fontSize,
fontWeight: bold && current == i ? 'bold' : '',
justifyContent: !scroll ? 'center' : '',
flex: scroll ? '' : 1,
padding: paddingItem
}"
@click="change(i)"
>
{{ field ? v[field] : v }}
</view>
<view
v-if="!pills"
:class="['v-tabs__container-line', { animation: lineAnimation }]"
:style="{
background: lineColor,
width: lineWidth + 'px',
height: lineHeight,
borderRadius: lineRadius,
left: lineLeft + 'px',
transform: `translateX(-${lineWidth / 2}px)`
}"
></view>
<view
v-else
:class="['v-tabs__container-pills', { animation: lineAnimation }]"
:style="{
background: pillsColor,
borderRadius: pillsBorderRadius,
left: pillsLeft + 'px',
width: currentWidth + 'px',
height
}"
></view>
</view>
</scroll-view>
<view
class="v-tabs__placeholder"
:style="{
height: fixed ? height : '0',
padding
}"
></view>
</view>
</template>
<script>
/**
* v-tabs
* @property {Number} value 选中的下标
* @property {Array} tabs tabs 列表
* @property {String} bgColor = '#fff' 背景颜色
* @property {String} color = '#333' 默认颜色
* @property {String} activeColor = '#2979ff' 选中文字颜色
* @property {String} fontSize = '28rpx' 默认文字大小
* @property {String} activeFontSize = '28rpx' 选中文字大小
* @property {Boolean} bold = [true | false] 选中文字是否加粗
* @property {Boolean} scroll = [true | false] 是否滚动
* @property {String} height = '60rpx' tab 的高度
* @property {String} lineHeight = '10rpx' 下划线的高度
* @property {String} lineColor = '#2979ff' 下划线的颜色
* @property {Number} lineScale = 0.5 下划线的宽度缩放比例
* @property {String} lineRadius = '10rpx' 下划线圆角
* @property {Boolean} pills = [true | false] 是否胶囊样式
* @property {String} pillsColor = '#2979ff' 胶囊背景色
* @property {String} pillsBorderRadius = '10rpx' 胶囊圆角大小
* @property {String} field 如果是对象，显示的键名
* @property {Boolean} fixed = [true | false] 是否固定
* @property {String} paddingItem = '0 22rpx' 选项的边距
* @property {Boolean} lineAnimation = [true | false] 下划线是否有动画
* @property {Number} zIndex = 1993 默认层级
*
* @event {Function(current)} change 改变标签触发
*/
export default {
props: {
value: {
type: Number,
default: 0
},
tabs: {
type: Array,
default () {
return []
}
},
bgColor: {
type: String,
default: '#fff'
},
padding: {
type: String,
default: '0'
},
color: {
type: String,
default: '#333'
},
activeColor: {
type: String,
default: '#2979ff'
},
fontSize: {
type: String,
default: '28rpx'
},
activeFontSize: {
type: String,
default: '32rpx'
},
bold: {
type: Boolean,
default: true
},
scroll: {
type: Boolean,
default: true
},
height: {
type: String,
default: '70rpx'
},
lineColor: {
type: String,
default: '#2979ff'
},
lineHeight: {
type: String,
default: '10rpx'
},
lineScale: {
type: Number,
default: 0.5
},
lineRadius: {
type: String,
default: '10rpx'
},
pills: {
type: Boolean,
default: false
},
pillsColor: {
type: String,
default: '#2979ff'
},
pillsBorderRadius: {
type: String,
default: '10rpx'
},
field: {
type: String,
default: ''
},
fixed: {
type: Boolean,
default: false
},
paddingItem: {
type: String,
default: '0 22rpx'
},
lineAnimation: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1993
}
},
data () {
return {
elId: '',
lineWidth: 30,
currentWidth: 0, // 当前选项的宽度
lineLeft: 0, // 滑块距离左侧的位置
pillsLeft: 0, // 胶囊距离左侧的位置
scrollLeft: 0, // 距离左边的位置
containerWidth: 0, // 容器的宽度
current: 0 // 当前选中项
}
},
watch: {
value (newVal) {
this.current = newVal
this.$nextTick(() => {
this.getTabItemWidth()
})
},
current (newVal) {
this.$emit('input', newVal)
},
tabs (newVal) {
this.$nextTick(() => {
this.getTabItemWidth()
})
}
},
methods: {
// 产生随机字符串
randomString (len) {
len = len || 32
let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
let maxPos = $chars.length
let pwd = ''
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd
},
// 切换事件
change (index) {
const isDisabled = !!this.tabs[index].disabled
if (this.current !== index && !isDisabled) {
this.current = index
this.$emit('change', index)
}
},
// 获取左移动位置
getTabItemWidth () {
let query = uni
.createSelectorQuery()
// #ifndef MP-ALIPAY
.in(this)
// #endif
// 获取容器的宽度
query
.select(`#scrollContainer`)
.boundingClientRect((data) => {
if (!this.containerWidth && data) {
this.containerWidth = data.width
}
})
.exec()
// 获取所有的 tab-item 的宽度
query
.selectAll('.v-tabs__container-item')
.boundingClientRect((data) => {
if (!data) {
return
}
let lineLeft = 0
let currentWidth = 0
if (data) {
for (let i = 0; i < data.length; i++) {
if (i < this.current) {
lineLeft += data[i].width
} else if (i == this.current) {
currentWidth = data[i].width
} else {
break
}
}
}
// 当前滑块的宽度
this.currentWidth = currentWidth
// 缩放后的滑块宽度
this.lineWidth = currentWidth * this.lineScale * 1
// 滑块作移动的位置
this.lineLeft = lineLeft + currentWidth / 2
// 胶囊距离左侧的位置
this.pillsLeft = lineLeft
// 计算滚动的距离左侧的位置
if (this.scroll) {
this.scrollLeft = this.lineLeft - this.containerWidth / 2
}
})
.exec()
}
},
mounted () {
this.elId = 'xfjpeter_' + this.randomString()
this.current = this.value
this.$nextTick(() => {
this.getTabItemWidth()
})
}
}
</script>
<style lang="scss" scoped>
.v-tabs {
width: 100%;
box-sizing: border-box;
overflow: hidden;
::-webkit-scrollbar {
display: none;
}
&__container {
min-width: 100%;
position: relative;
display: inline-flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
&-item {
display: flex;
align-items: center;
height: 100%;
position: relative;
z-index: 10;
// padding: 0 11px;
transition: all 0.3s;
white-space: nowrap;
&.disabled {
opacity: 0.5;
color: #999;
}
}
&-line {
position: absolute;
bottom: 0;
}
&-pills {
position: absolute;
z-index: 9;
}
&-line,
&-pills {
&.animation {
transition: all 0.3s linear;
}
}
}
}
</style>
uni_modules/v-tabs/package.json 0 → 100644
{
"id": "v-tabs",
"displayName": "自定义 tab 选项卡 2",
"version": "2.1.2",
"description": "自定义 tab ，支持多种样式，支持 h5 小程序 app",
"keywords": [
"v-tabs",
"tab",
"选项卡"
],
"repository": "https://github.com/xfjpeter/uni-plugins",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"type": "component-vue",
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": "1207791534"
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "n"
},
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "n",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y",
"钉钉": "y",
"快手": "y",
"飞书": "y",
"京东": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
uni_modules/v-tabs/readme.md 0 → 100644
## 插件说明
> 这是 `v-tabs` 插件的升级版本，参数上有很大变动，支持 `H5` `小程序` `手机端`，如果是在之前的插件上升级的话，请注意参数的变更，触发的事件没有变更。
## 使用说明
### 1、最基本用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
current: 0,
tabs: ['军事', '国内', '新闻新闻', '军事', '国内', '新闻', '军事', '国内', '新闻']
}
},
methods: {
changeTab(index) {
console.log('当前选中的项：' + index)
}
}
}
```
### 2、平铺整个屏幕
- 视图文件
```html
<v-tabs v-model="activeTab" :scroll="false" :tabs="['全部', '进行中', '已完成']"></v-tabs>
```
- 脚本文件
```js
export default {
data() {
return {
activeTab: 0
}
}
}
```
### 3、胶囊用法
- 视图文件
```html
<v-tabs v-model="current" :tabs="tabs" :pills="true" line-height="0" activeColor="#fff" @change="changeTab"></v-tabs>
```
- 脚本文件
```js
data() {
return {
current: 2,
tabs: [
'军事',
'国内',
'新闻新闻',
'军事',
'国内',
'新闻',
'军事',
'国内',
'新闻',
],
},
methods: {
changeTab(index) {
console.log('当前选中索引：' + index)
}
}
}
```
## 文档说明
### 1、属性说明
| 参数 | 类型 | 默认值 | 说明 |
| :---------------: | :-----: | :-------: | :-----------------------------------------------------------------------: |
| tabs | Array | [] | 控制 tab 的列表 |
| value | Number | 0 | 必传(双向绑定的值) |
| color | String | '#333' | 默认文字颜色 |
| activeColor | String | '#2979ff' | 选中文字的颜色 |
| fontSize | String | '28rpx' | 默认文字大小(rpx 或 px)（弃用） |
| bold | Boolean | true | 是否加粗选中项 |
| scroll | Boolean | true | 是否显示滚动条，平铺设置 false |
| height | String | '70rpx' | tab 高度(rpx 或 px) |
| lineHeight | String | '10rpx' | 滑块高度(rpx 或 px) |
| lineColor | String | '#2979ff' | 滑块的颜色 |
| lineScale | Number | 0.5 | 滑块宽度缩放值 |
| lineRadius | String | '10rpx' | 滑块圆角宽度(rpx 或 px) |
| pills | Boolean | false | 是否开启胶囊 |
| pillsColor | String | '#2979ff' | 胶囊背景颜色(rpx 或 px) |
| pillsBorderRadius | String | '10rpx' | 胶囊圆角宽度(rpx 或 px) |
| field | String | '' | 如果 tabs 子项是对象，输入需要展示的键名 |
| bgColor | String | '#fff' | 背景色，支持 linear-gradient 渐变 |
| padding | String | '0' | 整个 tab padding 属性 |
| fixed | Boolean | false | 是否固定在顶部 |
| paddingItem | String | '0 22rpx' | 选项的边距（设置上下不生效，需要设置高度） |
| lineAnimation | Boolean | true | 是否需要 line 和 pills 的动画，在隐藏页面后默认移动到第一个的时候比较实用 |
| zIndex | Number | 1993 | 控制 tab 的层级，默认1993 |
### 1.1 `tabs`参数展开说明
#### 1.1.1 当`tabs`仅仅是单纯的数组时候，没有什么特别的地方
```js
export default {
data() {
return {
tabs: ['全部', '待付款', '待消费', '已完成', '已评价', '已过期', '已退款']
}
}
}
```
#### 1.1.2 当`tabs`使用的数组对象的方式，特定参数需要注意一下
- `disabled` 参数，可以控制按钮是否可以点击
```js
export default {
data() {
return {
tabs: [
{ id: 1, name: '待付款', disabled: false },
{ id: 2, name: '待收货', disabled: false },
{ id: 3, name: '待评价', disabled: false },
{ id: 4, name: '退款/售后', disabled: true },
{ id: 5, name: '我的订单', disabled: false }
]
}
}
}
```
### 2、事件说明
| 名称 | 参数 | 说明 |
| :----: | :---: | :--------------------------------: |
| change | index | 改变选中项触发, index 选中项的下标 |
## 更新日志
### 2.1.1（2022-09-16）
1. 将插件更新为`uni_modules`方式
### 2022-08-12
1. 增加`disable`参数，控制是否可以点击，只能应用在数组对象中，见[disabled 的用法](#112-当tabs使用的数组对象的方式特定参数需要注意一下)
```js
export default {
data() {
return {
tabs: [{ id: 1, name: '' }]
}
}
}
```
### 2022-01-27
1. 更新属性`line-animation`设置为`false`可以不要动画，这是好多朋友问到，特此加上
### 2020-09-24
1. 修复 `v-tabs` 第一次可能出现第一个标签显示不完整的情况
2. 修改了 `pages/tabs/order` 示例文件
### 2020-09-21
1. 修复添加 `fixed` 属性后，滚动条无效
2. 修复选项很少的情况下，下划线计算计算错误
3. 新增 `paddingItem` 属性，设置选项左右边距（上下边距需要设置 `height` 属性，或者设置 `padding` 属性）
**写在最后：**
欢迎各位老铁反馈 bug ，本人后端 PHP 一枚，只是应为感兴趣前端，自己琢磨，自己搞。如果你在使用的过程中有什么不合理，需要优化的，都可以在下面评论（或加我 QQ: 1207791534），本人看见后回复、修正，感谢。
### 2020-09-17
1. 紧急修复 bug，横向滑动不了的情况
### 2020-09-16
1. 新增 `fixed` 属性，是否固定在顶部，示例地址：`pages/tabs/tabs-static`
2. 优化之前的页面结构
**注意：**
1. 使用 `padding` 属性的时候，尽量不要左右边距，会导致下划线位置不对
2. 如果不绑定 `v-model` 会导致 `change` 事件改变的时候，下划线不跟随问题
### 2020-09-09
1. 修复 `width` 错误，dom 加载的时候没有及时获取到 `data` 属性导致的。
### 2020-08-29
1. 优化异步改变 `tabs` 后，下划线不初始化问题
2. `github` 地址上有图 2 的源码，需要的自行下载，页面路径：`pages/tabs/order`
### 2020-08-20
1. 优化 `节点查询` 和 `选中渲染`
2. 优化支付宝中 `createSelectorQuery()` 的影响
### 2020-08-19
1. 优化 `change` 事件触发机制
### 2020-08-16
1. 修改默认高度为 `70rpx`
2. 新增属性 `bgColor`，可设置背景颜色，默认 `#fff`
3. 新增整个 `tab` 的 `padding` 属性，默认 `0`
### 2020-08-13
1. 全新的 `v-tabs 2.0`
2. 支持 `H5` `小程序` `APP`
3. 属性高度可配置
## 预览
![v-tabs 2.0.1.gif](https://tva1.sinaimg.cn/large/007S8ZIlgy1ghsv40mj76g30ai0i2tsd.gif)
![v-tabs 2.0.2.gif](https://img-cdn-aliyun.dcloud.net.cn/stream/plugin_screens/42f3a920-a674-11ea-8a24-ffee00625e2e_1.png?v=1597912963)
uni_modules/zebra-swiper/LICENSE 0 → 100644
MIT License
Copyright (c) 2022 zebra-ui
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
uni_modules/zebra-swiper/README.md 0 → 100644
<p align="center">
<img alt="logo" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/logo.png" width="220" style="margin-bottom: 10px;">
</p>
<h1 align="center">ZebraSwiper</h1>
<p align="center">基于uniapp，全面对标swiper，并实现全端兼容。</p>
<p align="center">
🔥 <a href="https://swiper.zebraui.com/">文档网站</a>
&nbsp;
&nbsp;
🚀 <a href="https://zebraui.com/" target="_blank">zebraUI组件库</a>
</p>
## 介绍
[zebra-swiper](https://github.com/zebra-ui/zebra-uniapp-swiper) 是基于uniapp开发的一款移动端轮播组件，已实现swiper组件90%的功能。
[uniapp](https://uniapp.dcloud.io/README)的[swiper](https://uniapp.dcloud.io/component/swiper)组件存在很大的局限性，无法完成一些复杂的轮播效果。
而zebra-swiper不仅可以实现一些3D轮播效果，还可以通过参数来定义你想要的效果。
## 特性
- 全面对标swiper，并实现全端兼容
- 兼容多端，小程序也可以实现3D轮播效果
- 可自定义3D效果
- 多种示例，总有一种适合你
## 安装
### npm方式
```bash
npm i @zebra-ui/swiper
```
```js
// pages.json
{
"easycom": {
"^z-(.*)": "@zebra-ui/swiper/components/z-$1/z-$1.vue"
},
"pages": [...],
"globalStyle": {...}
}
```
### uni_modules方式
[插件市场](https://ext.dcloud.net.cn/plugin?id=7273)直接导入即可
## 手机预览
<div>
<img alt="wx" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/wx.jpg" width="200" />
<img alt="ali" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/ali.jpg" width="200" />
<img alt="h5" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/h5.png" width="200" />
</div>
## 预览
<div style="display:flex;flex-wrap:wrap;margin-top:30px;">
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif1.gif" width="300" style="margin:20px;" />
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif2.gif" width="300" style="margin:20px;" />
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif3.gif" width="300" style="margin:20px;" />
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif4.gif" width="300" style="margin:20px;" />
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif5.gif" width="300" style="margin:20px;" />
<img alt="gif" src="https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/gif/gif6.gif" width="300" style="margin:20px;" />
</div>
## 群
QQ群：947159437
![image](https://assets-1256020106.cos.ap-beijing.myqcloud.com/zebra-swiper/zebra-swiper-group-code.png)
\ No newline at end of file
uni_modules/zebra-swiper/changelog.md 0 → 100644
## 2.2.6（2023-02-20）
`2023-02-20`
**Feat**
- `panorama`全景切换效果新增`stretch`参数，用于控制slide之间的距离。
**Fix**
- 修复字节小程序3D样式失效的问题。
- 修复`panorama`切换效果参数无效的问题。
- 修复`autoHeight`高度自适应使用报错的问题。（`autoHeight`选项可以正常使用，且在大多数场景下可以正确获取高度）
## 2.2.5（2022-11-10）
`2022-11-10`
**Feat**
- `cards`卡片切换效果新增`perSlideRotate`，`perSlideOffset`参数用于控制卡片的偏移距离及旋转角度。
- 微信小程序中默认使用虚拟节点渲染，即`virtualHost`: `true`。
**Fix**
- 修复`pagination`选项开启后，动态控制`swiper`禁用或启用报错的问题。
- 修复支付宝小程序3D样式失效的问题。
## 2.2.4（2022-09-23）
`2022-09-23`
**Feat**
- 新增`noSwiping`参数控制是否禁止触摸。当禁止触摸开启时，不可通过滑动切换。可通过自动切换，`slideTo`等方法切换。
**Fix**
- 修复`vue3`下`app`触摸无效的问题。
- 新增触摸事件`touchcancel`。
## 2.2.3（2022-07-26）
`2022-07-26`
**Feat**
- 卡片切换效果`cards`新增`rotate`参数，用于控制卡片切换时是否发生旋转。
**Fix**
- 修复微信小程序使用`zebra-swiper`时，页面无法滚动。
- 修复`app`报错`toJSON`的问题。
- 修复`swiper`在`vue3`中无法自动播放的问题。
## 2.2.2（2022-07-01）
`2022-07-01`
**Feat**
- 兼容`PC`浏览器端。
- 初步兼容`VUE3`。
**Fix**
- 修复使用`zebra-swiper`时，页面无法滚动。（`zebra-swiper`将不再默认阻止事件冒泡）。
## 2.2.1（2022-03-31）
`2022-03-31`
**Feat**
- 新增`changeDirection`方法，该方法用于动态改变swiper方向。
- `z-swiper-item`新增`swiperItemWidth` `swiperItemHeight` 属性，用于在swiper无法正确获取宽高的情况下设置swiper的宽高（如快手小程序）。
**Fix**
- 消除快手小程序itemPropWxs的警告。
## 2.2.0（2022-03-21）
`2022-03-21`
**本次更新调整了组件的整体架构及组件入口逻辑。主要为性能优化，不涉及新功能。**
不兼容性更新：
- `z-swiper` 的 `customStyle` 由字符串类型更改为Object类型（与`z-swiper-item`保持一致）。
- `z-swiper-item` 删除了加载的效果。
**Fix**
- 修复因数据改变而无法正确触发更新的问题。
- 修复方法 `disable` `enable` 提示未定义的问题。
**Perf**
- 组件首次渲染速度优化。
- loop模式处理数据后才开始加载swiper，确保数据的一致性。
- 部分同步方法更改为异步，体验更流畅。
## 2.1.4（2022-03-05）
`2022-03-05`
**Feat**
- 高级案例加入开屏页。[点击预览](https://swiper.zebraui.com/h5/pages/demos/paper/index)
**Fix**
- 修复百度小程序高度计算错误的问题。
## 2.1.3（2022-03-03）
`2022-03-03`
**Feat**
- 新增高级案例模块。
- 高级案例加入环游地球。[点击预览](https://swiper.zebraui.com/h5/pages/demos/travel-slider/index)
- 微信小程序，qq小程序使用wxs赋值样式。
## 2.1.2（2022-03-02）
`2022-03-02`
本次改版涉及所有开启loop的功能。请更新后删除手动拼接的数据。
**Feat**
- loop无限循环模式无需再手动拼接数据。
## 2.1.1（2022-03-01）
`2022-03-01`
**Fix**
- 修复字节小程序轮播内容不显示的问题。
- 修复字节小程序获取位置信息错误的问题。
**Docs**
- [文档新增事件。](https://swiper.zebraui.com/basic/events/)
## 2.1.0（2022-02-27）
`2022-02-27`
更新须知
使用组件时，需在z-swiper标签上以`v-model`的形式传入list数据，也就是要循环的列表数据，该属性为强制性，不加会导致意外错误。例：
之前的方式：
```vue
<z-swiper>
<z-swiper-item v-for="(item,index) in list" :key="index">
<image class="image" :src="item" mode="aspectFill">
</image>
</z-swiper-item>
</z-swiper>
```
现在的方式：
```vue
<z-swiper v-model="list"> //这里传入的需和下方循环的保持一致
<z-swiper-item v-for="(item,index) in list" :key="index">
<image class="image" :src="item" mode="aspectFill">
</image>
</z-swiper-item>
</z-swiper>
```
这个操作也为swiper接管数据操作铺垫，对后续很多新功能非常有用，也为loop无限循环的痛点提供了解决方案。
**Fix**
- 修复数据为空时报错。
- 修复请求数据时swiper提前初始化的问题。
**Feat**
- 新增滚动条功能。
## 2.0.1（2022-02-25）
`2022-02-25`
**Fix**
- 修复插槽内容class样式不生效问题。
**Feat**
- 新增缩略图功能。
## 2.0.0（2022-02-24）
`2022-02-24`
**Feat**
- 该版本为破坏性改版，无法兼容1.0。
- 代码重构，使用模块化将功能分割，大幅提升性能，方便后续维护。
- 全面对标swiper组件，并实现全端兼容。小程序也可实现炫酷的轮播效果。
- 所有切换效果全部支持loop无限循环。
- 新增全景切换效果。
- 新增轮播块功能，可自定义显示数量。
- 新增进度条指示器。
## 1.0.7（2022-01-25）
`2022-01-25`
**Feat**
- 新增轮播切换器功能，可使用默认切换或自定义切换。
- 示例项目新增切换器的使用及自定义切换器。
## 1.0.6（2022-01-24）
`2022-01-24`
**Chore**
- 示例项目新增指示器的使用及自定义指示器。
## 1.0.5（2022-01-21）
`2022-01-21`
**Docs**
- README.md新增手机预览，包含微信，支付宝小程序码，H5二维码。
## 1.0.4（2022-01-20）
`2022-01-20`
**Style**
- 示例项目首页px统一修改为rpx。
## 1.0.3（2022-01-19）
`2022-01-19`
**Fix**
- 修复轮播设置为纵向时，高度错误的问题。
- 修复在百度小程序中样式错乱的问题。
## 1.0.2（2022-01-18）
`2022-01-18`
**Docs**
- README.md新增gif预览图
- 修复因未知原因引起的uni_modules组件上传错误的问题。
`2022-01-14`
### [v1.0.1](https://github.com/zebra-ui/zebra-uniapp-swiper)
**Feature**
- 新增zebra-swiper,zebra-swiper-item组件。
- 新增多种3D切换效果。包括渐变，方块，3D流，翻转，卡片，创意性等多种切换效果。
- 新增[示例项目](https://swiper.zebraui.com)，包含多种切换效果示例。
uni_modules/zebra-swiper/components/z-swiper-item/z-swiper-item.vue 0 → 100644
<template>
<!-- #ifndef MP-WEIXIN || MP-QQ -->
<view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<view :class="['swiper-slide',slideClass]" :style="[itemStyle,customStyle]" @click.stop="onClickSlide"
:swiperItemTransform="wxsItemTransform" :change:swiperItemTransform="zSwiperWxs.wxsItemTransformObserver">
<!-- #endif -->
<slot></slot>
</view>
</template>
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<script src="../../wxs/z-swiper-wxs.wxs" module="zSwiperWxs" lang="wxs"></script>
<!-- #endif -->
<script>
import {
ChildrenMixin
} from '../../libs/mixins/relation.js';
import {
getRect
} from '../../libs/utils/utils.js';
export default {
name: "z-swipe-item",
// #ifdef MP-WEIXIN
options: {
virtualHost: true
},
// #endif
mixins: [ChildrenMixin('zSwipe')],
props: {
customStyle: {
type: Object,
default: () => {
return {};
}
},
swiperItemWidth: {
type: [String, Number],
default: 0
},
swiperItemHeight: {
type: [String, Number],
default: 0
},
},
data() {
return {
wxsItemTransform: "",
itemStyle: {},
offsetLeft: 0,
offsetTop: 0,
itemClass: [],
width: 0,
height: 0,
};
},
mounted() {
this.getSize();
},
computed: {
slideClass() {
return this.itemClass.join(" ");
}
},
watch: {
swiperItemWidth: {
handler(val) {
if (val) {
this.$set(this.itemStyle, 'width', this.unitFormat(val, "rpx"))
}
},
immediate: true
},
swiperItemHeight: {
handler(val) {
if (val) {
this.$set(this.itemStyle, 'height', this.unitFormat(val, "rpx"))
}
},
immediate: true
}
},
methods: {
unitFormat(val, type) {
if (type == "rpx") {
if (val.includes("rpx") || val.includes("px")) {
return val;
} else {
return val + 'px';
}
}
if (type == "number") {
if (val.includes("rpx")) {
return uni.upx2px(parseInt(val.replace("rpx", "")))
} else if (!val.includes("rpx") && val.includes("px")) {
return parseInt(val.replace("px", ""))
} else {
return val;
}
}
},
onClickSlide(event) {
this.$emit("click", {
event,
index: this.index
});
this.parent.swiper.updateClickedSlide(this.index);
this.parent.swiper.emit("slideClick", this.index);
},
transform(value) {
// #ifndef MP-WEIXIN || MP-QQ
this.$set(this.itemStyle, 'transform', value)
// #endif
// #ifdef MP-WEIXIN || MP-QQ
this.wxsItemTransform = value
// #endif
},
transition(value) {
// #ifdef MP-BAIDU
this.$set(this.itemStyle, 'transitionDuration', `${value}ms`)
// #endif
// #ifndef MP-BAIDU
this.$set(this.itemStyle, 'transition-duration', `${value}ms`)
// #endif
},
willChange(value) {
this.$set(this.itemStyle, 'will-change', value)
},
css(value) {
Object.keys(value).forEach((item) => {
this.$set(this.itemStyle, item, value[item])
})
},
transitionEnd(callback, duration) {
setTimeout(callback, duration)
},
getSize() {
const query = uni.createSelectorQuery().in(this);
return new Promise((resolve, reject) => {
query.select('.swiper-slide').boundingClientRect(data => {
if (this.swiperItemWidth) {
this.width = this.unitFormat(this.swiperItemWidth, "number");
this.height = data.height;
}
if (this.swiperItemHeight) {
this.width = data.width;
this.height = this.unitFormat(this.swiperItemHeight, "number");
}
if (!this.swiperItemWidth && !this.swiperItemHeight) {
this.width = data.width;
this.height = data.height;
}
resolve({
width: this.width,
height: this.height
})
}).exec();
})
},
addClass(value) {
this.itemClass = Array.from(new Set([...this.itemClass, ...value.split(" ")]));
},
removeClass(value) {
this.itemClass = this.itemClass.filter(item => !value.split(" ").includes(item));
},
hasClass(value) {
return this.itemClass.includes(value);
},
nextAll() {
return this.parent.children.filter((item) => {
return item.index > this.index
})
},
prevAll() {
return this.parent.children.filter((item) => {
return item.index < this.index
}).reverse()
},
}
}
</script>
<style scoped lang="scss">
@import '../../libs/core.scss';
</style>
uni_modules/zebra-swiper/components/z-swiper/z-swiper.vue 0 → 100644
<template>
<view :id="'swiper'+_uid"
:class="['swiper',contentClass,containerClasses,options.direction === 'vertical'?'swiper-vertical':'']"
:style="[customStyle]">
<!-- #ifndef MP-WEIXIN || MP-QQ -->
<view :class="['swiper-wrapper']" :style="[wrapperStyle]" @click="onClickWrapper" @touchstart="onTouchStart"
@touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
<!-- #endif -->
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<view :class="['swiper-wrapper']" :style="[wrapperStyle]" @click="onClickWrapper"
@touchstart="zSwiperWxs.onTouchStartWxs" @touchmove="zSwiperWxs.onTouchMoveWxs"
@touchend="zSwiperWxs.onTouchEndWxs" @touchcancel="zSwiperWxs.onTouchEndWxs"
:swiperTransform="wxsTransform" :change:swiperTransform="zSwiperWxs.wxsTransformObserver">
<!-- #endif -->
<slot></slot>
<!-- 在loop模式下，为group填充空白slide -->
<template v-if="loopBlankShow">
<z-swiper-item v-for="(item,index) in loopBlankNumber" :key="index">
</z-swiper-item>
</template>
<template v-if="cubeShadowShowWrapper">
<view class="swiper-cube-shadow" :style="[cubeShadowStyle]"></view>
</template>
</view>
<template v-if="cubeShadowShowRoot">
<view class="swiper-cube-shadow" :style="[cubeShadowStyle]"></view>
</template>
<slot name="indicator"></slot>
<template v-if="showIndicators">
<view :class="['swiper-pagination',paginationClass]" :style="[paginationStyle]">
<template v-if="paginationType == 'bullets'">
<view v-for="(item,index) in paginationContent" :key="index"
:class="[item.classContent.join(' ')]" :style="[item.styleContent]"
@click="paginationItemClick(index)">
</view>
</template>
<template v-if="paginationType == 'fraction'">
<text :class="paginationContent.currentClass">{{paginationContent.text}}</text>/<text
:class="paginationContent.totalClass">{{paginationContent.total}}</text>
</template>
<template v-if="paginationType == 'progressbar'">
<text :class="paginationContent.progressbarFillClass"
:style="[paginationContent.styleContent]"></text>
</template>
</view>
</template>
<template v-if="(showPrevButton||showPrevButtonSlot)">
<view :class="['swiper-button-prev',prevClass]" @click="prevClick">
<view v-if="!showPrevButtonSlot" class="zebra-icon zebra-icon-circle_chevron_left"></view>
<slot v-else name="pre-button"></slot>
</view>
</template>
<template v-if="(showNextButton||showNextButtonSlot)">
<view :class="['swiper-button-next',nextClass]" @click="nextClick">
<view v-if="!showNextButtonSlot" class="zebra-icon zebra-icon-circle_chevron_right"></view>
<slot v-else name="next-button"></slot>
</view>
</template>
<template v-if="scrollbarShow">
<view :class="['swiper-scrollbar',scrollbarClass]" :style="[scrollbarStyle]"
@click.stop="onClickScrollbar" @touchstart.stop="onTouchStartScrollbar"
@touchmove.stop.prevent="onTouchMoveScrollbar" @touchend.stop="onTouchEndScrollbar">
<view class="swiper-scrollbar-drag" :style="[scrollbarItemStyle]">
</view>
</view>
</template>
</view>
</template>
<!-- #ifdef MP-WEIXIN || MP-QQ -->
<script src="../../wxs/z-swiper-wxs.wxs" module="zSwiperWxs" lang="wxs"></script>
<!-- #endif -->
<script>
import {
getAllRect,
getRect
} from '../../libs/utils/utils.js';
// vue2
import {
getParams
} from '../../libs/vue2/get-params.js';
import {
initSwiper,
mountSwiper
} from '../../libs/vue2/init-swiper.js';
import {
needsScrollbar,
needsNavigation,
needsPagination,
uniqueClasses,
extend,
} from '../../libs/vue2/utils.js';
import {
renderLoop,
calcLoopedSlides
} from '../../libs/vue2/loop.js';
import {
getChangedParams
} from '../../libs/vue2/get-changed-params.js';
import {
updateSwiper
} from '../../libs/vue2/update-swiper.js';
import {
renderVirtual,
updateOnVirtualData
} from '../../libs/vue2/virtual.js';
//mixin
import {
ParentMixin
} from '../../libs/mixins/relation.js';
export default {
name: "z-swipe",
// #ifdef MP-WEIXIN
options: {
virtualHost: true
},
// #endif
mixins: [
ParentMixin('zSwipe')
],
// #ifdef VUE3
emits: ['update:modelValue', 'touch-start', 'touch-move', 'touch-end', 'transitionend', 'slideClick',
'_beforeBreakpoint',
'_containerClasses',
'_slideClass',
'_slideClasses', '_swiper',
'activeIndexChange', 'afterInit', 'autoplay', 'autoplayStart', 'autoplayStop', 'autoplayPause',
'autoplayResume', 'beforeDestroy', 'beforeInit', 'beforeLoopFix', 'beforeResize', 'beforeSlideChangeStart',
'beforeTransitionStart', 'breakpoint', 'changeDirection', 'click', 'disable', 'doubleTap', 'doubleClick',
'destroy', 'enable', 'fromEdge', 'hashChange', 'hashSet', 'imagesReady', 'init', 'keyPress',
'lazyImageLoad', 'lazyImageReady', 'lock', 'loopFix', 'momentumBounce', 'navigationHide', 'navigationShow',
'observerUpdate', 'orientationchange', 'paginationHide', 'paginationRender', 'paginationShow',
'paginationUpdate', 'progress', 'reachBeginning', 'reachEnd', 'realIndexChange', 'resize', 'scroll',
'scrollbarDragEnd', 'scrollbarDragMove', 'scrollbarDragStart', 'setTransition', 'setTranslate',
'slideChange', 'slideChangeTransitionEnd', 'slideChangeTransitionStart', 'slideNextTransitionEnd',
'slideNextTransitionStart', 'slidePrevTransitionEnd', 'slidePrevTransitionStart',
'slideResetTransitionStart', 'slideResetTransitionEnd', 'sliderMove', 'sliderFirstMove',
'slidesLengthChange', 'slidesGridLengthChange', 'snapGridLengthChange', 'snapIndexChange', 'swiper', 'tap',
'toEdge', 'touchEnd', 'touchMove', 'touchMoveOpposite', 'touchStart', 'transitionEnd', 'transitionStart',
'unlock', 'update', 'zoomChange', 'beforeMount'
],
// #endif
props: {
customStyle: {
type: Object,
default: () => {
return {};
}
},
options: {
type: Object,
default: () => {
return {}
}
},
// #ifdef VUE2
value: {
type: Array,
default: () => {
return []
}
},
// #endif
// #ifdef VUE3
modelValue: {
type: Array,
default: () => {
return []
}
}
// #endif
},
data() {
return {
wxsTransform: "",
wrapperStyle: {},
contentClass: '',
nextElClass: [],
prevElClass: [],
paginationElClass: [],
paginationItemElClass: [],
loopBlankShow: false,
loopBlankNumber: 0,
cubeShadowShowWrapper: false,
cubeShadowShowRoot: false,
cubeShadowStyle: {},
eventsListeners: {},
showPrevButton: false,
showPrevButtonSlot: false,
showNextButton: false,
showNextButtonSlot: false,
showIndicators: false,
paginationContent: [],
paginationType: '',
paginationStyle: {},
scrollbarElClass: [],
scrollbarStyle: {},
scrollbarItemStyle: {},
rectInfo: null,
// vue2
containerClasses: 'swiper',
virtualData: null,
firstLoad: true,
originalDataList: [],
loopUpdateData: false
};
},
computed: {
// #ifdef VUE3
value() {
return this.modelValue
},
// #endif
// #ifdef VUE3
_uid() {
return this._.uid
},
// #endif
nextClass() {
return this.nextElClass.join(" ");
},
prevClass() {
return this.prevElClass.join(" ");
},
paginationClass() {
return this.paginationElClass.join(" ");
},
paginationItemClass() {
return this.paginationItemElClass.join(" ");
},
scrollbarClass() {
return this.scrollbarElClass.join(" ");
},
scrollbarShow() {
return needsScrollbar(this.options)
}
},
created() {
const {
params: swiperParams,
passedParams
} = getParams(this.options);
this.swiperElRef = 'swiper';
this.swiperParams = swiperParams;
this.oldPassedParamsRef = passedParams;
let slidesRef = this.slidesRef;
swiperParams.onAny = (event, ...args) => {
// #ifdef MP
// 字节小程序此处报错，因此无法使用v-on监听事件
// #ifndef MP-TOUTIAO
this.$emit(event, {}, ...args.filter((item, index) => {
return index > 0
}));
// #endif
// #endif
// #ifndef MP
this.$emit(event, ...args);
// #endif
};
Object.assign(swiperParams.on, {
_containerClasses(swiper, classes) {
this.containerClasses = classes;
},
});
this.$watch(() => {
return {
value: this.value,
options: this.options
}
}, (val) => {
// virtual模式处理
if (this.swiperParams && this.swiperParams.virtual) {
if (!this.virtualData && val.options.virtual.slides.length) {
this.swiperParams.virtual.slides = val.options.virtual.slides;
// this.swiperParams.virtual.slides = val.value;
const extendWith = {
cache: false,
slides: val.options.virtual.slides,
// slides: val.value,
renderExternal: data => {
console.log("最终数据", data)
this.virtualData = data;
this.$emit("input", data.slides);
// updateOnVirtualData(this.swiper);
},
renderExternalUpdate: false
};
extend(this.swiperParams.virtual, extendWith);
// this.$emit("input", [val.options.virtual.slides[0]]);
// this.virtualData = [val.options.virtual.slides[0]];
this.loadSwiper();
// console.log(this.swiper)
}
// extend(swiperRef.originalParams.virtual, extendWith);
}
// loop模式处理
if (this.swiperParams && this.swiperParams.loop) {
if (this.originalDataList.length && (this.originalDataList.toString() == val.value
.toString())) {
this.loopUpdateData = true;
// 百度小程序watch晚于子组件加载
// #ifdef MP-BAIDU
if (this.firstLoad) {
this.loadSwiper();
}
// #endif
} else {
this.loopUpdateData = false;
let slides = renderLoop(this, this.swiperParams, this.value);
if (this.swiperParams.loop && !this.loopUpdateData && slides.data.toString() !=
val.value.toString()) {
this.loopUpdateData = true;
// #ifdef VUE2
this.$emit("input", slides.data)
// #endif
// #ifdef VUE3
this.$emit("update:modelValue", slides.data)
// #endif
return
}
}
}
if (this.swiper && !this.firstLoad) {
if (this.virtualData && val.options.virtual.type == "cut") {
const style = this.swiper.isHorizontal() ? {
[this.swiper.rtlTranslate ? 'right' :
'left'
]: `${this.virtualData.offset}px`
} : {
top: `${this.virtualData.offset}px`
};
this.children
// .filter((slide, index) => index >= this.virtualData.from && index <= this
// .virtualData
// .to)
.map(slide => {
slide.css(style)
// if (!slide.props) slide.props = {};
// if (!slide.props.style) slide.props.style = {};
// slide.props.swiperRef = swiperRef;
// slide.props.style = style;
// return h(slide.type, {
// ...slide.props
// }, slide.children);
});
}
this.updateSwiper(val.value, val.options, this.children);
}
}, {
deep: true,
immediate: true
})
this.$watch(() => {
return this.$data
}, (val) => {
if (this.swiper && this.swiper.native) {
Object.assign(this.swiper.native, {
val
});
}
}, {
deep: true
})
this.$watch(() => {
return this.virtualData
}, (val) => {
if (this.swiper && this.virtualData) {
updateOnVirtualData(this.swiper);
}
}, {
deep: true
})
uni.$on("childrenReady" + this._uid, async (children) => {
children.dataSwiperSlideIndex = children.index;
if (this.children.length == this.value.length) {
Promise.all(this.children.map((item) => {
return item.getSize();
})).then((res) => {
if (this.swiperParams && this.swiperParams.loop) {
if (this.originalDataList.length && (this.originalDataList
.toString() == this.value
.toString())) {
if (this.firstLoad) {
this.loadSwiper();
}
} else {
return
}
} else {
if (this.firstLoad) {
this.loadSwiper();
}
}
this.updateSwiper(this.value, this.options, this.children);
})
}
})
},
// #ifdef VUE2
beforeDestroy() {
if (this.swiper && !this.swiper.destroyed) {
this.swiper.destroy(true, false);
}
},
// #endif
// #ifdef VUE3
beforeUnmount() {
if (this.swiper && !this.swiper.destroyed) {
this.swiper.destroy(true, false);
}
},
// #endif
methods: {
loadSwiper() {
let swiperParams = this.swiperParams;
this.slidesRef = this.children;
this.oldSlidesRef = this.slidesRef;
let swiperRef = initSwiper(swiperParams, {
...this.$data,
...this.$props,
swiperElId: 'swiper' + this._uid,
emit: this.emit.bind(this),
updateData: this.updateData.bind(this),
getRect: this.getRect.bind(this),
getRectScrollbar: this.getRectScrollbar.bind(this),
willChange: this.willChange.bind(this),
transform: this.transform.bind(this),
transition: this.transition.bind(this),
scrollbarTransform: this.scrollbarTransform.bind(this),
scrollbarTransition: this.scrollbarTransition.bind(this),
scrollbarItemTransform: this.scrollbarItemTransform.bind(this),
scrollbarItemTransition: this.scrollbarItemTransition.bind(this),
addClass: this.addClass.bind(this),
removeClass: this.removeClass.bind(this),
addPaginationClass: this.addPaginationClass.bind(this),
removePaginationClass: this.removePaginationClass.bind(this),
addScrollbarClass: this.addScrollbarClass.bind(this),
removeScrollbarClass: this.removeScrollbarClass.bind(this),
setCss: this.setCss.bind(this),
css: this.setCss.bind(this),
paginationCss: this.setPaginationCss.bind(this),
scrollbarCss: this.scrollbarCss.bind(this),
scrollbarItemCss: this.scrollbarItemCss.bind(this),
addNextElClass: this.addNextElClass.bind(this),
addPrevElClass: this.addPrevElClass.bind(this),
removeNextElClass: this.removeNextElClass.bind(this),
removePrevElClass: this.removePrevElClass.bind(this),
cubeShadowCss: this.cubeShadowCss.bind(this),
cubeShadowTransform: this.cubeShadowTransform.bind(this),
cubeShadowTransition: this.cubeShadowTransition.bind(this),
});
this.swiper = swiperRef;
swiperRef.loopCreate = () => {};
swiperRef.loopDestroy = () => {};
if (swiperParams.loop) {
swiperRef.loopedSlides = calcLoopedSlides(this.slidesRef, swiperParams);
}
if (!this.swiper) return;
mountSwiper({
el: this.swiperElRef,
nextEl: this.nextElRef,
prevEl: this.prevElRef,
paginationEl: this.paginationElRef,
scrollbarEl: this.scrollbarElRef,
swiper: this.swiper,
},
this.swiperParams,
);
this.$emit('swiper');
this.firstLoad = false;
},
updateSwiper(value, options, children) {
this.swiper.slides = children;
this.slidesRef = children;
let initializedRef = this.initializedRef;
let swiperRef = this.swiper;
let slidesRef = this.slidesRef;
let oldPassedParamsRef = this.oldPassedParamsRef;
let oldSlidesRef = this.oldSlidesRef;
let breakpointChanged = this.breakpointChanged;
let nextElRef = this.nextElRef;
let prevElRef = this.prevElRef;
let paginationElRef = this.paginationElRef;
let scrollbarElRef = this.scrollbarElRef;
// set initialized flag
if (!initializedRef && swiperRef) {
swiperRef.emitSlidesClasses();
initializedRef = true;
}
// watch for params change
const {
passedParams: newPassedParams
} = getParams(options);
const changedParams = getChangedParams(
newPassedParams,
oldPassedParamsRef,
slidesRef,
oldSlidesRef,
);
this.oldPassedParamsRef = newPassedParams;
this.oldSlidesRef = slidesRef;
if (
(changedParams.length || breakpointChanged) &&
swiperRef &&
!swiperRef.destroyed
) {
updateSwiper({
swiper: swiperRef,
slides: slidesRef,
passedParams: newPassedParams,
changedParams,
nextEl: nextElRef,
prevEl: prevElRef,
scrollbarEl: scrollbarElRef,
paginationEl: paginationElRef,
});
}
breakpointChanged = false;
},
emit(event, data) {
this.$emit(event, ...data)
},
async getRect() {
let rectInfo = await getRect(this, '.swiper');
this.rectInfo = rectInfo;
return rectInfo;
},
async getRectScrollbar() {
let rectInfo = await getRect(this, '.swiper-scrollbar');
return rectInfo;
},
updateData(value) {
Object.keys(value).forEach((item) => {
this.$set(this, item, value[item])
})
},
willChange(value) {
this.$set(this.wrapperStyle, 'will-change', value)
},
transform(value) {
// #ifndef MP-WEIXIN || MP-QQ
this.$set(this.wrapperStyle, 'transform', value)
// #endif
// #ifdef MP-WEIXIN || MP-QQ
this.wxsTransform = value;
// #endif
},
transition(value) {
// #ifdef MP-BAIDU
this.$set(this.wrapperStyle, 'transitionDuration', `${value}ms`)
// #endif
// #ifndef MP-BAIDU
this.$set(this.wrapperStyle, 'transition-duration', `${value}ms`)
// #endif
},
setCss(value) {
Object.keys(value).forEach((item) => {
this.$set(this.wrapperStyle, item, value[item])
})
},
scrollbarTransform(value) {
this.$set(this.scrollbarStyle, 'transform', value)
},
scrollbarTransition(value) {
this.$set(this.scrollbarStyle, 'transitionDuration', `${value}ms`)
},
scrollbarItemTransform(value) {
this.$set(this.scrollbarItemStyle, 'transform', value)
},
scrollbarItemTransition(value) {
this.$set(this.scrollbarItemStyle, 'transitionDuration', `${value}ms`)
},
addClass(value) {
// #ifdef MP-ALIPAY || MP-TOUTIAO
this.contentClass = Array.from(new Set([...this.contentClass.split(" "), ...value.split(" ")])).join(" ");
// #endif
// #ifndef MP-ALIPAY || MP-TOUTIAO
this.contentClass = Array.from(new Set([...this.contentClass, ...value.split(" ")]));
// #endif
},
removeClass(value) {
// #ifdef MP-ALIPAY || MP-TOUTIAO
this.contentClass = this.contentClass.split(" ").filter(item => !value.split(" ").includes(item)).join(
" ");
// #endif
// #ifndef MP-ALIPAY || MP-TOUTIAO
this.contentClass = this.contentClass.filter(item => !value.split(" ").includes(item));
// #endif
},
addPaginationClass(value) {
this.paginationElClass = Array.from(new Set([...this.paginationElClass, ...value.split(" ")]));
},
removePaginationClass(value) {
this.paginationElClass = this.paginationElClass.filter(item => !value.split(" ").includes(item));
},
addScrollbarClass(value) {
this.scrollbarElClass = Array.from(new Set([...this.scrollbarElClass, ...value.split(" ")]));
},
removeScrollbarClass(value) {
this.scrollbarElClass = this.scrollbarElClass.filter(item => !value.split(" ").includes(item));
},
setPaginationCss(value) {
Object.keys(value).forEach((item) => {
this.$set(this.paginationStyle, item, value[item])
})
},
scrollbarCss(value) {
Object.keys(value).forEach((item) => {
this.$set(this.scrollbarStyle, item, value[item])
})
},
scrollbarItemCss(value) {
Object.keys(value).forEach((item) => {
this.$set(this.scrollbarItemStyle, item, value[item])
})
},
addNextElClass(value) {
this.nextElClass = Array.from(new Set([...this.nextElClass, ...value.split(" ")]));
},
addPrevElClass(value) {
this.prevElClass = Array.from(new Set([...this.prevElClass, ...value.split(" ")]));
},
removeNextElClass(value) {
this.nextElClass = this.nextElClass.filter(item => !value.split(" ").includes(item));
},
removePrevElClass(value) {
this.prevElClass = this.prevElClass.filter(item => !value.split(" ").includes(item));
},
setSwiperOn(event, callback) {
if (!this.eventsListeners[event]) this.eventsListeners[event] = {};
this.eventsListeners[event] = callback;
},
paginationItemClick(index) {
this.swiper.emit("paginationItemClick", index)
},
prevClick() {
this.swiper.emit("prevClick");
},
nextClick() {
this.swiper.emit("nextClick");
},
onTouchStart(event) {
this.swiper.onTouchStart(event);
},
onTouchStartSwiperWxs(event) {
this.swiper.onTouchStart(event);
},
onTouchMove(event) {
this.swiper.onTouchMove(event);
},
onTouchMoveSwiperWxs(event) {
this.swiper.onTouchMove(event);
},
onTouchEnd(event) {
this.swiper.onTouchEnd(event);
},
onTouchEndSwiperWxs(event) {
this.swiper.onTouchEnd(event);
},
onClickWrapper(event) {
this.$emit("click", event);
},
onClickScrollbar(event) {
this.$emit("scrollbarClick", event);
},
onTouchStartScrollbar(event) {
this.swiper.emit('touchStartScrollbar', event);
},
onTouchMoveScrollbar(event) {
this.swiper.emit('touchMoveScrollbar', event);
},
onTouchEndScrollbar(event) {
this.swiper.emit('touchEndScrollbar', event);
},
cubeShadowCss(value) {
Object.keys(value).forEach((item) => {
this.$set(this.cubeShadowStyle, item, value[item])
})
},
cubeShadowTransform(value) {
this.$set(this.cubeShadowStyle, 'transform', value)
},
cubeShadowTransition(value) {
this.$set(this.cubeShadowStyle, 'transitionDuration', `${value}ms`)
},
}
}
</script>
<style scoped lang="scss">
@import '../../libs/core.scss';
@import "../../static/css/iconfont.css";
.swiper {
&__prev--button {
position: absolute;
left: 30rpx;
top: 50%;
display: flex;
color: #1989fa;
font-size: 44rpx;
z-index: 10;
}
&__prev--button--disable {
position: absolute;
left: 30rpx;
top: 50%;
display: flex;
color: #1989fa;
font-size: 44rpx;
opacity: .35;
z-index: 10;
}
&__next--button {
position: absolute;
right: 30rpx;
top: 50%;
display: flex;
color: #1989fa;
font-size: 44rpx;
z-index: 10;
}
&__next--button--disable {
position: absolute;
right: 30rpx;
top: 50%;
display: flex;
color: #1989fa;
font-size: 44rpx;
opacity: .35;
z-index: 10;
}
}
</style>
uni_modules/zebra-swiper/components/zebra-swiper/zebra-swiper.vue 0 → 100644
<!-- uni_modules发布插件时，components中必须有一个和父级名称一致的组件，否则提示指定目录不存在，这样做的具体原因未知。故此文件为无用文件，仅做为上传插件时消除错误使用。 -->
<template>
</template>
<script>
</script>
<style>
</style>
uni_modules/zebra-swiper/index.js 0 → 100644
import Swiper from "./libs/core.js";
import Autoplay from './modules/autoplay/autoplay.js';
import FreeMode from './modules/free-mode/free-mode.js';
import EffectFade from './modules/effect-fade/effect-fade.js';
import EffectCube from './modules/effect-cube/effect-cube.js';
import EffectCoverflow from './modules/effect-coverflow/effect-coverflow.js';
import EffectFlip from './modules/effect-flip/effect-flip.js';
import EffectCards from './modules/effect-cards/effect-cards.js';
import EffectCreative from './modules/effect-creative/effect-creative.js';
import EffectPanorama from './modules/effect-panorama/effect-panorama.js';
import EffectCarousel from './modules/effect-carousel/effect-carousel.js';
import Navigation from './modules/navigation/navigation.js';
import Pagination from './modules/pagination/pagination.js';
import Thumbs from './modules/thumbs/thumbs.js';
import Scrollbar from './modules/scrollbar/scrollbar.js';
import Virtual from './modules/virtual/virtual.js';
import WillChange from './modules/will-change/will-change.js';
export {
default as Swiper,
default
}
from './libs/core.js';
const modules = [Autoplay, FreeMode, EffectFade, EffectCube, EffectCoverflow, EffectFlip, EffectCards, EffectCreative,
EffectPanorama, EffectCarousel, Navigation, Pagination, Thumbs, Scrollbar, WillChange, Virtual
];
Swiper.use(modules);
uni_modules/zebra-swiper/libs/check-overflow/index.js 0 → 100644
function checkOverflow() {
const swiper = this;
const {
isLocked: wasLocked,
params
} = swiper;
const {
slidesOffsetBefore
} = params;
if (slidesOffsetBefore) {
const lastSlideIndex = swiper.slides.length - 1;
const lastSlideRightEdge = swiper.slidesGrid[lastSlideIndex] + swiper.slidesSizesGrid[lastSlideIndex] +
slidesOffsetBefore * 2;
swiper.isLocked = swiper.size > lastSlideRightEdge;
} else {
swiper.isLocked = swiper.snapGrid.length === 1;
}
if (params.allowSlideNext === true) {
swiper.allowSlideNext = !swiper.isLocked;
}
if (params.allowSlidePrev === true) {
swiper.allowSlidePrev = !swiper.isLocked;
}
if (wasLocked && wasLocked !== swiper.isLocked) {
swiper.isEnd = false;
}
if (wasLocked !== swiper.isLocked) {
swiper.emit(swiper.isLocked ? 'lock' : 'unlock');
}
}
export default {
checkOverflow
};
uni_modules/zebra-swiper/libs/classes/addClasses.js 0 → 100644
function prepareClasses(entries, prefix) {
const resultClasses = [];
entries.forEach(item => {
if (typeof item === 'object') {
Object.keys(item).forEach(classNames => {
if (item[classNames]) {
resultClasses.push(prefix + classNames);
}
});
} else if (typeof item === 'string') {
resultClasses.push(prefix + item);
}
});
return resultClasses;
}
export default function addClasses() {
const swiper = this;
const {
classNames,
params,
rtl,
$el,
device,
support
} = swiper; // prettier-ignore
const suffixes = prepareClasses(['initialized', params.direction, {
'pointer-events': !support.touch
}, {
'free-mode': swiper.params.freeMode && params.freeMode.enabled
}, {
'autoheight': params.autoHeight
}, {
'rtl': rtl
}, {
'grid': params.grid && params.grid.rows > 1
}, {
'grid-column': params.grid && params.grid.rows > 1 && params.grid.fill === 'column'
}, {
'android': device.android
}, {
'ios': device.ios
}, {
'css-mode': params.cssMode
}, {
'centered': params.cssMode && params.centeredSlides
}], params.containerModifierClass);
classNames.push(...suffixes);
$el.addClass([...classNames].join(' '));
swiper.emitContainerClasses();
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/classes/index.js 0 → 100644
import addClasses from './addClasses.js';
import removeClasses from './removeClasses.js';
export default {
addClasses,
removeClasses
};
\ No newline at end of file
uni_modules/zebra-swiper/libs/classes/removeClasses.js 0 → 100644
export default function removeClasses() {
const swiper = this;
const {
$el,
classNames
} = swiper;
$el.removeClass(classNames.join(' '));
swiper.emitContainerClasses();
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/core.js 0 → 100644
import {
extend,
now,
deleteProps
} from '../shared/utils.js';
import {
getSupport
} from '../shared/get-support.js';
import {
getDevice
} from '../shared/get-device.js';
import {
getBrowser
} from '../shared/get-browser.js';
import moduleExtendParams from './moduleExtendParams.js';
import eventsEmitter from './events-emitter.js';
import update from './update/index.js';
import translate from './translate/index.js';
import transition from './transition/index.js';
import defaults from './defaults.js';
import classes from './classes/index.js';
import checkOverflow from './check-overflow/index.js';
import slide from './slide/index.js';
import loop from './loop/index.js';
import grabCursor from './grab-cursor/index.js';
import events from './events/index.js';
import {
getRect
} from './utils/utils.js';
const prototypes = {
eventsEmitter,
update,
checkOverflow,
slide,
loop,
translate,
transition,
grabCursor,
events,
classes
};
const extendedDefaults = {};
class Swiper {
constructor(...args) {
const swiper = this;
let params;
let el;
let native;
if (args.length === 1 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -1) ===
'Object') {
params = args[0];
} else if (args.length === 2 && args[0].constructor && Object.prototype.toString.call(args[0]).slice(8, -
1) ===
'Object') {
params = args[0];
native = args[1];
} else {
[el, params, native] = args;
}
if (!params) params = {};
params = extend({}, params);
if (el && !params.el) params.el = el;
// Swiper Instance
swiper.__swiper__ = true;
swiper.support = getSupport();
swiper.device = getDevice({
userAgent: params.userAgent
});
swiper.browser = getBrowser();
swiper.eventsListeners = {};
swiper.eventsAnyListeners = [];
swiper.modules = [...swiper.__modules__];
swiper.native = native;
if (params.modules && Array.isArray(params.modules)) {
swiper.modules.push(...params.modules);
}
const allModulesParams = {};
swiper.modules.forEach(mod => {
mod({
swiper,
extendParams: moduleExtendParams(params, allModulesParams),
on: swiper.on.bind(swiper),
once: swiper.once.bind(swiper),
off: swiper.off.bind(swiper),
emit: swiper.emit.bind(swiper)
});
}); // Extend defaults with modules params
const swiperParams = extend({}, defaults, allModulesParams); // Extend defaults with passed params
swiper.params = extend({}, swiperParams, extendedDefaults, params);
swiper.originalParams = extend({}, swiper.params);
swiper.passedParams = extend({}, params); // add event listeners
if (swiper.params && swiper.params.on) {
Object.keys(swiper.params.on).forEach(eventName => {
swiper.on(eventName, swiper.params.on[eventName]);
});
}
if (swiper.params && swiper.params.onAny) {
swiper.onAny(swiper.params.onAny);
} // Save Dom lib
Object.assign(swiper, {
enabled: swiper.params.enabled,
el,
// Classes
classNames: [],
// Slides
slides: [],
slidesGrid: [],
snapGrid: [],
slidesSizesGrid: [],
// isDirection
isHorizontal() {
return swiper.params.direction === 'horizontal';
},
isVertical() {
return swiper.params.direction === 'vertical';
},
// Indexes
activeIndex: 0,
realIndex: 0,
//
isBeginning: true,
isEnd: false,
// Props
translate: 0,
previousTranslate: 0,
progress: 0,
velocity: 0,
animating: false,
// Locks
allowSlideNext: swiper.params.allowSlideNext,
allowSlidePrev: swiper.params.allowSlidePrev,
// Touch Events
touchEvents: function touchEvents() {
const touch = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
const desktop = ['pointerdown', 'pointermove', 'pointerup'];
swiper.touchEventsTouch = {
start: touch[0],
move: touch[1],
end: touch[2],
cancel: touch[3]
};
swiper.touchEventsDesktop = {
start: desktop[0],
move: desktop[1],
end: desktop[2]
};
return swiper.support.touch || !swiper.params.simulateTouch ? swiper.touchEventsTouch :
swiper.touchEventsDesktop;
}(),
touchEventsData: {
isTouched: undefined,
isMoved: undefined,
allowTouchCallbacks: undefined,
touchStartTime: undefined,
isScrolling: undefined,
currentTranslate: undefined,
startTranslate: undefined,
allowThresholdMove: undefined,
// Form elements to match
focusableElements: swiper.params.focusableElements,
// Last click time
lastClickTime: now(),
clickTimeout: undefined,
// Velocities
velocities: [],
allowMomentumBounce: undefined,
isTouchEvent: undefined,
startMoving: undefined
},
// Clicks
allowClick: true,
// Touches
allowTouchMove: swiper.params.allowTouchMove,
touches: {
startX: 0,
startY: 0,
currentX: 0,
currentY: 0,
diff: 0
},
// Images
imagesToLoad: [],
imagesLoaded: 0,
virtualList: [],
virtualIndexList: [],
});
swiper.emit('_swiper'); // Init
if (swiper.params.init) {
swiper.init();
} // Return app instance
return swiper;
}
enable() {
const swiper = this;
if (swiper.enabled) return;
swiper.enabled = true;
if (swiper.params.grabCursor) {
swiper.setGrabCursor();
}
swiper.emit('enable');
}
disable() {
const swiper = this;
if (!swiper.enabled) return;
swiper.enabled = false;
if (swiper.params.grabCursor) {
swiper.unsetGrabCursor();
}
swiper.emit('disable');
}
setProgress(progress, speed) {
const swiper = this;
progress = Math.min(Math.max(progress, 0), 1);
const min = swiper.minTranslate();
const max = swiper.maxTranslate();
const current = (max - min) * progress + min;
swiper.translateTo(current, typeof speed === 'undefined' ? 0 : speed);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
emitContainerClasses() {
const swiper = this;
if (!swiper.params._emitClasses || !swiper.el) return;
const cls = swiper.native.contentClass.split(' ').filter(className => {
return className.indexOf('swiper') === 0 || className.indexOf(swiper.params
.containerModifierClass) === 0;
});
swiper.emit('_containerClasses', cls.join(' '));
}
getSlideClasses(slideEl) {
const swiper = this;
return slideEl.slideClass.split(' ').filter(className => {
return className.indexOf('swiper-slide') === 0 || className.indexOf(swiper.params
.slideClass) === 0;
}).join(' ');
}
emitSlidesClasses() {
const swiper = this;
if (!swiper.params._emitClasses || !swiper.el) return;
const updates = [];
swiper.slides.forEach(slideEl => {
const classNames = swiper.getSlideClasses(slideEl);
updates.push({
slideEl,
classNames
});
swiper.emit('_slideClass', slideEl, classNames);
});
swiper.emit('_slideClasses', updates);
}
slidesPerViewDynamic(view = 'current', exact = false) {
const swiper = this;
const {
params,
slides,
slidesGrid,
slidesSizesGrid,
size: swiperSize,
activeIndex
} = swiper;
let spv = 1;
if (params.centeredSlides) {
let slideSize = slides[activeIndex].swiperSlideSize;
let breakLoop;
for (let i = activeIndex + 1; i < slides.length; i += 1) {
if (slides[i] && !breakLoop) {
slideSize += slides[i].swiperSlideSize;
spv += 1;
if (slideSize > swiperSize) breakLoop = true;
}
}
for (let i = activeIndex - 1; i >= 0; i -= 1) {
if (slides[i] && !breakLoop) {
slideSize += slides[i].swiperSlideSize;
spv += 1;
if (slideSize > swiperSize) breakLoop = true;
}
}
} else {
// eslint-disable-next-line
if (view === 'current') {
for (let i = activeIndex + 1; i < slides.length; i += 1) {
const slideInView = exact ?
slidesGrid[i] + slidesSizesGrid[i] - slidesGrid[activeIndex] < swiperSize :
slidesGrid[i] - slidesGrid[activeIndex] < swiperSize;
if (slideInView) {
spv += 1;
}
}
} else {
// previous
for (let i = activeIndex - 1; i >= 0; i -= 1) {
const slideInView = slidesGrid[activeIndex] - slidesGrid[i] < swiperSize;
if (slideInView) {
spv += 1;
}
}
}
}
return spv;
}
changeDirection(newDirection, needUpdate) {
if (needUpdate === void 0) {
needUpdate = true;
}
const swiper = this;
const currentDirection = swiper.params.direction;
if (!newDirection) {
// eslint-disable-next-line
newDirection = currentDirection === 'horizontal' ? 'vertical' : 'horizontal';
}
if (newDirection === currentDirection || newDirection !== 'horizontal' && newDirection !== 'vertical') {
return swiper;
}
swiper.$wrapperEl.removeClass(`${swiper.params.containerModifierClass}${currentDirection}`)
swiper.$wrapperEl.addClass(
`${swiper.params.containerModifierClass}${newDirection}`);
swiper.emitContainerClasses();
swiper.params.direction = newDirection;
swiper.slides.forEach(slideEl => {
if (newDirection === 'vertical') {
slideEl.css({
width: ''
})
} else {
slideEl.css({
height: ''
})
}
});
swiper.emit('changeDirection');
if (needUpdate) swiper.update();
return swiper;
}
async update(el) {
const swiper = this;
if (!swiper || swiper.destroyed) return;
const {
snapGrid,
params
} = swiper; // Breakpoints
el = await swiper.native.getRect();
if (!el) {
return false;
}
Object.assign(swiper, {
el,
$el: swiper.native,
});
swiper.emit('beforeUpdate');
if (params.breakpoints) {
swiper.setBreakpoint();
}
swiper.updateSize();
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
function setTranslate() {
const translateValue = swiper.rtlTranslate ? swiper.translate * -1 : swiper.translate;
const newTranslate = Math.min(Math.max(translateValue, swiper.maxTranslate()), swiper.minTranslate());
swiper.setTranslate(newTranslate);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
let translated;
if (swiper.params.freeMode && swiper.params.freeMode.enabled) {
setTranslate();
if (swiper.params.autoHeight) {
swiper.updateAutoHeight();
}
} else {
if ((swiper.params.slidesPerView === 'auto' || swiper.params.slidesPerView > 1) && swiper.isEnd && !
swiper.params.centeredSlides) {
translated = swiper.slideTo(swiper.slides.length - 1, 0, false, true);
} else {
translated = swiper.slideTo(swiper.activeIndex, 0, false, true);
}
if (!translated) {
setTranslate();
}
}
if (params.watchOverflow && snapGrid !== swiper.snapGrid) {
swiper.checkOverflow();
}
swiper.emit('update');
}
async mount(el) {
const swiper = this;
if (swiper.mounted) return true; // Find el
el = await swiper.native.getRect();
if (!el) {
return false;
}
swiper.emit('beforeMount'); // Set breakpoint
// let $wrapperEl = new DomSimulation(swiper.native);
// let $el = new DomSimulation(swiper.native);
// if (swiper.native && swiper.native.children && swiper.native.children.length) {
// swiper.native.children.forEach((item) => {
// item.$itemEl = new ChildDomSimulation(item);
// })
// }
Object.assign(swiper, {
$el: swiper.native,
el,
$wrapperEl: swiper.native,
wrapperEl: swiper.native,
mounted: true,
});
return true;
}
async init(el) {
const swiper = this;
if (swiper.initialized) return swiper;
const mounted = await swiper.mount(el);
if (mounted === false) return swiper;
swiper.emit('beforeInit'); // Set breakpoint
swiper.addClasses(); // Create loop
if (swiper.params.loop) {
swiper.loopCreate();
} // Update size
swiper.updateSize(); // Update slides
swiper.updateSlides();
if (swiper.params.watchOverflow) {
swiper.checkOverflow();
} // Set Grab Cursor
if (swiper.params.grabCursor && swiper.enabled) {
swiper.setGrabCursor();
}
// if (swiper.params.loop) {
// swiper.on("update", () => {
// swiper.slideTo(swiper.params.initialSlide + swiper.loopedSlides, 0, swiper.params
// .runCallbacksOnInit,
// false, true);
// })
// } else {
// swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
// } // Attach events
// Slide To Initial Slide
if (swiper.params.loop) {
swiper.slideTo(
swiper.params.initialSlide + swiper.loopedSlides,
0,
swiper.params.runCallbacksOnInit,
false,
true,
);
} else {
swiper.slideTo(swiper.params.initialSlide, 0, swiper.params.runCallbacksOnInit, false, true);
}
swiper.attachEvents(); // Init Flag
swiper.initialized = true; // Emit
swiper.emit('init');
swiper.emit('afterInit');
return swiper;
}
destroy(deleteInstance = true, cleanStyles = true) {
const swiper = this;
const {
params,
$el,
$wrapperEl,
slides
} = swiper;
if (typeof swiper.params === 'undefined' || swiper.destroyed) {
return null;
}
swiper.emit('beforeDestroy'); // Init Flag
swiper.initialized = false; // Detach events
swiper.detachEvents(); // Destroy loop
if (params.loop) {
swiper.loopDestroy();
} // Cleanup styles
swiper.emit('destroy'); // Detach emitter events
Object.keys(swiper.eventsListeners).forEach(eventName => {
swiper.off(eventName);
});
if (deleteInstance !== false) {
deleteProps(swiper);
}
swiper.destroyed = true;
return null;
}
static extendDefaults(newDefaults) {
extend(extendedDefaults, newDefaults);
}
static get extendedDefaults() {
return extendedDefaults;
}
static get defaults() {
return defaults;
}
static installModule(mod) {
if (!Swiper.prototype.__modules__) Swiper.prototype.__modules__ = [];
const modules = Swiper.prototype.__modules__;
if (typeof mod === 'function' && modules.indexOf(mod) < 0) {
modules.push(mod);
}
}
static use(module) {
if (Array.isArray(module)) {
module.forEach(m => Swiper.installModule(m));
return Swiper;
}
Swiper.installModule(module);
return Swiper;
}
}
Object.keys(prototypes).forEach(prototypeGroup => {
Object.keys(prototypes[prototypeGroup]).forEach(protoMethod => {
Swiper.prototype[protoMethod] = prototypes[prototypeGroup][protoMethod];
});
});
export default Swiper;
uni_modules/zebra-swiper/libs/core.scss 0 → 100644
$themeColor: #007aff !default;
:root {
--swiper-theme-color: #{$themeColor};
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-pointer-events {
touch-action: pan-y;
&.swiper-vertical {
touch-action: pan-x;
}
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight {
&,
.swiper-slide {
height: auto;
}
.swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
}
.swiper-slide-3d{
transform-style: preserve-3d;
}
/* 3D Effects */
.swiper-3d {
&,
&.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-wrapper,
.swiper-slide,
.swiper-slide-shadow,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow-top,
.swiper-slide-shadow-bottom,
.swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-slide-shadow,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow-top,
.swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
}
/* CSS Mode */
.swiper-css-mode {
> .swiper-wrapper {
overflow: auto;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
&::-webkit-scrollbar {
display: none;
}
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
}
.swiper-horizontal.swiper-css-mode {
> .swiper-wrapper {
scroll-snap-type: x mandatory;
}
}
.swiper-vertical.swiper-css-mode {
> .swiper-wrapper {
scroll-snap-type: y mandatory;
}
}
.swiper-centered {
> .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999;
}
&.swiper-horizontal {
> .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
height: 100%;
width: var(--swiper-centered-offset-after);
}
}
&.swiper-vertical {
> .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
width: 100%;
height: var(--swiper-centered-offset-after);
}
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
}
}
@import "../modules/effect-fade/effect-fade.scss";
@import "../modules/effect-cube/effect-cube.scss";
@import "../modules/effect-coverflow/effect-coverflow.scss";
@import "../modules/effect-flip/effect-flip.scss";
@import "../modules/effect-cards/effect-cards.scss";
@import "../modules/effect-creative/effect-creative.scss";
@import "../modules/effect-panorama/effect-panorama.scss";
@import "../modules/effect-carousel/effect-carousel.scss";
@import "../modules/navigation/navigation.scss";
@import "../modules/pagination/pagination.scss";
@import "../modules/thumbs/thumbs.scss";
@import "../modules/scrollbar/scrollbar.scss";
\ No newline at end of file
uni_modules/zebra-swiper/libs/defaults.js 0 → 100644
export default {
init: true,
direction: 'horizontal',
touchEventsTarget: 'wrapper',
initialSlide: 0,
speed: 300,
cssMode: false,
updateOnWindowResize: true,
resizeObserver: true,
nested: false,
createElements: false,
enabled: true,
focusableElements: 'input, select, option, textarea, button, video, label',
// Overrides
width: null,
height: null,
//
preventInteractionOnTransition: false,
// ssr
userAgent: null,
url: null,
// To support iOS's swipe-to-go-back gesture (when being used in-app).
edgeSwipeDetection: false,
edgeSwipeThreshold: 20,
// Autoheight
autoHeight: false,
// Set wrapper width
setWrapperSize: false,
// Virtual Translate
virtualTranslate: false,
virtualList: [],
virtualIndexList: [],
// Effects
effect: 'slide',
// 'slide' or 'fade' or 'cube' or 'coverflow' or 'flip'
// Breakpoints
breakpoints: undefined,
breakpointsBase: 'window',
// Slides grid
spaceBetween: 0,
slidesPerView: 1,
slidesPerGroup: 1,
slidesPerGroupSkip: 0,
slidesPerGroupAuto: false,
centeredSlides: false,
centeredSlidesBounds: false,
slidesOffsetBefore: 0,
// in px
slidesOffsetAfter: 0,
// in px
normalizeSlideIndex: true,
centerInsufficientSlides: false,
// Disable swiper and hide navigation when container not overflow
watchOverflow: true,
// Round length
roundLengths: false,
// Touches
touchRatio: 1,
touchAngle: 45,
simulateTouch: true,
shortSwipes: true,
longSwipes: true,
longSwipesRatio: 0.5,
longSwipesMs: 300,
followFinger: true,
allowTouchMove: true,
threshold: 0,
touchMoveStopPropagation: false,
touchStartPreventDefault: true,
touchStartForcePreventDefault: false,
touchReleaseOnEdges: false,
// Unique Navigation Elements
uniqueNavElements: true,
// Resistance
resistance: true,
resistanceRatio: 0.85,
// Progress
watchSlidesProgress: false,
// Cursor
grabCursor: false,
// Clicks
preventClicks: true,
preventClicksPropagation: true,
slideToClickedSlide: false,
// Images
preloadImages: true,
updateOnImagesReady: true,
// loop
loop: false,
loopAdditionalSlides: 0,
loopedSlides: null,
loopFillGroupWithBlank: false,
loopPreventsSlide: true,
// rewind
rewind: false,
// Swiping/no swiping
allowSlidePrev: true,
allowSlideNext: true,
swipeHandler: null,
// '.swipe-handler',
noSwiping: false,
noSwipingClass: 'swiper-no-swiping',
noSwipingSelector: null,
// Passive Listeners
passiveListeners: true,
// NS
containerModifierClass: 'swiper-',
// NEW
slideClass: 'swiper-slide',
slideBlankClass: 'swiper-slide-invisible-blank',
slideActiveClass: 'swiper-slide-active',
slideDuplicateActiveClass: 'swiper-slide-duplicate-active',
slideVisibleClass: 'swiper-slide-visible',
slideDuplicateClass: 'swiper-slide-duplicate',
slideNextClass: 'swiper-slide-next',
slideDuplicateNextClass: 'swiper-slide-duplicate-next',
slidePrevClass: 'swiper-slide-prev',
slideDuplicatePrevClass: 'swiper-slide-duplicate-prev',
wrapperClass: 'swiper-wrapper',
slideThumbsClass: 'swiper-slide-thumb',
// Callbacks
runCallbacksOnInit: true,
// Internals
_emitClasses: false,
willChange: false
};
uni_modules/zebra-swiper/libs/events-emitter.js 0 → 100644
/* eslint-disable no-underscore-dangle */
export default {
on(events, handler, priority) {
const self = this;
if (typeof handler !== 'function') return self;
const method = priority ? 'unshift' : 'push';
events.split(' ').forEach(event => {
if (!self.eventsListeners[event]) self.eventsListeners[event] = [];
self.eventsListeners[event][method](handler);
});
return self;
},
once(events, handler, priority) {
const self = this;
if (typeof handler !== 'function') return self;
function onceHandler(...args) {
self.off(events, onceHandler);
if (onceHandler.__emitterProxy) {
delete onceHandler.__emitterProxy;
}
handler.apply(self, args);
}
onceHandler.__emitterProxy = handler;
return self.on(events, onceHandler, priority);
},
onAny(handler, priority) {
const self = this;
if (typeof handler !== 'function') return self;
const method = priority ? 'unshift' : 'push';
if (self.eventsAnyListeners.indexOf(handler) < 0) {
self.eventsAnyListeners[method](handler);
}
return self;
},
offAny(handler) {
const self = this;
if (!self.eventsAnyListeners) return self;
const index = self.eventsAnyListeners.indexOf(handler);
if (index >= 0) {
self.eventsAnyListeners.splice(index, 1);
}
return self;
},
off(events, handler) {
const self = this;
if (!self.eventsListeners) return self;
events.split(' ').forEach(event => {
// self.native.off(event, handler);
if (typeof handler === 'undefined') {
self.eventsListeners[event] = [];
} else if (self.eventsListeners[event]) {
self.eventsListeners[event].forEach((eventHandler, index) => {
if (eventHandler === handler || eventHandler.__emitterProxy && eventHandler
.__emitterProxy === handler) {
self.eventsListeners[event].splice(index, 1);
}
});
}
});
return self;
},
emit(...args) {
const self = this;
if (!self.eventsListeners) return self;
let events;
let data;
let context;
if (typeof args[0] === 'string' || Array.isArray(args[0])) {
events = args[0];
data = args.slice(1, args.length);
context = self;
} else {
events = args[0].events;
data = args[0].data;
context = args[0].context || self;
}
data.unshift(context);
const eventsArray = Array.isArray(events) ? events : events.split(' ');
eventsArray.forEach(event => {
// console.log(event)
if (self.eventsAnyListeners && self.eventsAnyListeners.length) {
self.eventsAnyListeners.forEach(eventHandler => {
eventHandler.apply(context, [event, ...data]);
});
}
if (self.eventsListeners && self.eventsListeners[event]) {
self.eventsListeners[event].forEach(eventHandler => {
eventHandler.apply(context, data);
});
}
});
return self;
}
};
uni_modules/zebra-swiper/libs/events/index.js 0 → 100644
import onTouchStart from './onTouchStart.js';
import onTouchMove from './onTouchMove.js';
import onTouchEnd from './onTouchEnd.js';
import onResize from './onResize.js';
import onClick from './onClick.js';
import onScroll from './onScroll.js';
let dummyEventAttached = false;
function dummyEventListener() {}
const events = (swiper, method) => {
const {
params,
touchEvents,
wrapperEl,
device,
support
} = swiper;
let el = swiper.native;
const capture = !!params.nested;
const domMethod = method === 'on' ? 'on' : 'off';
const swiperMethod = method;
if (!support.touch) {
let desktopMethod = method === 'on' ? 'addEventListener' : 'removeEventListener';
if (document.querySelector(`#${swiper.$el.swiperElId}`)) {
document.querySelector(`#${swiper.$el.swiperElId}`)[desktopMethod](touchEvents.start, swiper
.onTouchStart,
false);
}
document[desktopMethod](touchEvents.move, swiper.onTouchMove, capture);
document[desktopMethod](touchEvents.end, swiper.onTouchEnd, false);
} else {
const passiveListener = touchEvents.start === 'touchstart' && support.passiveListener && params
.passiveListeners ? {
passive: true,
capture: false
} : false;
}
};
function attachEvents() {
const swiper = this;
const {
params,
support
} = swiper;
swiper.onTouchStart = onTouchStart.bind(swiper);
swiper.onTouchMove = onTouchMove.bind(swiper);
swiper.onTouchEnd = onTouchEnd.bind(swiper);
if (params.cssMode) {
swiper.onScroll = onScroll.bind(swiper);
}
swiper.onClick = onClick.bind(swiper);
events(swiper, 'on');
}
function detachEvents() {
const swiper = this;
events(swiper, 'off');
}
export default {
attachEvents,
detachEvents
};
uni_modules/zebra-swiper/libs/events/onClick.js 0 → 100644
export default function onClick(e) {
const swiper = this;
if (!swiper.enabled) return;
if (!swiper.allowClick) {
if (swiper.params.preventClicks) e.preventDefault();
if (swiper.params.preventClicksPropagation && swiper.animating) {
e.stopPropagation();
e.stopImmediatePropagation();
}
}
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/events/onResize.js 0 → 100644
export default function onResize() {
const swiper = this;
const {
params,
el
} = swiper;
if (el && el.offsetWidth === 0) return;
if (params.breakpoints) {
swiper.setBreakpoint();
}
const {
allowSlideNext,
allowSlidePrev,
snapGrid
} = swiper;
swiper.allowSlideNext = true;
swiper.allowSlidePrev = true;
swiper.updateSize();
swiper.updateSlides();
swiper.updateSlidesClasses();
if ((params.slidesPerView === 'auto' || params.slidesPerView > 1) && swiper.isEnd && !swiper.isBeginning && !swiper.params.centeredSlides) {
swiper.slideTo(swiper.slides.length - 1, 0, false, true);
} else {
swiper.slideTo(swiper.activeIndex, 0, false, true);
}
if (swiper.autoplay && swiper.autoplay.running && swiper.autoplay.paused) {
swiper.autoplay.run();
}
swiper.allowSlidePrev = allowSlidePrev;
swiper.allowSlideNext = allowSlideNext;
if (swiper.params.watchOverflow && snapGrid !== swiper.snapGrid) {
swiper.checkOverflow();
}
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/events/onScroll.js 0 → 100644
export default function onScroll() {
const swiper = this;
const {
wrapperEl,
rtlTranslate,
enabled
} = swiper;
if (!enabled) return;
swiper.previousTranslate = swiper.translate;
if (swiper.isHorizontal()) {
swiper.translate = -wrapperEl.scrollLeft;
} else {
swiper.translate = -wrapperEl.scrollTop;
} // eslint-disable-next-line
if (swiper.translate === -0) swiper.translate = 0;
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
let newProgress;
const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
if (translatesDiff === 0) {
newProgress = 0;
} else {
newProgress = (swiper.translate - swiper.minTranslate()) / translatesDiff;
}
if (newProgress !== swiper.progress) {
swiper.updateProgress(rtlTranslate ? -swiper.translate : swiper.translate);
}
swiper.emit('setTranslate', swiper.translate, false);
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/events/onTouchEnd.js 0 → 100644
import {
now,
nextTick
} from '../../shared/utils.js';
export default function onTouchEnd(event) {
const swiper = this;
const data = swiper.touchEventsData;
const {
params,
touches,
rtlTranslate: rtl,
slidesGrid,
enabled
} = swiper;
if (!enabled) return;
let e = event;
if (e.originalEvent) e = e.originalEvent;
if (data.allowTouchCallbacks) {
swiper.emit('touch-end', e);
}
data.allowTouchCallbacks = false;
if (!data.isTouched) {
if (data.isMoved && params.grabCursor) {
swiper.setGrabCursor(false);
}
data.isMoved = false;
data.startMoving = false;
return;
}
if (params.grabCursor && data.isMoved && data.isTouched && (swiper.allowSlideNext === true || swiper
.allowSlidePrev === true)) {
swiper.setGrabCursor(false);
}
const touchEndTime = now();
const timeDiff = touchEndTime - data.touchStartTime; // Tap, doubleTap, Click
if (swiper.allowClick) {
const pathTree = e.path || e.composedPath && e.composedPath();
// swiper.updateClickedSlide(pathTree && pathTree[0] || e.target);
swiper.emit('tap click', e);
if (timeDiff < 300 && touchEndTime - data.lastClickTime < 300) {
swiper.emit('doubleTap doubleClick', e);
}
}
data.lastClickTime = now();
nextTick(() => {
if (!swiper.destroyed) swiper.allowClick = true;
});
if (!data.isTouched || !data.isMoved || !swiper.swipeDirection || touches.diff === 0 || data.currentTranslate ===
data.startTranslate) {
data.isTouched = false;
data.isMoved = false;
data.startMoving = false;
return;
}
data.isTouched = false;
data.isMoved = false;
data.startMoving = false;
let currentPos;
if (params.followFinger) {
currentPos = rtl ? swiper.translate : -swiper.translate;
} else {
currentPos = -data.currentTranslate;
}
if (params.cssMode) {
return;
}
if (swiper.params.freeMode && params.freeMode.enabled) {
swiper.freeMode.onTouchEnd({
currentPos
});
return;
}
let stopIndex = 0;
let groupSize = swiper.slidesSizesGrid[0];
for (let i = 0; i < slidesGrid.length; i += i < params.slidesPerGroupSkip ? 1 : params.slidesPerGroup) {
const increment = i < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
if (typeof slidesGrid[i + increment] !== 'undefined') {
if (currentPos >= slidesGrid[i] && currentPos < slidesGrid[i + increment]) {
stopIndex = i;
groupSize = slidesGrid[i + increment] - slidesGrid[i];
}
} else if (currentPos >= slidesGrid[i]) {
stopIndex = i;
groupSize = slidesGrid[slidesGrid.length - 1] - slidesGrid[slidesGrid.length - 2];
}
}
const ratio = (currentPos - slidesGrid[stopIndex]) / groupSize;
const increment = stopIndex < params.slidesPerGroupSkip - 1 ? 1 : params.slidesPerGroup;
if (timeDiff > params.longSwipesMs) {
if (!params.longSwipes) {
swiper.slideTo(swiper.activeIndex);
return;
}
if (swiper.swipeDirection === 'next') {
if (ratio >= params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
else swiper.slideTo(stopIndex);
}
if (swiper.swipeDirection === 'prev') {
if (ratio > 1 - params.longSwipesRatio) swiper.slideTo(stopIndex + increment);
else swiper.slideTo(stopIndex);
}
} else {
if (!params.shortSwipes) {
swiper.slideTo(swiper.activeIndex);
return;
}
const isNavButtonTarget = swiper.navigation && (e.target === swiper.navigation.nextEl || e.target === swiper
.navigation.prevEl);
if (!isNavButtonTarget) {
if (swiper.swipeDirection === 'next') {
swiper.slideTo(stopIndex + increment);
}
if (swiper.swipeDirection === 'prev') {
swiper.slideTo(stopIndex);
}
} else if (e.target === swiper.navigation.nextEl) {
swiper.slideTo(stopIndex + increment);
} else {
swiper.slideTo(stopIndex);
}
}
}
uni_modules/zebra-swiper/libs/events/onTouchMove.js 0 → 100644
import {
now
} from '../../shared/utils.js';
export default function onTouchMove(event) {
const swiper = this;
const data = swiper.touchEventsData;
const {
params,
touches,
rtlTranslate: rtl,
enabled
} = swiper;
if (!enabled) return;
let e = event;
if (e.originalEvent) e = e.originalEvent;
if (!data.isTouched) {
if (data.startMoving && data.isScrolling) {
swiper.emit('touchMoveOpposite', e);
}
return;
}
if (data.isTouchEvent && e.type !== 'touchmove' && e.type !== 'touchMove' && e.type !== 'onTouchmove') return;
const targetTouch = (e.type === 'touchmove' || e.type === 'touchMove' || e.type === 'onTouchmove') && e.touches && (
e.touches[0] || e
.changedTouches[0]);
const pageX = (e.type === 'touchmove' || e.type === 'touchMove' || e.type === 'onTouchmove') ? targetTouch.pageX : e
.pageX;
const pageY = (e.type === 'touchmove' || e.type === 'touchMove' || e.type === 'onTouchmove') ? targetTouch.pageY : e
.pageY;
if (e.preventedByNestedSwiper) {
touches.startX = pageX;
touches.startY = pageY;
return;
}
if (!swiper.allowTouchMove) {
swiper.allowClick = false;
if (data.isTouched) {
Object.assign(touches, {
startX: pageX,
startY: pageY,
currentX: pageX,
currentY: pageY
});
data.touchStartTime = now();
}
return;
}
if (data.isTouchEvent && params.touchReleaseOnEdges && !params.loop) {
if (swiper.isVertical()) {
if (pageY < touches.startY && swiper.translate <= swiper.maxTranslate() || pageY > touches.startY && swiper
.translate >= swiper.minTranslate()) {
data.isTouched = false;
data.isMoved = false;
return;
}
} else if (pageX < touches.startX && swiper.translate <= swiper.maxTranslate() || pageX > touches.startX &&
swiper.translate >= swiper.minTranslate()) {
return;
}
}
// if (data.isTouchEvent && document.activeElement) {
// if (e.target === document.activeElement && $(e.target).is(data.focusableElements)) {
// data.isMoved = true;
// swiper.allowClick = false;
// return;
// }
// }
if (data.allowTouchCallbacks) {
swiper.emit('touch-move', e);
}
if (e.touches && e.touches.length > 1) return;
touches.currentX = pageX;
touches.currentY = pageY;
const diffX = touches.currentX - touches.startX;
const diffY = touches.currentY - touches.startY;
if (swiper.params.threshold && Math.sqrt(diffX ** 2 + diffY ** 2) < swiper.params.threshold) return;
if (typeof data.isScrolling === 'undefined') {
let touchAngle;
if (swiper.isHorizontal() && touches.currentY === touches.startY || swiper.isVertical() && touches.currentX ===
touches.startX) {
data.isScrolling = false;
} else {
if (diffX * diffX + diffY * diffY >= 25) {
touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;
data.isScrolling = swiper.isHorizontal() ? touchAngle > params.touchAngle : 90 - touchAngle > params
.touchAngle;
}
}
}
if (data.isScrolling) {
swiper.emit('touchMoveOpposite', e);
}
if (typeof data.startMoving === 'undefined') {
if (touches.currentX !== touches.startX || touches.currentY !== touches.startY) {
data.startMoving = true;
}
}
if (data.isScrolling) {
data.isTouched = false;
return;
}
if (!data.startMoving) {
return;
}
swiper.allowClick = false;
if (!params.cssMode && e.cancelable) {
e.preventDefault();
}
if (params.touchMoveStopPropagation && !params.nested) {
e.stopPropagation();
}
if (!data.isMoved) {
if (params.loop && !params.cssMode) {
swiper.loopFix();
}
data.startTranslate = swiper.getTranslate();
swiper.setTransition(0);
if (swiper.animating) {
swiper.$wrapperEl.emit('transitionend', [swiper]);
}
data.allowMomentumBounce = false;
if (params.grabCursor && (swiper.allowSlideNext === true || swiper.allowSlidePrev === true)) {
swiper.setGrabCursor(true);
}
swiper.emit('sliderFirstMove', e);
}
swiper.emit('sliderMove', e);
data.isMoved = true;
let diff = swiper.isHorizontal() ? diffX : diffY;
touches.diff = diff;
diff *= params.touchRatio;
if (rtl) diff = -diff;
swiper.swipeDirection = diff > 0 ? 'prev' : 'next';
data.currentTranslate = diff + data.startTranslate;
let disableParentSwiper = true;
let resistanceRatio = params.resistanceRatio;
if (params.touchReleaseOnEdges) {
resistanceRatio = 0;
}
if (diff > 0 && data.currentTranslate > swiper.minTranslate()) {
disableParentSwiper = false;
if (params.resistance) data.currentTranslate = swiper.minTranslate() - 1 + (-swiper.minTranslate() + data
.startTranslate + diff) ** resistanceRatio;
} else if (diff < 0 && data.currentTranslate < swiper.maxTranslate()) {
disableParentSwiper = false;
if (params.resistance) data.currentTranslate = swiper.maxTranslate() + 1 - (swiper.maxTranslate() - data
.startTranslate - diff) ** resistanceRatio;
}
if (disableParentSwiper) {
e.preventedByNestedSwiper = true;
}
if (!swiper.allowSlideNext && swiper.swipeDirection === 'next' && data.currentTranslate < data.startTranslate) {
data.currentTranslate = data.startTranslate;
}
if (!swiper.allowSlidePrev && swiper.swipeDirection === 'prev' && data.currentTranslate > data.startTranslate) {
data.currentTranslate = data.startTranslate;
}
if (!swiper.allowSlidePrev && !swiper.allowSlideNext) {
data.currentTranslate = data.startTranslate;
}
if (params.threshold > 0) {
if (Math.abs(diff) > params.threshold || data.allowThresholdMove) {
if (!data.allowThresholdMove) {
data.allowThresholdMove = true;
touches.startX = touches.currentX;
touches.startY = touches.currentY;
data.currentTranslate = data.startTranslate;
touches.diff = swiper.isHorizontal() ? touches.currentX - touches.startX : touches.currentY - touches
.startY;
return;
}
} else {
data.currentTranslate = data.startTranslate;
return;
}
}
if (!params.followFinger || params.cssMode) return;
if (params.freeMode && params.freeMode.enabled && swiper.freeMode || params.watchSlidesProgress) {
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
if (swiper.params.freeMode && params.freeMode.enabled && swiper.freeMode) {
swiper.freeMode.onTouchMove();
}
swiper.updateProgress(data.currentTranslate);
swiper.setTranslate(data.currentTranslate);
}
uni_modules/zebra-swiper/libs/events/onTouchStart.js 0 → 100644
import {
now
} from '../../shared/utils.js';
export default function onTouchStart(event) {
const swiper = this;
const data = swiper.touchEventsData;
const {
params,
touches,
enabled
} = swiper;
if (!enabled) return;
if (swiper.animating && params.preventInteractionOnTransition) {
return;
}
if (!swiper.animating && params.cssMode && params.loop) {
swiper.loopFix();
}
let e = event;
if (e.originalEvent) e = e.originalEvent;
data.isTouchEvent = e.type === 'touchstart' || e.type === 'touchStart' || e.type === 'onTouchstart';
if (!data.isTouchEvent && 'which' in e && e.which === 3) return;
if (!data.isTouchEvent && 'button' in e && e.button > 0) return;
if (data.isTouched && data.isMoved) return; // change target el for shadow root component
const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== '';
const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
const isTargetShadow = !!(e.target && e.target
.shadowRoot
);
if (params.noSwiping) {
swiper.allowClick = true;
return;
}
if (params.swipeHandler) {
if (!$targetEl.closest(params.swipeHandler)[0]) return;
}
touches.currentX = (e.type === 'touchstart' || e.type === 'touchStart' || e.type === 'onTouchstart') ? e.touches[0]
.pageX : e.pageX;
touches.currentY = (e.type === 'touchstart' || e.type === 'touchStart' || e.type === 'onTouchstart') ? e.touches[0]
.pageY : e.pageY;
const startX = touches.currentX;
const startY = touches
.currentY;
const edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection;
const edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold;
Object.assign(data, {
isTouched: true,
isMoved: false,
allowTouchCallbacks: true,
isScrolling: undefined,
startMoving: undefined
});
touches.startX = startX;
touches.startY = startY;
data.touchStartTime = now();
swiper.allowClick = true;
swiper.updateSize();
swiper.swipeDirection = undefined;
if (params.threshold > 0) data.allowThresholdMove = false;
// if (e.type !== 'touchstart' && e.type !== 'touchStart') {
// let preventDefault = true;
// if ($targetEl.is(data.focusableElements)) preventDefault = false;
// const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
// if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !$targetEl[0].isContentEditable) {
// e.preventDefault();
// }
// }
swiper.emit('touch-start', e);
}
uni_modules/zebra-swiper/libs/grab-cursor/index.js 0 → 100644
import setGrabCursor from './setGrabCursor.js';
import unsetGrabCursor from './unsetGrabCursor.js';
export default {
setGrabCursor,
unsetGrabCursor
};
\ No newline at end of file
uni_modules/zebra-swiper/libs/grab-cursor/setGrabCursor.js 0 → 100644
export default function setGrabCursor(moving) {
const swiper = this;
if (swiper.support.touch || !swiper.params.simulateTouch || swiper.params.watchOverflow && swiper.isLocked || swiper
.params.cssMode) return;
const el = swiper.params.touchEventsTarget === 'container' ? swiper.$el : swiper.$wrapperEl;
el.setCss({
cursor: 'move',
cursor: moving ? '-webkit-grabbing' : '-webkit-grab',
cursor: moving ? '-moz-grabbin' : '-moz-grab',
cursor: moving ? 'grabbing' : 'grab',
})
}
uni_modules/zebra-swiper/libs/grab-cursor/unsetGrabCursor.js 0 → 100644
export default function unsetGrabCursor() {
const swiper = this;
if (swiper.support.touch || swiper.params.watchOverflow && swiper.isLocked || swiper.params.cssMode) {
return;
}
swiper[swiper.params.touchEventsTarget === 'container' ? '$el' : '$wrapperEl'].setCss({
cursor: ''
});
}
uni_modules/zebra-swiper/libs/loop/index.js 0 → 100644
import loopCreate from './loopCreate.js';
import loopFix from './loopFix.js';
import loopDestroy from './loopDestroy.js';
export default {
loopCreate,
loopFix,
loopDestroy
};
\ No newline at end of file
uni_modules/zebra-swiper/libs/loop/loopCreate.js 0 → 100644
export default function loopCreate() {
const swiper = this;
const {
params,
$wrapperEl,
native
} = swiper; // Remove duplicated slides
const $selector = $wrapperEl;
let slides = native.children;
if (params.loopFillGroupWithBlank) {
const blankSlidesNum = params.slidesPerGroup - slides.length % params.slidesPerGroup;
if (blankSlidesNum !== params.slidesPerGroup) {
native.loopBlankShow = true;
native.loopBlankNumber = blankSlidesNum;
}
}
if (params.slidesPerView === 'auto' && !params.loopedSlides) params.loopedSlides = slides.length;
swiper.loopedSlides = Math.ceil(parseFloat(params.loopedSlides || params.slidesPerView, 10));
swiper.loopedSlides += params.loopAdditionalSlides;
if (swiper.loopedSlides > slides.length) {
swiper.loopedSlides = slides.length;
}
const prependSlides = [];
const appendSlides = [];
slides.forEach((el, index) => {
const slide = el;
if (index < slides.length && index >= slides.length - swiper.loopedSlides) {
prependSlides.push(el);
}
if (index < swiper.loopedSlides) {
appendSlides.push(el);
}
});
let list = [...swiper.native.value];
let newList = [...list];
swiper.originalDataList = [...swiper.native.value];
for (let i = 0; i < appendSlides.length; i += 1) {
newList.push(list[appendSlides[i].index]);
}
for (let i = prependSlides.length - 1; i >= 0; i -= 1) {
newList.unshift(list[prependSlides[i].index]);
}
swiper.native.$emit("input", newList)
return true;
}
uni_modules/zebra-swiper/libs/loop/loopDestroy.js 0 → 100644
export default function loopDestroy() {
const swiper = this;
const {
$wrapperEl,
params,
slides
} = swiper;
}
uni_modules/zebra-swiper/libs/loop/loopFix.js 0 → 100644
export default function loopFix() {
const swiper = this;
swiper.emit('beforeLoopFix');
const {
activeIndex,
slides,
loopedSlides,
allowSlidePrev,
allowSlideNext,
snapGrid,
rtlTranslate: rtl
} = swiper;
let newIndex;
swiper.allowSlidePrev = true;
swiper.allowSlideNext = true;
const snapTranslate = -snapGrid[activeIndex];
const diff = snapTranslate - swiper.getTranslate();
if (activeIndex < loopedSlides) {
newIndex = slides.length - loopedSlides * 3 + activeIndex;
newIndex += loopedSlides;
const slideChanged = swiper.slideTo(newIndex, 0, false, true);
if (slideChanged && diff !== 0) {
swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
}
} else if (activeIndex >= slides.length - loopedSlides) {
newIndex = -slides.length + activeIndex + loopedSlides;
newIndex += loopedSlides;
const slideChanged = swiper.slideTo(newIndex, 0, false, true);
if (slideChanged && diff !== 0) {
swiper.setTranslate((rtl ? -swiper.translate : swiper.translate) - diff);
}
}
swiper.allowSlidePrev = allowSlidePrev;
swiper.allowSlideNext = allowSlideNext;
swiper.emit('loopFix');
}
uni_modules/zebra-swiper/libs/mixins/relation.js 0 → 100644
export function ChildrenMixin(parent, options = {}) {
const indexKey = options.indexKey || 'index';
return {
inject: {
[parent]: {
default: null,
},
},
mounted() {
this.parent = this[parent];
this.bindRelation();
},
// #ifdef VUE2
beforeDestroy() {
if (this.parent) {
this.parent.children = this.parent.children.filter(
(item) => item !== this
);
uni.$emit("childrenReady" + this.parent._uid, this);
}
},
// #endif
// #ifdef VUE3
beforeUnmount() {
if (this.parent) {
this.parent.children = this.parent.children.filter(
(item) => item !== this
);
uni.$emit("childrenReady" + this.parent._uid, this);
}
},
// #endif
methods: {
bindRelation() {
if (!this.parent || this.parent.children.indexOf(this) !== -1) {
return;
}
const children = [...this.parent.children, this];
this.parent.children = children;
this.index = this.parent.children.indexOf(this);
uni.$emit("childrenReady" + this.parent._uid, this);
},
},
};
}
export function ParentMixin(parent) {
return {
provide() {
return {
[parent]: this,
};
},
created() {
this.children = [];
},
// #ifdef VUE2
beforeDestroy() {
uni.$off("childrenReady" + this._uid)
},
// #endif
// #ifdef VUE3
beforeUnmount() {
uni.$off("childrenReady" + this._uid)
},
// #endif
};
}
uni_modules/zebra-swiper/libs/moduleExtendParams.js 0 → 100644
import {
extend
} from '../shared/utils.js';
export default function moduleExtendParams(params, allModulesParams) {
return function extendParams(obj = {}) {
const moduleParamName = Object.keys(obj)[0];
const moduleParams = obj[moduleParamName];
if (typeof moduleParams !== 'object' || moduleParams === null) {
extend(allModulesParams, obj);
return;
}
if (['navigation', 'pagination', 'scrollbar'].indexOf(moduleParamName) >= 0 && params[moduleParamName] ===
true) {
params[moduleParamName] = {
auto: true
};
}
if (!(moduleParamName in params && 'enabled' in moduleParams)) {
extend(allModulesParams, obj);
return;
}
if (params[moduleParamName] === true) {
params[moduleParamName] = {
enabled: true
};
}
if (typeof params[moduleParamName] === 'object' && !('enabled' in params[moduleParamName])) {
params[moduleParamName].enabled = true;
}
if (!params[moduleParamName]) params[moduleParamName] = {
enabled: false
};
extend(allModulesParams, obj);
};
}
uni_modules/zebra-swiper/libs/slide/index.js 0 → 100644
import slideTo from './slideTo.js';
import slideToLoop from './slideToLoop.js';
import slideNext from './slideNext.js';
import slidePrev from './slidePrev.js';
import slideReset from './slideReset.js';
import slideToClosest from './slideToClosest.js';
import slideToClickedSlide from './slideToClickedSlide.js';
export default {
slideTo,
slideToLoop,
slideNext,
slidePrev,
slideReset,
slideToClosest,
slideToClickedSlide
};
uni_modules/zebra-swiper/libs/slide/slideNext.js 0 → 100644
export default function slideNext(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
const {
animating,
enabled,
params
} = swiper;
if (!enabled) return swiper;
let perGroup = params.slidesPerGroup;
if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
perGroup = Math.max(swiper.slidesPerViewDynamic('current', true), 1);
}
const increment = swiper.activeIndex < params.slidesPerGroupSkip ? 1 : perGroup;
if (params.loop) {
if (animating && params.loopPreventsSlide) return false;
swiper.loopFix();
}
if (params.rewind && swiper.isEnd) {
return swiper.slideTo(0, speed, runCallbacks, internal);
}
setTimeout(() => {
swiper.slideTo(swiper.activeIndex + increment, speed, runCallbacks, internal)
}, 0)
return true;
}
uni_modules/zebra-swiper/libs/slide/slidePrev.js 0 → 100644
export default function slidePrev(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
const {
params,
animating,
snapGrid,
slidesGrid,
rtlTranslate,
enabled
} = swiper;
if (!enabled) return swiper;
if (params.loop) {
if (animating && params.loopPreventsSlide) return false;
swiper.loopFix();
}
const translate = rtlTranslate ? swiper.translate : -swiper.translate;
function normalize(val) {
if (val < 0) return -Math.floor(Math.abs(val));
return Math.floor(val);
}
const normalizedTranslate = normalize(translate);
const normalizedSnapGrid = snapGrid.map(val => normalize(val));
let prevSnap = snapGrid[normalizedSnapGrid.indexOf(normalizedTranslate) - 1];
if (typeof prevSnap === 'undefined' && params.cssMode) {
let prevSnapIndex;
snapGrid.forEach((snap, snapIndex) => {
if (normalizedTranslate >= snap) {
prevSnapIndex = snapIndex;
}
});
if (typeof prevSnapIndex !== 'undefined') {
prevSnap = snapGrid[prevSnapIndex > 0 ? prevSnapIndex - 1 : prevSnapIndex];
}
}
let prevIndex = 0;
if (typeof prevSnap !== 'undefined') {
prevIndex = slidesGrid.indexOf(prevSnap);
if (prevIndex < 0) prevIndex = swiper.activeIndex - 1;
if (params.slidesPerView === 'auto' && params.slidesPerGroup === 1 && params.slidesPerGroupAuto) {
prevIndex = prevIndex - swiper.slidesPerViewDynamic('previous', true) + 1;
prevIndex = Math.max(prevIndex, 0);
}
}
if (params.rewind && swiper.isBeginning) {
return swiper.slideTo(swiper.slides.length - 1, speed, runCallbacks, internal);
}
setTimeout(() => {
swiper.slideTo(prevIndex, speed, runCallbacks, internal)
}, 30)
return true;
}
uni_modules/zebra-swiper/libs/slide/slideReset.js 0 → 100644
export default function slideReset(speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
return swiper.slideTo(swiper.activeIndex, speed, runCallbacks, internal);
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/slide/slideTo.js 0 → 100644
import {
animateCSSModeScroll
} from '../../shared/utils.js';
export default function slideTo(index = 0, speed = this.params.speed, runCallbacks = true, internal, initial) {
if (typeof index !== 'number' && typeof index !== 'string') {
throw new Error(
`The 'index' argument cannot have type other than 'number' or 'string'. [${typeof index}] given.`);
}
if (typeof index === 'string') {
/**
* The `index` argument converted from `string` to `number`.
* @type {number}
*/
const indexAsNumber = parseInt(index, 10);
/**
* Determines whether the `index` argument is a valid `number`
* after being converted from the `string` type.
* @type {boolean}
*/
const isValidNumber = isFinite(indexAsNumber);
if (!isValidNumber) {
throw new Error(`The passed-in 'index' (string) couldn't be converted to 'number'. [${index}] given.`);
} // Knowing that the converted `index` is a valid number,
// we can update the original argument's value.
index = indexAsNumber;
}
const swiper = this;
let slideIndex = index;
let timer;
if (slideIndex < 0) slideIndex = 0;
const {
params,
snapGrid,
slidesGrid,
previousIndex,
activeIndex,
rtlTranslate: rtl,
wrapperEl,
enabled
} = swiper;
if (swiper.animating && params.preventInteractionOnTransition || !enabled && !internal && !initial) {
return false;
}
const skip = Math.min(swiper.params.slidesPerGroupSkip, slideIndex);
let snapIndex = skip + Math.floor((slideIndex - skip) / swiper.params.slidesPerGroup);
if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
if ((activeIndex || params.initialSlide || 0) === (previousIndex || 0) && runCallbacks) {
swiper.emit('beforeSlideChangeStart');
}
const translate = -snapGrid[snapIndex]; // Update progress
swiper.updateProgress(translate); // Normalize slideIndex
if (params.normalizeSlideIndex) {
for (let i = 0; i < slidesGrid.length; i += 1) {
const normalizedTranslate = -Math.floor(translate * 100);
const normalizedGrid = Math.floor(slidesGrid[i] * 100);
const normalizedGridNext = Math.floor(slidesGrid[i + 1] * 100);
if (typeof slidesGrid[i + 1] !== 'undefined') {
if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext - (
normalizedGridNext - normalizedGrid) / 2) {
slideIndex = i;
} else if (normalizedTranslate >= normalizedGrid && normalizedTranslate < normalizedGridNext) {
slideIndex = i + 1;
}
} else if (normalizedTranslate >= normalizedGrid) {
slideIndex = i;
}
}
} // Directions locks
if (swiper.initialized && slideIndex !== activeIndex) {
if (!swiper.allowSlideNext && translate < swiper.translate && translate < swiper.minTranslate()) {
return false;
}
if (!swiper.allowSlidePrev && translate > swiper.translate && translate > swiper.maxTranslate()) {
if ((activeIndex || 0) !== slideIndex) return false;
}
}
let direction;
if (slideIndex > activeIndex) direction = 'next';
else if (slideIndex < activeIndex) direction = 'prev';
else direction = 'reset'; // Update Index
if (rtl && -translate === swiper.translate || !rtl && translate === swiper.translate) {
swiper.updateActiveIndex(slideIndex); // Update Height
if (params.autoHeight) {
setTimeout(() => {
swiper.updateAutoHeight();
}, 0)
}
swiper.updateSlidesClasses();
if (params.effect !== 'slide') {
swiper.setTranslate(translate);
}
if (direction !== 'reset') {
swiper.transitionStart(runCallbacks, direction);
swiper.transitionEnd(runCallbacks, direction);
}
return false;
}
if (params.cssMode) {
const isH = swiper.isHorizontal();
const t = rtl ? translate : -translate;
if (speed === 0) {
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
if (isVirtual) {
swiper.wrapperEl.style.scrollSnapType = 'none';
swiper._immediateVirtual = true;
}
wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
if (isVirtual) {
requestAnimationFrame(() => {
swiper.wrapperEl.style.scrollSnapType = '';
swiper._swiperImmediateVirtual = false;
});
}
} else {
if (!swiper.support.smoothScroll) {
animateCSSModeScroll({
swiper,
targetPosition: t,
side: isH ? 'left' : 'top'
});
return true;
}
wrapperEl.scrollTo({
[isH ? 'left' : 'top']: t,
behavior: 'smooth'
});
}
return true;
}
swiper.setTransition(speed);
swiper.setTranslate(translate);
swiper.updateActiveIndex(slideIndex);
swiper.updateSlidesClasses();
swiper.emit('beforeTransitionStart', speed, internal);
swiper.transitionStart(runCallbacks, direction);
if (speed === 0) {
swiper.transitionEnd(runCallbacks, direction);
} else if (!swiper.animating) {
swiper.animating = true;
if (!swiper.onSlideToWrapperTransitionEnd) {
swiper.onSlideToWrapperTransitionEnd = function transitionEnd(e) {
if (!swiper || swiper.destroyed) return;
clearTimeout(timer)
swiper.onSlideToWrapperTransitionEnd = null;
delete swiper.onSlideToWrapperTransitionEnd;
swiper.transitionEnd(runCallbacks, direction);
};
}
timer = setTimeout(() => {
if (swiper.onSlideToWrapperTransitionEnd) {
swiper.onSlideToWrapperTransitionEnd();
}
}, speed)
}
return true;
}
uni_modules/zebra-swiper/libs/slide/slideToClickedSlide.js 0 → 100644
import {
nextTick
} from '../../shared/utils.js';
export default function slideToClickedSlide() {
const swiper = this;
const {
params,
$wrapperEl
} = swiper;
const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
let slideToIndex = swiper.clickedIndex;
let realIndex;
if (params.loop) {
if (swiper.animating) return;
// realIndex = parseInt($(swiper.clickedSlide).attr('data-swiper-slide-index'), 10);
realIndex = parseInt(swiper.activeIndex, 10);
if (params.centeredSlides) {
if (slideToIndex < swiper.loopedSlides - slidesPerView / 2 || slideToIndex > swiper.slides.length - swiper
.loopedSlides + slidesPerView / 2) {
swiper.loopFix();
slideToIndex = $wrapperEl.children(
`.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`
).eq(0).index();
nextTick(() => {
swiper.slideTo(slideToIndex);
});
} else {
swiper.slideTo(slideToIndex);
}
} else if (slideToIndex > swiper.slides.length - slidesPerView) {
swiper.loopFix();
slideToIndex = $wrapperEl.children(
`.${params.slideClass}[data-swiper-slide-index="${realIndex}"]:not(.${params.slideDuplicateClass})`)
.eq(0).index();
nextTick(() => {
swiper.slideTo(slideToIndex);
});
} else {
swiper.slideTo(slideToIndex);
}
} else {
swiper.slideTo(slideToIndex);
}
}
uni_modules/zebra-swiper/libs/slide/slideToClosest.js 0 → 100644
/* eslint no-unused-vars: "off" */
export default function slideToClosest(speed = this.params.speed, runCallbacks = true, internal, threshold = 0.5) {
const swiper = this;
let index = swiper.activeIndex;
const skip = Math.min(swiper.params.slidesPerGroupSkip, index);
const snapIndex = skip + Math.floor((index - skip) / swiper.params.slidesPerGroup);
const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
if (translate >= swiper.snapGrid[snapIndex]) {
const currentSnap = swiper.snapGrid[snapIndex];
const nextSnap = swiper.snapGrid[snapIndex + 1];
if (translate - currentSnap > (nextSnap - currentSnap) * threshold) {
index += swiper.params.slidesPerGroup;
}
} else {
const prevSnap = swiper.snapGrid[snapIndex - 1];
const currentSnap = swiper.snapGrid[snapIndex];
if (translate - prevSnap <= (currentSnap - prevSnap) * threshold) {
index -= swiper.params.slidesPerGroup;
}
}
index = Math.max(index, 0);
index = Math.min(index, swiper.slidesGrid.length - 1);
return swiper.slideTo(index, speed, runCallbacks, internal);
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/slide/slideToLoop.js 0 → 100644
export default function slideToLoop(index = 0, speed = this.params.speed, runCallbacks = true, internal) {
const swiper = this;
let newIndex = index;
if (swiper.params.loop) {
newIndex += swiper.loopedSlides;
}
return swiper.slideTo(newIndex, speed, runCallbacks, internal);
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/transition/index.js 0 → 100644
import setTransition from './setTransition.js';
import transitionStart from './transitionStart.js';
import transitionEnd from './transitionEnd.js';
export default {
setTransition,
transitionStart,
transitionEnd
};
uni_modules/zebra-swiper/libs/transition/setTransition.js 0 → 100644
export default function setTransition(duration, byController) {
const swiper = this;
if (!swiper.$wrapperEl) return
if (!swiper.params.cssMode) {
swiper.$wrapperEl.transition(duration);
}
swiper.emit('setTransition', duration, byController);
}
uni_modules/zebra-swiper/libs/transition/transitionEmit.js 0 → 100644
export default function transitionEmit({
swiper,
runCallbacks,
direction,
step
}) {
const {
activeIndex,
previousIndex
} = swiper;
let dir = direction;
if (!dir) {
if (activeIndex > previousIndex) dir = 'next';
else if (activeIndex < previousIndex) dir = 'prev';
else dir = 'reset';
}
swiper.emit(`transition${step}`);
if (runCallbacks && activeIndex !== previousIndex) {
if (dir === 'reset') {
swiper.emit(`slideResetTransition${step}`);
return;
}
swiper.emit(`slideChangeTransition${step}`);
if (dir === 'next') {
swiper.emit(`slideNextTransition${step}`);
} else {
swiper.emit(`slidePrevTransition${step}`);
}
}
}
uni_modules/zebra-swiper/libs/transition/transitionEnd.js 0 → 100644
import transitionEmit from './transitionEmit.js';
export default function transitionEnd(runCallbacks = true, direction) {
const swiper = this;
const {
params
} = swiper;
swiper.animating = false;
if (params.cssMode) return;
swiper.setTransition(0);
transitionEmit({
swiper,
runCallbacks,
direction,
step: 'End'
});
}
uni_modules/zebra-swiper/libs/transition/transitionStart.js 0 → 100644
import transitionEmit from './transitionEmit.js';
export default function transitionStart(runCallbacks = true, direction) {
const swiper = this;
const {
params
} = swiper;
if (params.cssMode) return;
if (params.autoHeight) {
swiper.updateAutoHeight();
}
transitionEmit({
swiper,
runCallbacks,
direction,
step: 'Start'
});
}
uni_modules/zebra-swiper/libs/translate/getTranslate.js 0 → 100644
import {
getTranslate
} from '../../shared/utils.js';
export default function getSwiperTranslate(axis = this.isHorizontal() ? 'x' : 'y') {
const swiper = this;
const {
params,
rtlTranslate: rtl,
translate,
$wrapperEl
} = swiper;
if (params.virtualTranslate) {
return rtl ? -translate : translate;
}
if (params.cssMode) {
return translate;
}
let currentTranslate = getTranslate(swiper, axis);
if (rtl) currentTranslate = -currentTranslate;
return currentTranslate || 0;
}
uni_modules/zebra-swiper/libs/translate/index.js 0 → 100644
import getTranslate from './getTranslate.js';
import setTranslate from './setTranslate.js';
import minTranslate from './minTranslate.js';
import maxTranslate from './maxTranslate.js';
import translateTo from './translateTo.js';
export default {
getTranslate,
setTranslate,
minTranslate,
maxTranslate,
translateTo
};
\ No newline at end of file
uni_modules/zebra-swiper/libs/translate/maxTranslate.js 0 → 100644
export default function maxTranslate() {
return -this.snapGrid[this.snapGrid.length - 1];
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/translate/minTranslate.js 0 → 100644
export default function minTranslate() {
return -this.snapGrid[0];
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/translate/setTranslate.js 0 → 100644
export default function setTranslate(translate, byController) {
const swiper = this;
const {
rtlTranslate: rtl,
params,
$wrapperEl,
wrapperEl,
progress
} = swiper;
let x = 0;
let y = 0;
const z = 0;
if (isNaN(translate)) {
return
}
if (!$wrapperEl) return
if (swiper.isHorizontal()) {
x = rtl ? -translate : translate;
} else {
y = translate;
}
if (params.roundLengths) {
x = Math.floor(x);
y = Math.floor(y);
}
if (params.cssMode) {
wrapperEl[swiper.isHorizontal() ? 'scrollLeft' : 'scrollTop'] = swiper.isHorizontal() ? -x : -y;
} else if (!params.virtualTranslate) {
$wrapperEl.transform(`translate3d(${x}px, ${y}px, ${z}px)`);
}
swiper.previousTranslate = swiper.translate;
swiper.translate = swiper.isHorizontal() ? x : y; // Check if we need to update progress
let newProgress;
const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
if (translatesDiff === 0) {
newProgress = 0;
} else {
newProgress = (translate - swiper.minTranslate()) / translatesDiff;
}
if (newProgress !== progress) {
swiper.updateProgress(translate);
}
swiper.emit('setTranslate', swiper.translate, byController);
}
uni_modules/zebra-swiper/libs/translate/translateTo.js 0 → 100644
import {
animateCSSModeScroll
} from '../../shared/utils.js';
export default function translateTo(translate = 0, speed = this.params.speed, runCallbacks = true, translateBounds =
true, internal) {
const swiper = this;
let timer;
const {
params,
wrapperEl
} = swiper;
if (swiper.animating && params.preventInteractionOnTransition) {
return false;
}
const minTranslate = swiper.minTranslate();
const maxTranslate = swiper.maxTranslate();
let newTranslate;
if (translateBounds && translate > minTranslate) newTranslate = minTranslate;
else if (translateBounds && translate < maxTranslate) newTranslate = maxTranslate;
else newTranslate = translate; // Update progress
swiper.updateProgress(newTranslate);
if (params.cssMode) {
const isH = swiper.isHorizontal();
if (speed === 0) {
wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate;
} else {
if (!swiper.support.smoothScroll) {
animateCSSModeScroll({
swiper,
targetPosition: -newTranslate,
side: isH ? 'left' : 'top'
});
return true;
}
wrapperEl.scrollTo({
[isH ? 'left' : 'top']: -newTranslate,
behavior: 'smooth'
});
}
return true;
}
if (speed === 0) {
swiper.setTransition(0);
swiper.setTranslate(newTranslate);
if (runCallbacks) {
swiper.emit('beforeTransitionStart', speed, internal);
swiper.emit('transitionEnd');
}
} else {
swiper.setTransition(speed);
swiper.setTranslate(newTranslate);
if (runCallbacks) {
swiper.emit('beforeTransitionStart', speed, internal);
swiper.emit('transitionStart');
}
if (!swiper.animating) {
swiper.animating = true;
if (!swiper.onTranslateToWrapperTransitionEnd) {
swiper.onTranslateToWrapperTransitionEnd = function transitionEnd(e) {
if (!swiper || swiper.destroyed) return;
if (e.target !== this) return;
clearTimeout(timer)
swiper.onTranslateToWrapperTransitionEnd = null;
delete swiper.onTranslateToWrapperTransitionEnd;
if (runCallbacks) {
swiper.emit('transitionEnd');
}
};
}
timer = setTimeout(() => {
swiper.onTranslateToWrapperTransitionEnd();
}, speed)
}
}
return true;
}
uni_modules/zebra-swiper/libs/update/index.js 0 → 100644
import updateSize from './updateSize.js';
import updateSlides from './updateSlides.js';
import updateAutoHeight from './updateAutoHeight.js';
import updateSlidesOffset from './updateSlidesOffset.js';
import updateSlidesProgress from './updateSlidesProgress.js';
import updateProgress from './updateProgress.js';
import updateSlidesClasses from './updateSlidesClasses.js';
import updateActiveIndex from './updateActiveIndex.js';
import updateClickedSlide from './updateClickedSlide.js';
export default {
updateSize,
updateSlides,
updateAutoHeight,
updateSlidesOffset,
updateSlidesProgress,
updateProgress,
updateSlidesClasses,
updateActiveIndex,
updateClickedSlide
};
uni_modules/zebra-swiper/libs/update/updateActiveIndex.js 0 → 100644
export default function updateActiveIndex(newActiveIndex) {
const swiper = this;
const translate = swiper.rtlTranslate ? swiper.translate : -swiper.translate;
const {
slidesGrid,
snapGrid,
params,
activeIndex: previousIndex,
realIndex: previousRealIndex,
snapIndex: previousSnapIndex
} = swiper;
let activeIndex = newActiveIndex;
let snapIndex;
if (typeof activeIndex === 'undefined') {
for (let i = 0; i < slidesGrid.length; i += 1) {
if (typeof slidesGrid[i + 1] !== 'undefined') {
if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1] - (slidesGrid[i + 1] - slidesGrid[i]) /
2) {
activeIndex = i;
} else if (translate >= slidesGrid[i] && translate < slidesGrid[i + 1]) {
activeIndex = i + 1;
}
} else if (translate >= slidesGrid[i]) {
activeIndex = i;
}
} // Normalize slideIndex
if (params.normalizeSlideIndex) {
if (activeIndex < 0 || typeof activeIndex === 'undefined') activeIndex = 0;
}
}
if (snapGrid.indexOf(translate) >= 0) {
snapIndex = snapGrid.indexOf(translate);
} else {
const skip = Math.min(params.slidesPerGroupSkip, activeIndex);
snapIndex = skip + Math.floor((activeIndex - skip) / params.slidesPerGroup);
}
if (snapIndex >= snapGrid.length) snapIndex = snapGrid.length - 1;
if (swiper.loopedSlides) {
swiper.slides.filter((item) => item.index >= swiper.loopedSlides && item.index < swiper.slides.length - swiper
.loopedSlides).forEach((item, index) => {
item.dataSwiperSlideIndex = item.index - swiper.loopedSlides;
})
swiper.slides.filter((item) => item.index < swiper.loopedSlides).forEach((item, index) => {
if (swiper.slides[swiper.slides.length - swiper.loopedSlides * 3 + index]) {
item.dataSwiperSlideIndex = swiper.slides[swiper.slides.length - swiper.loopedSlides * 3 +
index]
.index;
}
})
swiper.slides.filter((item) => item.index >= swiper.slides.length - swiper
.loopedSlides).forEach((item, index) => {
item.dataSwiperSlideIndex = swiper.slides[index].index;
})
}
if (activeIndex === previousIndex) {
if (snapIndex !== previousSnapIndex) {
swiper.snapIndex = snapIndex;
swiper.emit('snapIndexChange');
}
return;
} // Get real index
let realIndex;
if (swiper.virtual && params.virtual.enabled) {
realIndex = activeIndex;
} else {
if (swiper.slides[activeIndex].dataSwiperSlideIndex == undefined || swiper.slides[activeIndex]
.dataSwiperSlideIndex == null) {
realIndex = activeIndex;
} else {
realIndex = swiper.slides[activeIndex].dataSwiperSlideIndex;
}
}
Object.assign(swiper, {
snapIndex,
realIndex,
previousIndex,
activeIndex
});
swiper.emit('activeIndexChange');
swiper.emit('snapIndexChange');
if (previousRealIndex !== realIndex) {
swiper.emit('realIndexChange');
}
if (swiper.initialized || swiper.params.runCallbacksOnInit) {
swiper.emit('slideChange', activeIndex);
}
}
uni_modules/zebra-swiper/libs/update/updateAutoHeight.js 0 → 100644
export default async function updateAutoHeight(speed) {
const swiper = this;
const activeSlides = [];
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
let newHeight = 0;
let i;
if (typeof speed === 'number') {
swiper.setTransition(speed);
} else if (speed === true) {
swiper.setTransition(swiper.params.speed);
}
const getSlideByIndex = index => {
if (isVirtual) {
return swiper.slides.filter(el => parseInt(el.getAttribute('data-swiper-slide-index'), 10) ===
index)[
0];
}
return swiper.slides[index];
}; // Find slides currently in view
if (swiper.params.slidesPerView !== 'auto' && swiper.params.slidesPerView > 1) {
if (swiper.params.centeredSlides) {
swiper.visibleSlides.each(slide => {
activeSlides.push(slide);
});
} else {
for (i = 0; i < Math.ceil(swiper.params.slidesPerView); i += 1) {
const index = swiper.activeIndex + i;
if (index > swiper.slides.length && !isVirtual) break;
activeSlides.push(getSlideByIndex(index));
}
}
} else {
activeSlides.push(getSlideByIndex(swiper.activeIndex));
} // Find new height from highest slide in view
for (i = 0; i < activeSlides.length; i += 1) {
if (typeof activeSlides[i] !== 'undefined') {
const size = await activeSlides[i].getSize();
const height = size.height;
newHeight = height > newHeight ? height : newHeight;
}
} // Update Height
if (newHeight || newHeight === 0) swiper.$wrapperEl.css({
height: `${newHeight?newHeight:''}px`
});
}
uni_modules/zebra-swiper/libs/update/updateClickedSlide.js 0 → 100644
export default function updateClickedSlide(e) {
const swiper = this;
const params = swiper.params;
const slide = swiper.slides[e];
let slideFound = false;
let slideIndex;
if (slide) {
for (let i = 0; i < swiper.slides.length; i += 1) {
if (swiper.slides[i] === slide) {
slideFound = true;
slideIndex = i;
break;
}
}
}
if (slide && slideFound) {
swiper.clickedSlide = slide;
if (swiper.virtual && swiper.params.virtual.enabled) {
swiper.clickedIndex = parseInt($(slide).attr('data-swiper-slide-index'), 10);
} else {
swiper.clickedIndex = slideIndex;
}
} else {
swiper.clickedSlide = undefined;
swiper.clickedIndex = undefined;
return;
}
if (params.slideToClickedSlide && swiper.clickedIndex !== undefined && swiper.clickedIndex !== swiper.activeIndex) {
swiper.slideToClickedSlide();
}
}
uni_modules/zebra-swiper/libs/update/updateProgress.js 0 → 100644
export default function updateProgress(translate) {
const swiper = this;
if (typeof translate === 'undefined') {
const multiplier = swiper.rtlTranslate ? -1 : 1; // eslint-disable-next-line
translate = swiper && swiper.translate && swiper.translate * multiplier || 0;
}
const params = swiper.params;
const translatesDiff = swiper.maxTranslate() - swiper.minTranslate();
let {
progress,
isBeginning,
isEnd
} = swiper;
const wasBeginning = isBeginning;
const wasEnd = isEnd;
if (translatesDiff === 0) {
progress = 0;
isBeginning = true;
isEnd = true;
} else {
progress = (translate - swiper.minTranslate()) / translatesDiff;
isBeginning = progress <= 0;
isEnd = progress >= 1;
}
Object.assign(swiper, {
progress,
isBeginning,
isEnd
});
if (params.watchSlidesProgress || params.centeredSlides && params.autoHeight) swiper.updateSlidesProgress(translate);
if (isBeginning && !wasBeginning) {
swiper.emit('reachBeginning toEdge');
}
if (isEnd && !wasEnd) {
swiper.emit('reachEnd toEdge');
}
if (wasBeginning && !isBeginning || wasEnd && !isEnd) {
swiper.emit('fromEdge');
}
swiper.emit('progress', progress);
}
\ No newline at end of file
uni_modules/zebra-swiper/libs/update/updateSize.js 0 → 100644
export default function updateSize() {
const swiper = this;
let width;
let height;
const el = swiper.el;
if (typeof swiper.params.width !== 'undefined' && swiper.params.width !== null) {
width = swiper.params.width;
} else {
width = el.width;
}
if (typeof swiper.params.height !== 'undefined' && swiper.params.height !== null) {
height = swiper.params.height;
} else {
height = el.height;
}
if (width === 0 && swiper.isHorizontal() || height === 0 && swiper.isVertical()) {
return;
} // Subtract paddings
if (Number.isNaN(width)) width = 0;
if (Number.isNaN(height)) height = 0;
Object.assign(swiper, {
width,
height,
size: swiper.isHorizontal() ? width : height
});
}
uni_modules/zebra-swiper/libs/update/updateSlides.js 0 → 100644
import {
setCSSProperty
} from '../../shared/utils.js';
export default function updateSlides() {
const swiper = this;
function getDirectionLabel(property) {
if (swiper.isHorizontal()) {
return property;
} // prettier-ignore
return {
'width': 'height',
'margin-top': 'margin-left',
'margin-bottom ': 'margin-right',
'margin-left': 'margin-top',
'margin-right': 'margin-bottom',
'padding-left': 'padding-top',
'padding-right': 'padding-bottom',
'marginRight': 'marginBottom'
} [property];
}
function getDirectionPropertyValue(node, label) {
return parseFloat(node[getDirectionLabel(label)] || 0);
}
function getComputedStyle(native) {
return native.itemStyle;
}
const params = swiper.params;
const {
$wrapperEl,
size: swiperSize,
rtlTranslate: rtl,
wrongRTL
} = swiper;
const isVirtual = swiper.virtual && params.virtual.enabled;
const previousSlidesLength = isVirtual ? swiper.virtual.slides.length : swiper.slides.length;
// const slides = $wrapperEl.children(`.${swiper.params.slideClass}`);
const slides = swiper.slides;
const slidesLength = isVirtual ? swiper.virtual.slides.length : slides.length;
let snapGrid = [];
const slidesGrid = [];
const slidesSizesGrid = [];
let offsetBefore = params.slidesOffsetBefore;
if (typeof offsetBefore === 'function') {
offsetBefore = params.slidesOffsetBefore.call(swiper);
}
let offsetAfter = params.slidesOffsetAfter;
if (typeof offsetAfter === 'function') {
offsetAfter = params.slidesOffsetAfter.call(swiper);
}
const previousSnapGridLength = swiper.snapGrid.length;
const previousSlidesGridLength = swiper.slidesGrid.length;
let spaceBetween = params.spaceBetween;
let slidePosition = -offsetBefore;
let prevSlideSize = 0;
let index = 0;
if (typeof swiperSize === 'undefined') {
return;
}
if (typeof spaceBetween === 'string' && spaceBetween.indexOf('%') >= 0) {
spaceBetween = parseFloat(spaceBetween.replace('%', '')) / 100 * swiperSize;
}
swiper.virtualSize = -spaceBetween; // reset margins
if (params.centeredSlides && params.cssMode) {
setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', '');
setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after', '');
}
const gridEnabled = params.grid && params.grid.rows > 1 && swiper.grid;
if (gridEnabled) {
swiper.grid.initSlides(slidesLength);
}
let slideSize;
const shouldResetSlideSize = params.slidesPerView === 'auto' && params.breakpoints && Object.keys(params
.breakpoints).filter(key => {
return typeof params.breakpoints[key].slidesPerView !== 'undefined';
}).length > 0;
Array(...Array(slidesLength)).forEach(async (item, i) => {
slideSize = 0;
const slide = slides[i];
if (gridEnabled) {
swiper.grid.updateSlide(i, slide, slidesLength, getDirectionLabel);
}
if (params.slidesPerView === 'auto') {
if (shouldResetSlideSize) {
slides[i].style[getDirectionLabel('width')] = ``;
}
const slideStyles = getComputedStyle(slide);
const currentTransform = slide.itemStyle.transform;
const currentWebKitTransform = slide.itemStyle.webkitTransform;
if (currentTransform) {
slide.itemStyle.transform = 'none';
}
if (currentWebKitTransform) {
slide.itemStyle.webkitTransform = 'none';
}
if (params.roundLengths) {
slideSize = swiper.isHorizontal() ? slide.outerWidth(true) : slide.outerHeight(true);
} else {
const width = swiper.isHorizontal() ? slide.width : slide.height;
const paddingLeft = getDirectionPropertyValue(slideStyles, 'padding-left');
const paddingRight = getDirectionPropertyValue(slideStyles, 'padding-right');
const marginLeft = getDirectionPropertyValue(slideStyles, 'margin-left');
const marginRight = getDirectionPropertyValue(slideStyles, 'margin-right');
const boxSizing = slideStyles['box-sizing'];
if (boxSizing && boxSizing === 'border-box') {
slideSize = width + marginLeft + marginRight;
} else {
// slideSize = width + paddingLeft + paddingRight + marginLeft + marginRight;
slideSize = width;
}
}
if (currentTransform) {
slide.itemStyle.transform = currentTransform;
}
if (currentWebKitTransform) {
slide.itemStyle.webkitTransform = currentWebKitTransform;
}
if (params.roundLengths) slideSize = Math.floor(slideSize);
} else {
slideSize = (swiperSize - (params.slidesPerView - 1) * spaceBetween) / params.slidesPerView;
if (params.roundLengths) slideSize = Math.floor(slideSize);
slides[i] && slides[i].css({
[getDirectionLabel('width')]: `${slideSize}px`
})
}
if (slides[i]) {
slides[i].swiperSlideSize = slideSize;
}
if (params.autoHeight) {
slides[i] && slides[i].css({
height: 'auto'
})
}
slidesSizesGrid.push(slideSize);
if (params.centeredSlides) {
slidePosition = slidePosition + slideSize / 2 + prevSlideSize / 2 + spaceBetween;
if (prevSlideSize === 0 && i !== 0) slidePosition = slidePosition - swiperSize / 2 -
spaceBetween;
if (i === 0) slidePosition = slidePosition - swiperSize / 2 - spaceBetween;
if (Math.abs(slidePosition) < 1 / 1000) slidePosition = 0;
if (params.roundLengths) slidePosition = Math.floor(slidePosition);
if (index % params.slidesPerGroup === 0) snapGrid.push(slidePosition);
slidesGrid.push(slidePosition);
} else {
if (params.roundLengths) slidePosition = Math.floor(slidePosition);
if ((index - Math.min(swiper.params.slidesPerGroupSkip, index)) % swiper.params
.slidesPerGroup === 0)
snapGrid.push(slidePosition);
slidesGrid.push(slidePosition);
slidePosition = slidePosition + slideSize + spaceBetween;
}
swiper.virtualSize += slideSize + spaceBetween;
prevSlideSize = slideSize;
index += 1;
})
swiper.virtualSize = Math.max(swiper.virtualSize, swiperSize) + offsetAfter;
if (rtl && wrongRTL && (params.effect === 'slide' || params.effect === 'coverflow')) {
$wrapperEl.css({
width: `${swiper.virtualSize + params.spaceBetween}px`
});
}
if (params.setWrapperSize) {
$wrapperEl.css({
[getDirectionLabel('width')]: `${swiper.virtualSize + params.spaceBetween}px`
});
}
if (gridEnabled) {
swiper.grid.updateWrapperSize(slideSize, snapGrid, getDirectionLabel);
} // Remove last grid elements depending on width
if (!params.centeredSlides) {
const newSlidesGrid = [];
for (let i = 0; i < snapGrid.length; i += 1) {
let slidesGridItem = snapGrid[i];
if (params.roundLengths) slidesGridItem = Math.floor(slidesGridItem);
if (snapGrid[i] <= swiper.virtualSize - swiperSize) {
newSlidesGrid.push(slidesGridItem);
}
}
snapGrid = newSlidesGrid;
if (Math.floor(swiper.virtualSize - swiperSize) - Math.floor(snapGrid[snapGrid.length - 1]) > 1) {
snapGrid.push(swiper.virtualSize - swiperSize);
}
}
if (snapGrid.length === 0) snapGrid = [0];
if (params.spaceBetween !== 0) {
// #ifdef MP-BAIDU
const key = swiper.isHorizontal() && rtl ? 'marginLeft' : getDirectionLabel('marginRight');
// #endif
// #ifndef MP-BAIDU
const key = swiper.isHorizontal() && rtl ? 'margin-left' : getDirectionLabel('margin-right');
// #endif
slides.filter((_, slideIndex) => {
if (!params.cssMode) return true;
if (slideIndex === slides.length - 1) {
return false;
}
return true;
}).forEach((item) => {
item.css({
[key]: `${spaceBetween}px`
})
});
}
if (params.centeredSlides && params.centeredSlidesBounds) {
let allSlidesSize = 0;
slidesSizesGrid.forEach(slideSizeValue => {
allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.spaceBetween;
const maxSnap = allSlidesSize - swiperSize;
snapGrid = snapGrid.map(snap => {
if (snap < 0) return -offsetBefore;
if (snap > maxSnap) return maxSnap + offsetAfter;
return snap;
});
}
if (params.centerInsufficientSlides) {
let allSlidesSize = 0;
slidesSizesGrid.forEach(slideSizeValue => {
allSlidesSize += slideSizeValue + (params.spaceBetween ? params.spaceBetween : 0);
});
allSlidesSize -= params.spaceBetween;
if (allSlidesSize < swiperSize) {
const allSlidesOffset = (swiperSize - allSlidesSize) / 2;
snapGrid.forEach((snap, snapIndex) => {
snapGrid[snapIndex] = snap - allSlidesOffset;
});
slidesGrid.forEach((snap, snapIndex) => {
slidesGrid[snapIndex] = snap + allSlidesOffset;
});
}
}
Object.assign(swiper, {
slides,
snapGrid,
slidesGrid,
slidesSizesGrid
});
if (params.centeredSlides && params.cssMode && !params.centeredSlidesBounds) {
setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-before', `${-snapGrid[0]}px`);
setCSSProperty(swiper.wrapperEl, '--swiper-centered-offset-after',
`${swiper.size / 2 - slidesSizesGrid[slidesSizesGrid.length - 1] / 2}px`);
const addToSnapGrid = -swiper.snapGrid[0];
const addToSlidesGrid = -swiper.slidesGrid[0];
swiper.snapGrid = swiper.snapGrid.map(v => v + addToSnapGrid);
swiper.slidesGrid = swiper.slidesGrid.map(v => v + addToSlidesGrid);
}
if (slidesLength !== previousSlidesLength) {
swiper.emit('slidesLengthChange');
}
if (snapGrid.length !== previousSnapGridLength) {
if (swiper.params.watchOverflow) swiper.checkOverflow();
swiper.emit('snapGridLengthChange');
}
if (slidesGrid.length !== previousSlidesGridLength) {
swiper.emit('slidesGridLengthChange');
}
if (params.watchSlidesProgress) {
swiper.updateSlidesOffset();
}
return slides;
}
uni_modules/zebra-swiper/libs/update/updateSlidesClasses.js 0 → 100644
export default function updateSlidesClasses() {
const swiper = this;
const {
slides,
params,
$wrapperEl,
activeIndex,
realIndex
} = swiper;
if (!slides.length || !$wrapperEl) return;
const isVirtual = swiper.virtual && params.virtual.enabled;
for (var i = 0; i < slides.length; i++) {
slides[i].removeClass(
`${params.slideActiveClass} ${params.slideNextClass} ${params.slidePrevClass} ${params.slideDuplicateActiveClass} ${params.slideDuplicateNextClass} ${params.slideDuplicatePrevClass}`
);
}
let activeSlide;
if (isVirtual) {
// activeSlide = swiper.$wrapperEl.find(`.${params.slideClass}[data-swiper-slide-index="${activeIndex}"]`);
activeSlide = slides[slides.findIndex((item) => {
return item.dataSwiperSlideIndex == activeIndex
})];
} else {
activeSlide = slides[activeIndex];
} // Active classes
if (!activeSlide) return
activeSlide.addClass(params.slideActiveClass);
if (params.loop) {
if (activeSlide.hasClass(params.slideDuplicateClass)) {
// $wrapperEl.children[realIndex].addClass(params.slideDuplicateActiveClass);
let index = slides.findIndex((item) => {
return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == realIndex
})
slides[index] && slides[index].addClass(params.slideDuplicateActiveClass);
} else {
// $wrapperEl.children[realIndex].addClass(params.slideDuplicateActiveClass);
let index = slides.findIndex((item) => {
return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == realIndex
})
slides[index] && slides[index].addClass(params.slideDuplicateActiveClass);
}
} // Next Slide
let nextSlide = activeSlide.nextAll(`.${params.slideClass}`)[0];
if (nextSlide) {
nextSlide.addClass(params.slideNextClass);
} else {
if (params.loop && !nextSlide) {
nextSlide = slides[0];
nextSlide.addClass(params.slideNextClass);
} // Prev Slide
}
let prevSlide = activeSlide.prevAll(`.${params.slideClass}`)[0];
if (prevSlide) {
prevSlide.addClass(params.slidePrevClass);
} else {
if (params.loop && !prevSlide) {
prevSlide = slides[slides.length - 1];
prevSlide.addClass(params.slidePrevClass);
}
}
if (params.loop) {
// Duplicate to all looped slides
if (nextSlide.hasClass(params.slideDuplicateClass)) {
// $wrapperEl.children(
// nextSlide.dataSwiperSlideIndex
// ).addClass(params.slideDuplicateNextClass);
let index = slides.findIndex((item) => {
return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == nextSlide
.dataSwiperSlideIndex
})
slides[index] && slides[index].addClass(params.slideDuplicateNextClass);
} else {
// $wrapperEl.children(
// nextSlide.dataSwiperSlideIndex
// ).addClass(params.slideDuplicateNextClass);
let index = slides.findIndex((item) => {
return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == nextSlide
.dataSwiperSlideIndex
})
slides[index] && slides[index].addClass(params.slideDuplicateNextClass);
}
if (prevSlide.hasClass(params.slideDuplicateClass)) {
// $wrapperEl.children(
// prevSlide.dataSwiperSlideIndex
// ).addClass(params.slideDuplicatePrevClass);
let index = slides.findIndex((item) => {
return !item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == prevSlide
.dataSwiperSlideIndex
})
slides[index] && slides[index].addClass(params.slideDuplicatePrevClass);
} else {
// $wrapperEl.children(
// prevSlide.dataSwiperSlideIndex
// ).addClass(params.slideDuplicatePrevClass);
let index = slides.findIndex((item) => {
return item.hasClass(params.slideDuplicateClass) && item.dataSwiperSlideIndex == prevSlide
.dataSwiperSlideIndex
})
slides[index] && slides[index].addClass(params.slideDuplicatePrevClass);
}
}
swiper.emitSlidesClasses();
}
uni_modules/zebra-swiper/libs/update/updateSlidesOffset.js 0 → 100644
export default async function updateSlidesOffset() {
const swiper = this;
const slides = swiper.slides;
for (let i = 0; i < slides.length; i += 1) {
let offset = (slides[i].swiperSlideSize + swiper.params.spaceBetween) * slides[i].index;
slides[i].swiperSlideOffset = swiper.isHorizontal() ? offset :
offset;
}
}
uni_modules/zebra-swiper/libs/update/updateSlidesProgress.js 0 → 100644
export default function updateSlidesProgress(translate = this && this.translate || 0) {
const swiper = this;
const params = swiper.params;
const {
slides,
rtlTranslate: rtl,
snapGrid
} = swiper;
if (slides.length === 0) return;
if (typeof slides[0].swiperSlideOffset === 'undefined' || typeof slides[slides.length - 1].swiperSlideOffset ===
'undefined') swiper
.updateSlidesOffset();
let offsetCenter = -translate;
if (rtl) offsetCenter = translate; // Visible Slides
swiper.visibleSlidesIndexes = [];
swiper.visibleSlides = [];
// slides.forEach((item)=>)
for (let i = 0; i < slides.length; i += 1) {
const slide = slides[i];
let slideOffset = slide.swiperSlideOffset;
if (params.cssMode && params.centeredSlides) {
slideOffset -= slides[0].swiperSlideOffset;
}
const slideProgress = (offsetCenter + (params.centeredSlides ? swiper.minTranslate() : 0) - slideOffset) / (
slide.swiperSlideSize + params.spaceBetween);
const originalSlideProgress = (offsetCenter - snapGrid[0] + (params.centeredSlides ? swiper.minTranslate() :
0) - slideOffset) / (slide.swiperSlideSize + params.spaceBetween);
const slideBefore = -(offsetCenter - slideOffset);
const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
const isVisible = slideBefore >= 0 && slideBefore < swiper.size - 1 || slideAfter > 1 && slideAfter <= swiper
.size || slideBefore <= 0 && slideAfter >= swiper.size;
if (isVisible) {
swiper.visibleSlides.push(slide);
swiper.visibleSlidesIndexes.push(i);
slides[i].addClass(params.slideVisibleClass);
}
slide.progress = rtl ? -slideProgress : slideProgress;
slide.originalProgress = rtl ? -originalSlideProgress : originalSlideProgress;
}
}
uni_modules/zebra-swiper/libs/utils/utils.js 0 → 100644
export function getAllRect(context, selector) {
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(context)
.selectAll(selector)
.boundingClientRect()
.exec((rect = []) => resolve(rect[0]));
});
}
export function getRect(context, selector) {
return new Promise((resolve) => {
uni.createSelectorQuery()
.in(context)
.select(selector)
.boundingClientRect()
.exec((rect = []) => resolve(rect[0]));
});
}
export function requestAnimationFrame(cb) {
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.platform === 'devtools') {
return setTimeout(() => {
cb();
}, 1000 / 30);
}
return uni
.createSelectorQuery()
.selectViewport()
.boundingClientRect()
.exec(() => {
cb();
});
}
uni_modules/zebra-swiper/libs/vue2/get-changed-params.js 0 → 100644
import {
paramsList
} from './params-list.js';
import {
isObject
} from './utils.js';
function getChangedParams(swiperParams, oldParams, children, oldChildren) {
const keys = [];
if (!oldParams) return keys;
const addKey = (key) => {
if (keys.indexOf(key) < 0) keys.push(key);
};
const oldChildrenKeys = oldChildren.map((child) => child.props && child.props.key);
const childrenKeys = children.map((child) => child.props && child.props.key);
if (oldChildrenKeys.join('') !== childrenKeys.join('')) keys.push('children');
if (oldChildren.length !== children.length) keys.push('children');
const watchParams = paramsList.filter((key) => key[0] === '_').map((key) => key.replace(/_/, ''));
watchParams.forEach((key) => {
if (key in swiperParams && key in oldParams) {
if (isObject(swiperParams[key]) && isObject(oldParams[key])) {
const newKeys = Object.keys(swiperParams[key]);
const oldKeys = Object.keys(oldParams[key]);
if (newKeys.length !== oldKeys.length) {
addKey(key);
} else {
newKeys.forEach((newKey) => {
if (swiperParams[key][newKey] !== oldParams[key][newKey]) {
addKey(key);
}
});
oldKeys.forEach((oldKey) => {
if (swiperParams[key][oldKey] !== oldParams[key][oldKey]) addKey(key);
});
}
} else if (swiperParams[key] !== oldParams[key]) {
addKey(key);
}
} else if (key in swiperParams && !(key in oldParams)) {
addKey(key);
} else if (!(key in swiperParams) && key in oldParams) {
addKey(key);
}
});
return keys;
}
export {
getChangedParams
};
uni_modules/zebra-swiper/libs/vue2/get-params.js 0 → 100644
import Swiper from '../../index.js';
import {
isObject,
extend
} from './utils.js';
import {
paramsList
} from './params-list.js';
function getParams(obj = {}) {
const params = {
on: {},
};
const passedParams = {};
extend(params, Swiper.defaults);
extend(params, Swiper.extendedDefaults);
params._emitClasses = true;
params.init = false;
const rest = {};
const allowedParams = paramsList.map((key) => key.replace(/_/, ''));
// Prevent empty Object.keys(obj) array on ios.
const plainObj = Object.assign({}, obj);
Object.keys(plainObj).forEach((key) => {
if (typeof obj[key] === 'undefined') return;
if (allowedParams.indexOf(key) >= 0) {
if (isObject(obj[key])) {
params[key] = {};
passedParams[key] = {};
extend(params[key], obj[key]);
extend(passedParams[key], obj[key]);
} else {
params[key] = obj[key];
passedParams[key] = obj[key];
}
} else if (key.search(/on[A-Z]/) === 0 && typeof obj[key] === 'function') {
params.on[`${key[2].toLowerCase()}${key.substr(3)}`] = obj[key];
} else {
rest[key] = obj[key];
}
});
['navigation', 'pagination', 'scrollbar'].forEach((key) => {
if (params[key] === true) params[key] = {};
if (params[key] === false) delete params[key];
});
return {
params,
passedParams,
rest
};
}
export {
getParams
};
uni_modules/zebra-swiper/libs/vue2/init-swiper.js 0 → 100644
import Swiper from '../../index.js';
import {
needsNavigation,
needsPagination,
needsScrollbar
} from './utils.js';
function initSwiper(swiperParams, native) {
return new Swiper(swiperParams, native);
}
function mountSwiper({
el,
nextEl,
prevEl,
paginationEl,
scrollbarEl,
swiper
}, swiperParams) {
if (needsNavigation(swiperParams) && nextEl && prevEl) {
swiper.params.navigation.nextEl = nextEl;
swiper.originalParams.navigation.nextEl = nextEl;
swiper.params.navigation.prevEl = prevEl;
swiper.originalParams.navigation.prevEl = prevEl;
}
if (needsPagination(swiperParams) && paginationEl) {
swiper.params.pagination.el = paginationEl;
swiper.originalParams.pagination.el = paginationEl;
}
if (needsScrollbar(swiperParams) && scrollbarEl) {
swiper.params.scrollbar.el = scrollbarEl;
swiper.originalParams.scrollbar.el = scrollbarEl;
}
swiper.init(el);
}
export {
initSwiper,
mountSwiper
};
uni_modules/zebra-swiper/libs/vue2/loop.js 0 → 100644
import Swiper from '../../index.js';
function calcLoopedSlides(slides, swiperParams) {
let slidesPerViewParams = swiperParams.slidesPerView;
if (swiperParams.breakpoints) {
const breakpoint = Swiper.prototype.getBreakpoint(swiperParams.breakpoints);
const breakpointOnlyParams =
breakpoint in swiperParams.breakpoints ? swiperParams.breakpoints[breakpoint] : undefined;
if (breakpointOnlyParams && breakpointOnlyParams.slidesPerView) {
slidesPerViewParams = breakpointOnlyParams.slidesPerView;
}
}
let loopedSlides = Math.ceil(parseFloat(swiperParams.loopedSlides || slidesPerViewParams, 10));
loopedSlides += swiperParams.loopAdditionalSlides;
if (loopedSlides > slides.length) {
loopedSlides = slides.length;
}
return loopedSlides;
}
function renderLoop(native, swiperParams, data) {
const modifiedValue = data;
if (swiperParams.loopFillGroupWithBlank) {
const blankSlidesNum =
swiperParams.slidesPerGroup - (modifiedValue.length % swiperParams.slidesPerGroup);
if (blankSlidesNum !== swiperParams.slidesPerGroup) {
for (let i = 0; i < blankSlidesNum; i += 1) {
const blankSlide = h('div', {
class: `${swiperParams.slideClass} ${swiperParams.slideBlankClass}`,
});
modifiedValue.push(blankSlide);
}
}
}
if (swiperParams.slidesPerView === 'auto' && !swiperParams.loopedSlides) {
swiperParams.loopedSlides = modifiedValue.length;
}
const loopedSlides = calcLoopedSlides(modifiedValue, swiperParams);
const prependSlides = [];
const appendSlides = [];
const prependValue = [];
const appendValue = [];
modifiedValue.forEach((child, index) => {
if (index < loopedSlides) {
if (!native.loopUpdateData) {
appendValue.push(child);
}
}
if (index < modifiedValue.length && index >= modifiedValue.length - loopedSlides) {
if (!native.loopUpdateData) {
prependValue.push(child);
}
}
})
if (native) {
if (!native.originalDataList) native.originalDataList = [];
native.originalDataList = [...prependValue, ...modifiedValue, ...appendValue];
}
return {
data: [...prependValue, ...modifiedValue, ...appendValue]
};
}
export {
calcLoopedSlides,
renderLoop
};
uni_modules/zebra-swiper/libs/vue2/params-list.js 0 → 100644
/* underscore in name -> watch for changes */
const paramsList = [
'modules',
'init',
'_direction',
'touchEventsTarget',
'initialSlide',
'_speed',
'cssMode',
'updateOnWindowResize',
'resizeObserver',
'nested',
'focusableElements',
'_enabled',
'_width',
'_height',
'preventInteractionOnTransition',
'userAgent',
'url',
'_edgeSwipeDetection',
'_edgeSwipeThreshold',
'_freeMode',
'_autoHeight',
'setWrapperSize',
'virtualTranslate',
'_effect',
'breakpoints',
'_spaceBetween',
'_slidesPerView',
'maxBackfaceHiddenSlides',
'_grid',
'_slidesPerGroup',
'_slidesPerGroupSkip',
'_slidesPerGroupAuto',
'_centeredSlides',
'_centeredSlidesBounds',
'_slidesOffsetBefore',
'_slidesOffsetAfter',
'normalizeSlideIndex',
'_centerInsufficientSlides',
'_watchOverflow',
'roundLengths',
'touchRatio',
'touchAngle',
'simulateTouch',
'_shortSwipes',
'_longSwipes',
'longSwipesRatio',
'longSwipesMs',
'_followFinger',
'allowTouchMove',
'_threshold',
'touchMoveStopPropagation',
'touchStartPreventDefault',
'touchStartForcePreventDefault',
'touchReleaseOnEdges',
'uniqueNavElements',
'_resistance',
'_resistanceRatio',
'_watchSlidesProgress',
'_grabCursor',
'preventClicks',
'preventClicksPropagation',
'_slideToClickedSlide',
'_preloadImages',
'updateOnImagesReady',
'_loop',
'_loopAdditionalSlides',
'_loopedSlides',
'_loopFillGroupWithBlank',
'loopPreventsSlide',
'_rewind',
'_allowSlidePrev',
'_allowSlideNext',
'_swipeHandler',
'_noSwiping',
'noSwipingClass',
'noSwipingSelector',
'passiveListeners',
'containerModifierClass',
'slideClass',
'slideBlankClass',
'slideActiveClass',
'slideDuplicateActiveClass',
'slideVisibleClass',
'slideDuplicateClass',
'slideNextClass',
'slideDuplicateNextClass',
'slidePrevClass',
'slideDuplicatePrevClass',
'wrapperClass',
'runCallbacksOnInit',
'observer',
'observeParents',
'observeSlideChildren',
// modules
'a11y',
'_autoplay',
'_controller',
'coverflowEffect',
'cubeEffect',
'fadeEffect',
'flipEffect',
'creativeEffect',
'cardsEffect',
'panorama',
'hashNavigation',
'history',
'keyboard',
'lazy',
'mousewheel',
'_navigation',
'_pagination',
'parallax',
'_scrollbar',
'_thumbs',
'_virtual',
'zoom',
];
export {
paramsList
};
uni_modules/zebra-swiper/libs/vue2/update-swiper.js 0 → 100644
import {
isObject,
extend
} from './utils.js';
async function updateSwiper({
swiper,
slides,
passedParams,
changedParams,
nextEl,
prevEl,
paginationEl,
scrollbarEl,
}) {
const updateParams = changedParams.filter((key) => key !== 'children' && key !== 'direction');
const {
params: currentParams,
pagination,
navigation,
scrollbar,
virtual,
thumbs
} = swiper;
let needThumbsInit;
let needControllerInit;
let needPaginationInit;
let needScrollbarInit;
let needNavigationInit;
if (
changedParams.includes('thumbs') &&
passedParams.thumbs &&
passedParams.thumbs.swiper &&
currentParams.thumbs &&
!currentParams.thumbs.swiper
) {
needThumbsInit = true;
}
if (
changedParams.includes('controller') &&
passedParams.controller &&
passedParams.controller.control &&
currentParams.controller &&
!currentParams.controller.control
) {
needControllerInit = true;
}
if (
changedParams.includes('pagination') &&
passedParams.pagination &&
(passedParams.pagination.el || paginationEl) &&
(currentParams.pagination || currentParams.pagination === false) &&
pagination &&
!pagination.el
) {
needPaginationInit = true;
}
if (
changedParams.includes('scrollbar') &&
passedParams.scrollbar &&
(passedParams.scrollbar.el || scrollbarEl) &&
(currentParams.scrollbar || currentParams.scrollbar === false) &&
scrollbar &&
!scrollbar.el
) {
needScrollbarInit = true;
}
if (
changedParams.includes('navigation') &&
passedParams.navigation &&
(passedParams.navigation.prevEl || prevEl) &&
(passedParams.navigation.nextEl || nextEl) &&
(currentParams.navigation || currentParams.navigation === false) &&
navigation &&
!navigation.prevEl &&
!navigation.nextEl
) {
needNavigationInit = true;
}
const destroyModule = (mod) => {
if (!swiper[mod]) return;
swiper[mod].destroy();
if (mod === 'navigation') {
currentParams[mod].prevEl = undefined;
currentParams[mod].nextEl = undefined;
swiper[mod].prevEl = undefined;
swiper[mod].nextEl = undefined;
} else {
currentParams[mod].el = undefined;
swiper[mod].el = undefined;
}
};
updateParams.forEach((key) => {
if (isObject(currentParams[key]) && isObject(passedParams[key])) {
extend(currentParams[key], passedParams[key]);
} else {
const newValue = passedParams[key];
if (
(newValue === true || newValue === false) &&
(key === 'navigation' || key === 'pagination' || key === 'scrollbar')
) {
if (newValue === false) {
destroyModule(key);
}
} else {
currentParams[key] = passedParams[key];
}
}
});
// if (changedParams.includes('virtual') && virtual && currentParams.virtual.enabled) {
// virtual.update();
// }
if (changedParams.includes('children') && virtual && currentParams.virtual.enabled) {
// virtual.slides = slides;
virtual.update(true);
} else if (changedParams.includes('children') && swiper.lazy && swiper.params.lazy.enabled) {
swiper.lazy.load();
}
if (needThumbsInit) {
const initialized = thumbs.init();
if (initialized) thumbs.update(true);
}
if (needControllerInit) {
swiper.controller.control = currentParams.controller.control;
}
if (needPaginationInit) {
if (paginationEl) currentParams.pagination.el = paginationEl;
pagination.init();
pagination.render();
pagination.update();
}
if (needScrollbarInit) {
if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
scrollbar.init();
scrollbar.updateSize();
scrollbar.setTranslate();
}
if (needNavigationInit) {
if (nextEl) currentParams.navigation.nextEl = nextEl;
if (prevEl) currentParams.navigation.prevEl = prevEl;
navigation.init();
navigation.update();
}
if (changedParams.includes('allowSlideNext')) {
swiper.allowSlideNext = passedParams.allowSlideNext;
}
if (changedParams.includes('allowSlidePrev')) {
swiper.allowSlidePrev = passedParams.allowSlidePrev;
}
if (changedParams.includes('direction')) {
swiper.changeDirection(passedParams.direction, false);
}
swiper.update();
}
export {
updateSwiper
};
uni_modules/zebra-swiper/libs/vue2/utils.js 0 → 100644
function isObject(o) {
return (
typeof o === 'object' &&
o !== null &&
o.constructor &&
Object.prototype.toString.call(o).slice(8, -1) === 'Object'
);
}
function extend(target, src) {
const noExtend = ['__proto__', 'constructor', 'prototype'];
Object.keys(src)
.filter((key) => noExtend.indexOf(key) < 0)
.forEach((key) => {
if (typeof target[key] === 'undefined') target[key] = src[key];
else if (isObject(src[key]) && isObject(target[key]) && Object.keys(src[key]).length > 0) {
if (src[key].__swiper__) target[key] = src[key];
else extend(target[key], src[key]);
} else {
target[key] = src[key];
}
});
}
function needsNavigation(props = {}) {
return (
props.navigation &&
typeof props.navigation.nextEl === 'undefined' &&
typeof props.navigation.prevEl === 'undefined'
);
}
function needsPagination(props = {}) {
return props.pagination && typeof props.pagination.el === 'undefined';
}
function needsScrollbar(props = {}) {
return props.scrollbar;
}
function uniqueClasses(classNames = '') {
const classes = classNames
.split(' ')
.map((c) => c.trim())
.filter((c) => !!c);
const unique = [];
classes.forEach((c) => {
if (unique.indexOf(c) < 0) unique.push(c);
});
return unique.join(' ');
}
export {
isObject,
extend,
needsNavigation,
needsPagination,
needsScrollbar,
uniqueClasses
};
uni_modules/zebra-swiper/libs/vue2/virtual.js 0 → 100644
// import { h } from 'vue';
function updateOnVirtualData(swiper) {
if (
!swiper ||
swiper.destroyed ||
!swiper.params.virtual ||
(swiper.params.virtual && !swiper.params.virtual.enabled)
) return;
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
if (swiper.lazy && swiper.params.lazy.enabled) {
swiper.lazy.load();
}
if (swiper.parallax && swiper.params.parallax && swiper.params.parallax.enabled) {
swiper.parallax.setTranslate();
}
}
function renderVirtual(swiperRef, slides, virtualData) {
if (!virtualData) return null;
const style = swiperRef.isHorizontal() ? {
[swiperRef.rtlTranslate ? 'right' : 'left']: `${virtualData.offset}px`,
} : {
top: `${virtualData.offset}px`,
};
return slides
.filter((slide, index) => index >= virtualData.from && index <= virtualData.to)
.map((slide) => {
if (!slide.props) slide.props = {};
if (!slide.props.style) slide.props.style = {};
slide.props.swiperRef = swiperRef;
slide.props.style = style;
return h(slide.type, {
...slide.props
}, slide.children);
});
}
export {
renderVirtual,
updateOnVirtualData
};
uni_modules/zebra-swiper/modules/autoplay/autoplay.js 0 → 100644
import {
nextTick
} from '../../shared/utils.js';
export default function Autoplay({
swiper,
extendParams,
on,
emit
}) {
let timeout;
swiper.autoplay = {
running: false,
paused: false
};
extendParams({
autoplay: {
enabled: false,
delay: 3000,
waitForTransition: true,
disableOnInteraction: true,
stopOnLastSlide: false,
reverseDirection: false,
pauseOnMouseEnter: false
}
});
function run() {
const $activeSlideEl = swiper.slides[swiper.activeIndex];
let delay = swiper.params.autoplay.delay;
clearTimeout(timeout);
timeout = nextTick(() => {
let autoplayResult;
if (swiper.params.autoplay.reverseDirection) {
if (swiper.params.loop) {
swiper.loopFix();
autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
emit('autoplay');
} else if (!swiper.isBeginning) {
autoplayResult = swiper.slidePrev(swiper.params.speed, true, true);
emit('autoplay');
} else if (!swiper.params.autoplay.stopOnLastSlide) {
autoplayResult = swiper.slideTo(swiper.slides.length - 1, swiper.params.speed, true, true);
emit('autoplay');
} else {
stop();
}
} else if (swiper.params.loop) {
swiper.loopFix();
setTimeout(() => {
autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
}, 30)
emit('autoplay');
} else if (!swiper.isEnd) {
autoplayResult = swiper.slideNext(swiper.params.speed, true, true);
emit('autoplay');
} else if (!swiper.params.autoplay.stopOnLastSlide) {
autoplayResult = swiper.slideTo(0, swiper.params.speed, true, true);
emit('autoplay');
} else {
stop();
}
if (swiper.params.cssMode && swiper.autoplay.running) run();
else if (autoplayResult === false) {
run();
}
}, delay);
}
function start() {
if (typeof timeout !== 'undefined') return false;
if (swiper.autoplay.running) return false;
swiper.autoplay.running = true;
emit('autoplayStart');
run();
return true;
}
function stop() {
if (!swiper.autoplay.running) return false;
if (typeof timeout === 'undefined') return false;
if (timeout) {
clearTimeout(timeout);
timeout = undefined;
}
swiper.autoplay.running = false;
emit('autoplayStop');
return true;
}
function pause(speed) {
if (!swiper.autoplay.running) return;
if (swiper.autoplay.paused) return;
if (timeout) clearTimeout(timeout);
swiper.autoplay.paused = true;
if (speed === 0 || !swiper.params.autoplay.waitForTransition) {
swiper.autoplay.paused = false;
run();
} else {
['transitionEnd', 'webkitTransitionEnd'].forEach(event => {
swiper.on(event, onTransitionEnd);
});
}
}
function onVisibilityChange() {
// const document = getDocument();
// if (document.visibilityState === 'hidden' && swiper.autoplay.running) {
// pause();
// }
// if (document.visibilityState === 'visible' && swiper.autoplay.paused) {
// run();
// swiper.autoplay.paused = false;
// }
}
function onTransitionEnd(e) {
if (!swiper || swiper.destroyed || !swiper.$wrapperEl) return;
// if (e.target !== swiper.$wrapperEl[0]) return;
['transitionEnd', 'webkitTransitionEnd'].forEach(event => {
swiper.off(event, onTransitionEnd);
});
swiper.autoplay.paused = false;
if (!swiper.autoplay.running) {
stop();
} else {
run();
}
}
function onMouseEnter() {
if (swiper.params.autoplay.disableOnInteraction) {
stop();
} else {
pause();
}
// ['transitionend', 'webkitTransitionEnd'].forEach(event => {
// swiper.$wrapperEl[0].removeEventListener(event, onTransitionEnd);
// });
}
function onMouseLeave() {
if (swiper.params.autoplay.disableOnInteraction) {
return;
}
swiper.autoplay.paused = false;
run();
}
function attachMouseEvents() {
if (swiper.params.autoplay.pauseOnMouseEnter) {}
}
function detachMouseEvents() {}
on('init update', () => {
if (swiper.params.autoplay.enabled) {
start();
attachMouseEvents();
}
});
on('beforeTransitionStart', (_s, speed, internal) => {
if (swiper.autoplay.running) {
if (internal || !swiper.params.autoplay.disableOnInteraction) {
swiper.autoplay.pause(speed);
} else {
if (!swiper.params.loop) {
stop();
}
}
}
});
on('sliderFirstMove', () => {
if (swiper.autoplay.running) {
if (swiper.params.autoplay.disableOnInteraction) {
stop();
} else {
pause();
}
}
});
on('touch-end', () => {
if (swiper.params.cssMode && swiper.autoplay.paused && !swiper.params.autoplay.disableOnInteraction) {
run();
}
});
on('destroy', () => {
detachMouseEvents();
if (swiper.autoplay.running) {
stop();
}
});
Object.assign(swiper.autoplay, {
pause,
run,
start,
stop
});
}
uni_modules/zebra-swiper/modules/effect-cards/effect-cards.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
export default function EffectCards({
swiper,
extendParams,
on
}) {
extendParams({
cardsEffect: {
slideShadows: true,
transformEl: null,
rotate: true,
perSlideRotate: 2,
perSlideOffset: 8,
},
});
const setTranslate = () => {
const {
slides,
activeIndex
} = swiper;
const params = swiper.params.cardsEffect;
const {
startTranslate,
isTouched
} = swiper.touchEventsData;
const currentTranslate = swiper.translate;
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = slides[i];
const slideProgress = $slideEl.progress;
const progress = Math.min(Math.max(slideProgress, -4), 4);
let offset = $slideEl.swiperSlideOffset;
if (swiper.params.centeredSlides && !swiper.params.cssMode) {
swiper.$wrapperEl.transform(`translateX(${swiper.minTranslate()}px)`);
}
if (swiper.params.centeredSlides && swiper.params.cssMode) {
offset -= slides.swiperSlideOffset;
}
let tX = swiper.params.cssMode ? -offset - swiper.translate : -offset;
let tY = 0;
const tZ = -100 * Math.abs(progress);
let scale = 1;
let rotate = -params.perSlideRotate * progress;
let tXAdd = params.perSlideOffset - Math.abs(progress) * 0.75;
const isSwipeToNext =
(i === activeIndex || i === activeIndex - 1) &&
progress > 0 &&
progress < 1 &&
(isTouched || swiper.params.cssMode) &&
currentTranslate < startTranslate;
const isSwipeToPrev =
(i === activeIndex || i === activeIndex + 1) &&
progress < 0 &&
progress > -1 &&
(isTouched || swiper.params.cssMode) &&
currentTranslate > startTranslate;
if (isSwipeToNext || isSwipeToPrev) {
const subProgress = (1 - Math.abs((Math.abs(progress) - 0.5) / 0.5)) ** 0.5;
rotate += -28 * progress * subProgress;
scale += -0.5 * subProgress;
tXAdd += 96 * subProgress;
tY = `${-25 * subProgress * Math.abs(progress)}%`;
}
if (progress < 0) {
// next
tX = `calc(${tX}px + (${tXAdd * Math.abs(progress)}%))`;
} else if (progress > 0) {
// prev
tX = `calc(${tX}px + (-${tXAdd * Math.abs(progress)}%))`;
} else {
tX = `${tX}px`;
}
if (!swiper.isHorizontal()) {
const prevY = tY;
tY = tX;
tX = prevY;
}
const scaleString =
progress < 0 ? `${1 + (1 - scale) * progress}` : `${1 - (1 - scale) * progress}`;
const transform =
`translate3d(${tX}, ${tY}, ${tZ}px) rotateZ(${params.rotate ? rotate : 0}deg) scale(${scaleString})`;
$slideEl.css({
zIndex: -Math.abs(Math.round(slideProgress)) + slides.length
})
const $targetEl = effectTarget(params, $slideEl);
$targetEl.transform(transform);
if (swiper.params.willChange) {
$targetEl.willChange("transform");
}
slides[i].addClass('swiper-slide-cards')
}
};
const setTransition = (duration) => {
const {
transformEl
} = swiper.params.cardsEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (let i = 0; i < $transitionElements.length; i += 1) {
$transitionElements[i].transition(duration);
}
effectVirtualTransitionEnd({
swiper,
duration,
transformEl
});
};
effectInit({
effect: 'cards',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
watchSlidesProgress: true,
virtualTranslate: !swiper.params.cssMode,
}),
});
}
uni_modules/zebra-swiper/modules/effect-cards/effect-cards.scss 0 → 100644
.swiper-cards {
overflow: visible;
}
.swiper-slide-cards {
transform-origin: center bottom;
backface-visibility: hidden;
}
\ No newline at end of file
uni_modules/zebra-swiper/modules/effect-carousel/effect-carousel.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
export default function EffectCarousel({
swiper,
extendParams,
on
}) {
extendParams({
carouselEffect: {}
});
const setTranslate = () => {
const scaleStep = 0.2;
const zIndexMax = swiper.slides.length;
for (let i = 0; i < swiper.slides.length; i += 1) {
const slideEl = swiper.slides[i];
const slideProgress = swiper.slides[i].progress;
const absProgress = Math.abs(slideProgress);
let modify = 1;
if (absProgress > 1) {
modify = (absProgress - 1) * 0.3 + 1;
}
const translate = `${slideProgress * modify * 50}%`;
const scale = 1 - absProgress * scaleStep;
const zIndex = zIndexMax - Math.abs(Math.round(slideProgress));
const slideTransform = `translateX(${translate}) scale(${scale})`;
slideEl.transform(slideTransform);
slideEl.css({
zIndex: zIndex
})
if (absProgress > 3) {
slideEl.css({
opacity: 0
})
} else {
slideEl.css({
opacity: 1
})
}
}
};
const setTransition = duration => {
const {
transformEl
} = swiper.params.coverflowEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (var i = 0; i < $transitionElements.length; i++) {
$transitionElements[i].transition(duration);
}
};
effectInit({
effect: 'carousel',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
})
});
}
uni_modules/zebra-swiper/modules/effect-carousel/effect-carousel.scss 0 → 100644
.swiper-slide-carousel {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
transform-style: preserve-3d;
}
\ No newline at end of file
uni_modules/zebra-swiper/modules/effect-coverflow/effect-coverflow.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
export default function EffectCoverflow({
swiper,
extendParams,
on
}) {
extendParams({
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
scale: 1,
modifier: 1,
slideShadows: true,
transformEl: null
}
});
const setTranslate = () => {
const {
width: swiperWidth,
height: swiperHeight,
slides,
slidesSizesGrid
} = swiper;
const params = swiper.params.coverflowEffect;
const isHorizontal = swiper.isHorizontal();
const transform = swiper.translate;
const center = isHorizontal ? -transform + swiperWidth / 2 : -transform + swiperHeight / 2;
const rotate = isHorizontal ? params.rotate : -params.rotate;
const translate = params.depth; // Each slide offset from center
for (let i = 0, length = slides.length; i < length; i += 1) {
const $slideEl = slides[i];
const slideSize = slidesSizesGrid[i];
const slideOffset = $slideEl.swiperSlideOffset;
const offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * params.modifier;
let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier; // var rotateZ = 0
let translateZ = -translate * Math.abs(offsetMultiplier);
let stretch = params.stretch; // Allow percentage to make a relative stretch for responsive sliders
if (typeof stretch === 'string' && stretch.indexOf('%') !== -1) {
stretch = parseFloat(params.stretch) / 100 * slideSize;
}
let translateY = isHorizontal ? 0 : stretch * offsetMultiplier;
let translateX = isHorizontal ? stretch * offsetMultiplier : 0;
let scale = 1 - (1 - params.scale) * Math.abs(offsetMultiplier); // Fix for ultra small values
if (Math.abs(translateX) < 0.001) translateX = 0;
if (Math.abs(translateY) < 0.001) translateY = 0;
if (Math.abs(translateZ) < 0.001) translateZ = 0;
if (Math.abs(rotateY) < 0.001) rotateY = 0;
if (Math.abs(rotateX) < 0.001) rotateX = 0;
if (Math.abs(scale) < 0.001) scale = 0;
const slideTransform =
`translate3d(${translateX}px,${translateY}px,${translateZ}px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;
const $targetEl = effectTarget(params, $slideEl);
$targetEl.transform(slideTransform);
$slideEl.css({
zIndex: -Math.abs(Math.round(offsetMultiplier)) + 1
})
if (swiper.params.willChange) {
$targetEl.willChange("transform");
}
$slideEl.addClass('swiper-slide-coverflow')
// if (params.slideShadows) {
// // Set shadows
// let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
// let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
// if ($shadowBeforeEl.length === 0) {
// $shadowBeforeEl = createShadow(params, $slideEl, isHorizontal ? 'left' : 'top');
// }
// if ($shadowAfterEl.length === 0) {
// $shadowAfterEl = createShadow(params, $slideEl, isHorizontal ? 'right' : 'bottom');
// }
// if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
// if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
// }
}
};
const setTransition = duration => {
const {
transformEl
} = swiper.params.coverflowEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (var i = 0; i < $transitionElements.length; i++) {
$transitionElements[i].transition(duration);
}
};
effectInit({
effect: 'coverflow',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
watchSlidesProgress: true
})
});
}
uni_modules/zebra-swiper/modules/effect-coverflow/effect-coverflow.scss 0 → 100644
.swiper-slide-coverflow{
transform-style: preserve-3d;
}
uni_modules/zebra-swiper/modules/effect-creative/effect-creative.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
export default function EffectCreative({
swiper,
extendParams,
on
}) {
extendParams({
creativeEffect: {
transformEl: null,
limitProgress: 1,
shadowPerProgress: false,
progressMultiplier: 1,
perspective: true,
prev: {
translate: [0, 0, 0],
rotate: [0, 0, 0],
opacity: 1,
scale: 1,
},
next: {
translate: [0, 0, 0],
rotate: [0, 0, 0],
opacity: 1,
scale: 1,
},
},
});
const getTranslateValue = (value) => {
if (typeof value === 'string') return value;
return `${value}px`;
};
const setTranslate = () => {
const {
slides,
$wrapperEl,
slidesSizesGrid
} = swiper;
const params = swiper.params.creativeEffect;
const {
progressMultiplier: multiplier
} = params;
const isCenteredSlides = swiper.params.centeredSlides;
if (isCenteredSlides) {
const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
$wrapperEl.transform(`translateX(calc(50% - ${margin}px))`);
}
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = slides[i];
const slideProgress = $slideEl.progress;
const progress = Math.min(
Math.max($slideEl.progress, -params.limitProgress),
params.limitProgress,
);
let originalProgress = progress;
if (!isCenteredSlides) {
originalProgress = Math.min(
Math.max($slideEl.originalProgress, -params.limitProgress),
params.limitProgress,
);
}
const offset = $slideEl.swiperSlideOffset;
const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
const r = [0, 0, 0];
let custom = false;
if (!swiper.isHorizontal()) {
t[1] = t[0];
t[0] = 0;
}
let data = {
translate: [0, 0, 0],
rotate: [0, 0, 0],
scale: 1,
opacity: 1,
};
if (progress < 0) {
data = params.next;
custom = true;
} else if (progress > 0) {
data = params.prev;
custom = true;
}
// set translate
t.forEach((value, index) => {
t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(
progress * multiplier,
)}))`;
});
// set rotates
r.forEach((value, index) => {
r[index] = data.rotate[index] * Math.abs(progress * multiplier);
});
// $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
$slideEl.css({
zIndex: -Math.abs(Math.round(slideProgress)) + slides.length
})
const translateString = t.join(', ');
const rotateString = `rotateX(${r[0]}deg) rotateY(${r[1]}deg) rotateZ(${r[2]}deg)`;
const scaleString =
originalProgress < 0 ?
`scale(${1 + (1 - data.scale) * originalProgress * multiplier})` :
`scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
const opacityString =
originalProgress < 0 ?
1 + (1 - data.opacity) * originalProgress * multiplier :
1 - (1 - data.opacity) * originalProgress * multiplier;
const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
// Set shadows
// if ((custom && data.shadow) || !custom) {
// let $shadowEl = $slideEl.children('.swiper-slide-shadow');
// if ($shadowEl.length === 0 && data.shadow) {
// $shadowEl = createShadow(params, $slideEl);
// }
// if ($shadowEl.length) {
// const shadowOpacity = params.shadowPerProgress
// ? progress * (1 / params.limitProgress)
// : progress;
// $shadowEl[0].style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
// }
// }
const $targetEl = effectTarget(params, $slideEl);
$targetEl.transform(transform);
$targetEl.css({
opacity: opacityString
});
if (data.origin) {
$targetEl.css({
'transform-origin': data.origin
});
}
if (swiper.params.willChange) {
slides[i].willChange("transform,opacity");
}
slides[i].addClass('swiper-slide-creative')
}
};
const setTransition = (duration) => {
const {
transformEl
} = swiper.params.creativeEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (let i = 0; i < $transitionElements.length; i += 1) {
$transitionElements[i].transition(duration);
}
effectVirtualTransitionEnd({
swiper,
duration,
transformEl,
allSlides: true
});
};
effectInit({
effect: 'creative',
swiper,
on,
setTranslate,
setTransition,
perspective: () => swiper.params.creativeEffect.perspective,
overwriteParams: () => ({
watchSlidesProgress: true,
virtualTranslate: !swiper.params.cssMode,
}),
});
}
uni_modules/zebra-swiper/modules/effect-creative/effect-creative.scss 0 → 100644
.swiper-creative {
}
.swiper-slide-creative {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
transform-style: preserve-3d;
}
\ No newline at end of file
uni_modules/zebra-swiper/modules/effect-cube/effect-cube.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
export default function EffectCube({
swiper,
extendParams,
on
}) {
extendParams({
cubeEffect: {
slideShadows: true,
shadow: true,
shadowOffset: 20,
shadowScale: 0.94,
},
});
const setTranslate = () => {
const {
$el,
$wrapperEl,
slides,
width: swiperWidth,
height: swiperHeight,
rtlTranslate: rtl,
size: swiperSize,
browser,
} = swiper;
const params = swiper.params.cubeEffect;
const isHorizontal = swiper.isHorizontal();
const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
let wrapperRotate = 0;
let $cubeShadowEl;
if (params.shadow) {
if (isHorizontal) {
// $cubeShadowEl = $wrapperEl.find('.swiper-cube-shadow');
if (!swiper.native.cubeShadowShowWrapper) {
swiper.$wrapperEl.updateData({
cubeShadowShowWrapper: true
})
}
swiper.$wrapperEl.cubeShadowCss({
height: `${swiperWidth}px`
});
} else {
if (!swiper.native.cubeShadowShowRoot) {
swiper.$wrapperEl.updateData({
cubeShadowShowRoot: true
})
}
}
}
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = slides[i];
let slideIndex = i;
if (isVirtual) {
slideIndex = parseInt(swiper.activeIndex, 10);
}
let slideAngle = slideIndex * 90;
let round = Math.floor(slideAngle / 360);
if (rtl) {
slideAngle = -slideAngle;
round = Math.floor(-slideAngle / 360);
}
const progress = Math.max(Math.min($slideEl.progress, 1), -1);
let tx = 0;
let ty = 0;
let tz = 0;
if (slideIndex % 4 === 0) {
tx = -round * 4 * swiperSize;
tz = 0;
} else if ((slideIndex - 1) % 4 === 0) {
tx = 0;
tz = -round * 4 * swiperSize;
} else if ((slideIndex - 2) % 4 === 0) {
tx = swiperSize + round * 4 * swiperSize;
tz = swiperSize;
} else if ((slideIndex - 3) % 4 === 0) {
tx = -swiperSize;
tz = 3 * swiperSize + swiperSize * 4 * round;
}
if (rtl) {
tx = -tx;
}
if (!isHorizontal) {
ty = tx;
tx = 0;
}
const transform = `rotateX(${isHorizontal ? 0 : -slideAngle}deg) rotateY(${
isHorizontal ? slideAngle : 0
}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
if (progress <= 1 && progress > -1) {
wrapperRotate = slideIndex * 90 + progress * 90;
if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
}
$slideEl.transform(transform);
// if (params.slideShadows) {
// // Set shadows
// let shadowBefore = isHorizontal ?
// $slideEl.find('.swiper-slide-shadow-left') :
// $slideEl.find('.swiper-slide-shadow-top');
// let shadowAfter = isHorizontal ?
// $slideEl.find('.swiper-slide-shadow-right') :
// $slideEl.find('.swiper-slide-shadow-bottom');
// if (shadowBefore.length === 0) {
// shadowBefore = $(
// `<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`,
// );
// $slideEl.append(shadowBefore);
// }
// if (shadowAfter.length === 0) {
// shadowAfter = $(
// `<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`,
// );
// $slideEl.append(shadowAfter);
// }
// if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
// if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
// }
$slideEl.addClass('swiper-slide-cube')
}
$wrapperEl.css({
'-webkit-transform-origin': `50% 50% -${swiperSize / 2}px`,
'transform-origin': `50% 50% -${swiperSize / 2}px`,
});
if (params.shadow) {
if (isHorizontal) {
swiper.$wrapperEl.cubeShadowTransform(
`translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${
-swiperWidth / 2
}px) rotateX(90deg) rotateZ(0deg) scale(${params.shadowScale})`,
);
} else {
const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
const multiplier =
1.5 -
(Math.sin((shadowAngle * 2 * Math.PI) / 360) / 2 +
Math.cos((shadowAngle * 2 * Math.PI) / 360) / 2);
const scale1 = params.shadowScale;
const scale2 = params.shadowScale / multiplier;
const offset = params.shadowOffset;
swiper.$wrapperEl.cubeShadowTransform(
`scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${
-swiperHeight / 2 / scale2
}px) rotateX(-90deg)`,
);
}
}
const zFactor = browser.isSafari || browser.isWebView ? -swiperSize / 2 : 0;
$wrapperEl.transform(
`translate3d(0px,0,${zFactor}px) rotateX(${
swiper.isHorizontal() ? 0 : wrapperRotate
}deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`,
);
};
const setTransition = (duration) => {
const {
$el,
slides
} = swiper;
for (var i = 0; i < slides.length; i++) {
slides[i].transition(duration)
}
if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
swiper.$wrapperEl.cubeShadowTransition(duration);
}
};
effectInit({
effect: 'cube',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
slidesPerView: 1,
slidesPerGroup: 1,
watchSlidesProgress: true,
resistanceRatio: 0,
spaceBetween: 0,
centeredSlides: false,
virtualTranslate: true,
}),
});
}
uni_modules/zebra-swiper/modules/effect-cube/effect-cube.scss 0 → 100644
.swiper-cube {
overflow: visible;
&.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
&:before {
content: '';
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
-webkit-filter: blur(50px);
filter: blur(50px);
}
}
}
.swiper-slide-cube {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
.swiper-slide {
pointer-events: none;
}
}
.swiper-slide-cube.swiper-slide-active,
.swiper-slide-cube.swiper-slide-next,
.swiper-slide-cube.swiper-slide-prev,
.swiper-slide-cube.swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
uni_modules/zebra-swiper/modules/effect-fade/effect-fade.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
export default function EffectFade({
swiper,
extendParams,
on
}) {
extendParams({
fadeEffect: {
crossFade: false,
transformEl: null
}
});
const setTranslate = () => {
const {
slides
} = swiper;
const params = swiper.params.fadeEffect;
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = swiper.slides[i];
const offset = $slideEl.swiperSlideOffset;
let tx = -offset;
if (!swiper.params.virtualTranslate) tx -= swiper.translate;
let ty = 0;
if (!swiper.isHorizontal()) {
ty = tx;
tx = 0;
}
const slideOpacity = swiper.params.fadeEffect.crossFade ? Math.max(1 - Math.abs($slideEl.progress), 0) :
1 + Math.min(Math.max($slideEl.progress, -1), 0);
const $targetEl = effectTarget(params, $slideEl);
$targetEl.css({
opacity: slideOpacity
})
$targetEl.transform(`translate3d(${tx}px, ${ty}px, 0px)`);
if (swiper.params.willChange) {
$targetEl.willChange("opacity");
}
slides[i].addClass('swiper-slide-fade')
}
};
const setTransition = duration => {
const {
transformEl
} = swiper.params.fadeEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (let i = 0; i < $transitionElements.length; i += 1) {
$transitionElements[i].transition(duration);
}
effectVirtualTransitionEnd({
swiper,
duration,
transformEl,
allSlides: true
});
};
effectInit({
effect: 'fade',
swiper,
on,
setTranslate,
setTransition,
overwriteParams: () => ({
slidesPerView: 1,
slidesPerGroup: 1,
watchSlidesProgress: true,
spaceBetween: 0,
virtualTranslate: !swiper.params.cssMode
})
});
}
uni_modules/zebra-swiper/modules/effect-fade/effect-fade.scss 0 → 100644
.swiper-slide-fade {
pointer-events: none;
transition-property: opacity;
.swiper-slide {
pointer-events: none;
}
}
.swiper-slide-fade.swiper-slide-active {
pointer-events: auto;
}
uni_modules/zebra-swiper/modules/effect-flip/effect-flip.js 0 → 100644
import effectInit from '../../shared/effect-init.js';
import effectTarget from '../../shared/effect-target.js';
import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
export default function EffectFlip({
swiper,
extendParams,
on
}) {
extendParams({
flipEffect: {
slideShadows: true,
limitRotation: true,
transformEl: null,
},
});
const setTranslate = () => {
const {
slides,
rtlTranslate: rtl
} = swiper;
const params = swiper.params.flipEffect;
for (let i = 0; i < slides.length; i += 1) {
const $slideEl = slides[i];
let progress = $slideEl.progress;
if (swiper.params.flipEffect.limitRotation) {
progress = Math.max(Math.min($slideEl.progress, 1), -1);
}
const offset = $slideEl.swiperSlideOffset;
const rotate = -180 * progress;
let rotateY = rotate;
let rotateX = 0;
let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
let ty = 0;
if (!swiper.isHorizontal()) {
ty = tx;
tx = 0;
rotateX = -rotateY;
rotateY = 0;
} else if (rtl) {
rotateY = -rotateY;
}
$slideEl.css({
zIndex: -Math.abs(Math.round(progress)) + slides.length
})
// if (params.slideShadows) {
// // Set shadows
// let shadowBefore = swiper.isHorizontal()
// ? $slideEl.find('.swiper-slide-shadow-left')
// : $slideEl.find('.swiper-slide-shadow-top');
// let shadowAfter = swiper.isHorizontal()
// ? $slideEl.find('.swiper-slide-shadow-right')
// : $slideEl.find('.swiper-slide-shadow-bottom');
// if (shadowBefore.length === 0) {
// shadowBefore = createShadow(params, $slideEl, swiper.isHorizontal() ? 'left' : 'top');
// }
// if (shadowAfter.length === 0) {
// shadowAfter = createShadow(params, $slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
// }
// if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
// if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
// }
const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
const $targetEl = effectTarget(params, $slideEl);
$targetEl.transform(transform);
if (swiper.params.willChange) {
$targetEl.willChange("transform");
}
slides[i].addClass('swiper-slide-flip')
}
};
const setTransition = (duration) => {
const {
transformEl
} = swiper.params.flipEffect;
const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
for (let i = 0; i < $transitionElements.length; i += 1) {
$transitionElements[i].transition(duration);
}
effectVirtualTransitionEnd({
swiper,
duration,
transformEl
});
};
effectInit({
effect: 'flip',
swiper,
on,
setTranslate,
setTransition,
perspective: () => true,
overwriteParams: () => ({
slidesPerView: 1,
slidesPerGroup: 1,
watchSlidesProgress: true,
spaceBetween: 0,
virtualTranslate: !swiper.params.cssMode,
}),
});
}
uni_modules/zebra-swiper/modules/effect-flip/effect-flip.scss 0 → 100644
.swiper-flip {
overflow: visible;
.swiper-slide-shadow-top,
.swiper-slide-shadow-bottom,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right {
z-index: 0;
backface-visibility: hidden;
}
}
.swiper-slide-flip {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
transform-style: preserve-3d;
.swiper-slide {
pointer-events: none;
}
}
uni_modules/zebra-swiper/modules/effect-panorama/effect-panorama.js 0 → 100644
export default function Panorama({
swiper,
extendParams,
on
}) {
extendParams({
panorama: {
depth: 200,
rotate: 30,
stretch: 1
},
});
on('beforeInit', () => {
if (swiper.params.effect !== 'panorama') return;
swiper.classNames.push(`${swiper.params.containerModifierClass}panorama`);
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
const overwriteParams = {
watchSlidesProgress: true,
};
Object.assign(swiper.params, overwriteParams);
Object.assign(swiper.originalParams, overwriteParams);
});
on('progress', () => {
if (swiper.params.effect !== 'panorama') return;
const sizesGrid = swiper.slidesSizesGrid;
const {
depth = 200, rotate = 30, stretch = 1
} = swiper.params.panorama;
const angleRad = (rotate * Math.PI) / 180;
const halfAngleRad = angleRad / 2;
const angleModifier = 1 / (180 / rotate);
for (let i = 0; i < swiper.slides.length; i += 1) {
const slideEl = swiper.slides[i];
const slideProgress = slideEl.progress;
const slideSize = sizesGrid[i];
const progressModifier = swiper.params.centeredSlides ?
0 :
(swiper.params.slidesPerView - 1) * 0.5;
const modifiedProgress = slideProgress + progressModifier;
const angleCos = 1 - Math.cos(modifiedProgress * angleModifier * Math.PI);
const translateX = `${modifiedProgress * (stretch * slideSize / 3) * angleCos}px`;
const rotateY = modifiedProgress * rotate;
const radius = (slideSize * 0.5) / Math.sin(halfAngleRad);
const translateZ = `${radius * angleCos - depth}px`;
slideEl.transform(
`translateX(${translateX}) translateZ(${translateZ}) rotateY(${rotateY}deg)`);
if (swiper.params.willChange) {
slideEl.willChange("transform");
}
slideEl.addClass('swiper-slide-panorama')
}
});
on('setTransition', (s, duration) => {
if (swiper.params.effect !== 'panorama') return;
swiper.slides.forEach((slideEl) => {
slideEl.transition(duration);
});
});
}
uni_modules/zebra-swiper/modules/free-mode/free-mode.js 0 → 100644
import {
now
} from '../../shared/utils.js';
export default function freeMode({
swiper,
extendParams,
emit,
once
}) {
extendParams({
freeMode: {
enabled: false,
momentum: true,
momentumRatio: 1,
momentumBounce: true,
momentumBounceRatio: 1,
momentumVelocityRatio: 1,
sticky: false,
minimumVelocity: 0.02
}
});
function onTouchMove() {
const {
touchEventsData: data,
touches
} = swiper; // Velocity
if (data.velocities.length === 0) {
data.velocities.push({
position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],
time: data.touchStartTime
});
}
data.velocities.push({
position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],
time: now()
});
}
function onTouchEnd({
currentPos
}) {
const {
params,
$wrapperEl,
rtlTranslate: rtl,
snapGrid,
touchEventsData: data
} = swiper; // Time diff
const touchEndTime = now();
const timeDiff = touchEndTime - data.touchStartTime;
if (currentPos < -swiper.minTranslate()) {
swiper.slideTo(swiper.activeIndex);
return;
}
if (currentPos > -swiper.maxTranslate()) {
if (swiper.slides.length < snapGrid.length) {
swiper.slideTo(snapGrid.length - 1);
} else {
swiper.slideTo(swiper.slides.length - 1);
}
return;
}
if (params.freeMode.momentum) {
if (data.velocities.length > 1) {
const lastMoveEvent = data.velocities.pop();
const velocityEvent = data.velocities.pop();
const distance = lastMoveEvent.position - velocityEvent.position;
const time = lastMoveEvent.time - velocityEvent.time;
swiper.velocity = distance / time;
swiper.velocity /= 2;
if (Math.abs(swiper.velocity) < params.freeMode.minimumVelocity) {
swiper.velocity = 0;
} // this implies that the user stopped moving a finger then released.
// There would be no events with distance zero, so the last event is stale.
if (time > 150 || now() - lastMoveEvent.time > 300) {
swiper.velocity = 0;
}
} else {
swiper.velocity = 0;
}
swiper.velocity *= params.freeMode.momentumVelocityRatio;
data.velocities.length = 0;
let momentumDuration = 1000 * params.freeMode.momentumRatio;
const momentumDistance = swiper.velocity * momentumDuration;
let newPosition = swiper.translate + momentumDistance;
if (rtl) newPosition = -newPosition;
let doBounce = false;
let afterBouncePosition;
const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeMode.momentumBounceRatio;
let needsLoopFix;
if (newPosition < swiper.maxTranslate()) {
if (params.freeMode.momentumBounce) {
if (newPosition + swiper.maxTranslate() < -bounceAmount) {
newPosition = swiper.maxTranslate() - bounceAmount;
}
afterBouncePosition = swiper.maxTranslate();
doBounce = true;
data.allowMomentumBounce = true;
} else {
newPosition = swiper.maxTranslate();
}
if (params.loop && params.centeredSlides) needsLoopFix = true;
} else if (newPosition > swiper.minTranslate()) {
if (params.freeMode.momentumBounce) {
if (newPosition - swiper.minTranslate() > bounceAmount) {
newPosition = swiper.minTranslate() + bounceAmount;
}
afterBouncePosition = swiper.minTranslate();
doBounce = true;
data.allowMomentumBounce = true;
} else {
newPosition = swiper.minTranslate();
}
if (params.loop && params.centeredSlides) needsLoopFix = true;
} else if (params.freeMode.sticky) {
let nextSlide;
for (let j = 0; j < snapGrid.length; j += 1) {
if (snapGrid[j] > -newPosition) {
nextSlide = j;
break;
}
}
if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) ||
swiper.swipeDirection === 'next') {
newPosition = snapGrid[nextSlide];
} else {
newPosition = snapGrid[nextSlide - 1];
}
newPosition = -newPosition;
}
if (needsLoopFix) {
once('transitionEnd', () => {
swiper.loopFix();
});
} // Fix duration
if (swiper.velocity !== 0) {
if (rtl) {
momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);
} else {
momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);
}
if (params.freeMode.sticky) {
const moveDistance = Math.abs((rtl ? -newPosition : newPosition) - swiper.translate);
const currentSlideSize = swiper.slidesSizesGrid[swiper.activeIndex];
if (moveDistance < currentSlideSize) {
momentumDuration = params.speed;
} else if (moveDistance < 2 * currentSlideSize) {
momentumDuration = params.speed * 1.5;
} else {
momentumDuration = params.speed * 2.5;
}
}
} else if (params.freeMode.sticky) {
swiper.slideToClosest();
return;
}
if (params.freeMode.momentumBounce && doBounce) {
swiper.updateProgress(afterBouncePosition);
swiper.setTransition(momentumDuration);
swiper.setTranslate(newPosition);
swiper.transitionStart(true, swiper.swipeDirection);
swiper.animating = true;
$wrapperEl.transitionEnd(() => {
if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;
emit('momentumBounce');
swiper.setTransition(params.speed);
setTimeout(() => {
swiper.setTranslate(afterBouncePosition);
$wrapperEl.transitionEnd(() => {
if (!swiper || swiper.destroyed) return;
swiper.transitionEnd();
}, momentumDuration);
}, 0);
}, momentumDuration);
} else if (swiper.velocity) {
emit('_freeModeNoMomentumRelease');
swiper.updateProgress(newPosition);
swiper.setTransition(momentumDuration);
swiper.setTranslate(newPosition);
swiper.transitionStart(true, swiper.swipeDirection);
if (!swiper.animating) {
swiper.animating = true;
$wrapperEl.transitionEnd(() => {
if (!swiper || swiper.destroyed) return;
swiper.transitionEnd();
}, momentumDuration);
}
} else {
swiper.updateProgress(newPosition);
}
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
} else if (params.freeMode.sticky) {
swiper.slideToClosest();
return;
} else if (params.freeMode) {
emit('_freeModeNoMomentumRelease');
}
if (!params.freeMode.momentum || timeDiff >= params.longSwipesMs) {
swiper.updateProgress();
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
}
Object.assign(swiper, {
freeMode: {
onTouchMove,
onTouchEnd
}
});
}
uni_modules/zebra-swiper/modules/navigation/navigation.js 0 → 100644
export default function Navigation({
swiper,
extendParams,
on,
emit
}) {
extendParams({
navigation: {
nextEl: null,
prevEl: null,
hideOnClick: false,
disabledClass: 'swiper-button-disabled',
hiddenClass: 'swiper-button-hidden',
lockClass: 'swiper-button-lock',
},
});
swiper.navigation = {
nextEl: null,
$nextEl: null,
prevEl: null,
$prevEl: null,
};
function toggleEl($el, disabled) {
if (!swiper.$wrapperEl) return
// debugger
const params = swiper.params.navigation;
if ($el) {
swiper.$wrapperEl[disabled ? `add${$el}` : `remove${$el}`](params.disabledClass);
if (swiper.params.watchOverflow && swiper.enabled) {
swiper.$wrapperEl[swiper.isLocked ? `add${$el}` : `remove${$el}`](params.lockClass);
}
}
}
function update() {
// Update Navigation Buttons
if (swiper.params.loop) return;
const {
$nextEl,
$prevEl
} = swiper.navigation;
toggleEl('PrevElClass', swiper.isBeginning && !swiper.params.rewind);
toggleEl('NextElClass', swiper.isEnd && !swiper.params.rewind);
}
function onPrevClick(e) {
// e.preventDefault();
if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
swiper.slidePrev();
}
function onNextClick() {
// e.preventDefault();
if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
swiper.slideNext();
}
function init() {
const params = swiper.params.navigation;
if (params.slot || params.custom) {
params.nextEl = true;
params.prevEl = true;
}
if (!(params.nextEl || params.prevEl) && !params.slot && !params.custom) return;
if (params.slot) {
swiper.native.updateData({
showPrevButtonSlot: true,
showNextButtonSlot: true
})
} else if (params.custom) {} else {
swiper.native.updateData({
showPrevButton: true,
showNextButton: true
})
}
const $nextEl = params.nextEl;
const $prevEl = params.prevEl;
if ($nextEl) {
swiper.on('nextClick', onNextClick);
}
if ($prevEl) {
swiper.on('prevClick', onPrevClick);
}
Object.assign(swiper.navigation, {
$nextEl,
nextEl: $nextEl,
$prevEl,
prevEl: $prevEl,
});
if (!swiper.enabled) {
if ($nextEl) swiper.$wrapperEl.addNextElClass(params.lockClass);
if ($prevEl) swiper.$wrapperEl.addPrevElClass(params.lockClass);
}
}
function destroy() {
const {
$nextEl,
$prevEl
} = swiper.navigation;
if ($nextEl) {
swiper.off('nextClick', onNextClick);
swiper.$wrapperEl.removeNextElClass(swiper.params.navigation.disabledClass);
}
if ($prevEl) {
swiper.off('prevClick', onPrevClick);
swiper.$wrapperEl.removePrevElClass(swiper.params.navigation.disabledClass);
}
}
on('init', () => {
init();
update();
});
on('toEdge fromEdge lock unlock', () => {
update();
});
on('destroy', () => {
destroy();
});
on('enable disable', () => {
const {
$nextEl,
$prevEl
} = swiper.navigation;
if ($nextEl) {
swiper.$wrapperEl[swiper.enabled ? 'removeNextElClass' : 'addNextElClass'](swiper.params.navigation
.lockClass);
// $nextEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
}
if ($prevEl) {
swiper.$wrapperEl[swiper.enabled ? 'removePrevElClass' : 'addPrevElClass'](swiper.params.navigation
.lockClass);
// $prevEl[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.navigation.lockClass);
}
});
// on('click', (_s, e) => {
// const {
// $nextEl,
// $prevEl
// } = swiper.navigation;
// const targetEl = e.target;
// if (
// swiper.params.navigation.hideOnClick &&
// !$(targetEl).is($prevEl) &&
// !$(targetEl).is($nextEl)
// ) {
// if (
// swiper.pagination &&
// swiper.params.pagination &&
// swiper.params.pagination.clickable &&
// (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))
// )
// return;
// let isHidden;
// if ($nextEl) {
// isHidden = $nextEl.hasClass(swiper.params.navigation.hiddenClass);
// } else if ($prevEl) {
// isHidden = $prevEl.hasClass(swiper.params.navigation.hiddenClass);
// }
// if (isHidden === true) {
// emit('navigationShow');
// } else {
// emit('navigationHide');
// }
// if ($nextEl) {
// $nextEl.toggleClass(swiper.params.navigation.hiddenClass);
// }
// if ($prevEl) {
// $prevEl.toggleClass(swiper.params.navigation.hiddenClass);
// }
// }
// });
Object.assign(swiper.navigation, {
update,
init,
destroy,
});
}
uni_modules/zebra-swiper/modules/navigation/navigation.scss 0 → 100644
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
// width: calc(80rpx / 44 * 27);
height: 80rpx;
margin-top: calc(0rpx - (80rpx / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #007aff;
font-size: 50rpx;
&.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
&:after {
font-family: swiper-icons;
font-size: 80rpx;
text-transform: none !important;
letter-spacing: 0;
text-transform: none;
font-variant: initial;
line-height: 1;
}
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
// &:after {
// content: 'prev';
// }
left: 10px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
// &:after {
// content: 'next';
// }
right: 10px;
left: auto;
}
.swiper-button-lock {
display: none;
}
uni_modules/zebra-swiper/modules/pagination/pagination.js 0 → 100644
import classesToSelector from '../../shared/classes-to-selector.js';
export default function Pagination({
swiper,
extendParams,
on,
emit
}) {
const pfx = 'swiper-pagination';
extendParams({
pagination: {
el: null,
bulletElement: 'span',
clickable: false,
hideOnClick: false,
renderBullet: null,
renderProgressbar: null,
renderFraction: null,
renderCustom: null,
progressbarOpposite: false,
type: 'bullets', // 'bullets' or 'progressbar' or 'fraction' or 'custom'
dynamicBullets: false,
dynamicMainBullets: 1,
formatFractionCurrent: (number) => number,
formatFractionTotal: (number) => number,
bulletClass: `${pfx}-bullet`,
bulletActiveClass: `${pfx}-bullet-active`,
modifierClass: `${pfx}-`,
currentClass: `${pfx}-current`,
totalClass: `${pfx}-total`,
hiddenClass: `${pfx}-hidden`,
progressbarFillClass: `${pfx}-progressbar-fill`,
progressbarOppositeClass: `${pfx}-progressbar-opposite`,
clickableClass: `${pfx}-clickable`,
lockClass: `${pfx}-lock`,
horizontalClass: `${pfx}-horizontal`,
verticalClass: `${pfx}-vertical`,
},
});
swiper.pagination = {
el: null,
$el: null,
bullets: [],
};
let bulletSize;
let dynamicBulletIndex = 0;
function isPaginationDisabled() {
return (
!swiper.params.pagination.el ||
!swiper.pagination.el ||
!swiper.pagination.$el
);
}
function setSideBullets($bulletEl, position) {
const {
bulletActiveClass
} = swiper.params.pagination;
const bullets = swiper.pagination.bullets;
if (bullets[$bulletEl.index + position]) {
bullets[$bulletEl.index + position].addPaginationItemClass(
`${bulletActiveClass}-${position>0?'next':'prev'}`);
}
if (bullets[$bulletEl.index + (position > 0 ? position + 1 : position -
1)]) {
bullets[$bulletEl.index + (position > 0 ? position + 1 : position - 1)].addPaginationItemClass(
`${bulletActiveClass}-${position>0?'next':'prev'}-${position>0?'next':'prev'}`);
}
}
function update() {
// Render || Update Pagination bullets/items
const rtl = swiper.rtl;
const params = swiper.params.pagination;
if (isPaginationDisabled()) return;
const slidesLength =
swiper.virtual && swiper.params.virtual.enabled ?
swiper.virtual.slides.length :
swiper.slides.length;
const $el = swiper.pagination.$el;
// Current/Total
let current;
const total = swiper.params.loop ?
Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) :
swiper.snapGrid.length;
if (swiper.params.loop) {
current = Math.ceil(
(swiper.activeIndex - swiper.loopedSlides) / swiper.params.slidesPerGroup,
);
if (current > slidesLength - 1 - swiper.loopedSlides * 2) {
current -= slidesLength - swiper.loopedSlides * 2;
}
if (current > total - 1) current -= total;
if (current < 0 && swiper.params.paginationType !== 'bullets') current = total + current;
} else if (typeof swiper.snapIndex !== 'undefined') {
current = swiper.snapIndex;
} else {
current = swiper.activeIndex || 0;
}
// Types
if (
params.type === 'bullets' &&
swiper.pagination.bullets &&
swiper.pagination.bullets.length > 0
) {
const bullets = swiper.pagination.bullets;
let firstIndex;
let lastIndex;
let midIndex;
if (params.dynamicBullets) {
bulletSize = bullets[0][swiper.isHorizontal() ? 'outerWidth' : 'outerHeight'];
swiper.$wrapperEl.paginationCss({
[swiper.isHorizontal() ? 'width' :
'height'
]: `${bulletSize * (params.dynamicMainBullets + 4)}px`
});
if (params.dynamicMainBullets > 1 && swiper.previousIndex !== undefined) {
dynamicBulletIndex += current - (swiper.previousIndex - swiper.loopedSlides || 0);
if (dynamicBulletIndex > params.dynamicMainBullets - 1) {
dynamicBulletIndex = params.dynamicMainBullets - 1;
} else if (dynamicBulletIndex < 0) {
dynamicBulletIndex = 0;
}
}
firstIndex = Math.max(current - dynamicBulletIndex, 0);
lastIndex = firstIndex + (Math.min(bullets.length, params.dynamicMainBullets) - 1);
midIndex = (lastIndex + firstIndex) / 2;
}
bullets.forEach((item) => {
item.removePaginationItemClass(
['', '-next', '-next-next', '-prev', '-prev-prev', '-main']
.map((suffix) => `${params.bulletActiveClass}${suffix}`)
.join(' '),
);
})
if ($el.length > 1) {
bullets.each((bullet) => {
const $bullet = $(bullet);
const bulletIndex = $bullet.index();
if (bulletIndex === current) {
$bullet.addClass(params.bulletActiveClass);
}
if (params.dynamicBullets) {
if (bulletIndex >= firstIndex && bulletIndex <= lastIndex) {
$bullet.addClass(`${params.bulletActiveClass}-main`);
}
if (bulletIndex === firstIndex) {
setSideBullets($bullet, 'prev');
}
if (bulletIndex === lastIndex) {
setSideBullets($bullet, 'next');
}
}
});
} else {
const $bullet = bullets[current];
const bulletIndex = $bullet.index;
$bullet.addPaginationItemClass(params.bulletActiveClass);
if (params.dynamicBullets) {
const $firstDisplayedBullet = bullets[firstIndex];
const $lastDisplayedBullet = bullets[lastIndex];
for (let i = firstIndex; i <= lastIndex; i += 1) {
bullets[i].addPaginationItemClass(`${params.bulletActiveClass}-main`);
}
if (swiper.params.loop) {
if (bulletIndex >= bullets.length) {
for (let i = params.dynamicMainBullets; i >= 0; i -= 1) {
bullets[bullets.length - i].addPaginationItemClass(`${params.bulletActiveClass}-main`);
}
bullets
[bullets.length - params.dynamicMainBullets - 1]
.addPaginationItemClass(`${params.bulletActiveClass}-prev`);
} else {
setSideBullets($firstDisplayedBullet, -1);
setSideBullets($lastDisplayedBullet, 1);
}
} else {
setSideBullets($firstDisplayedBullet, -1);
setSideBullets($lastDisplayedBullet, 1);
}
}
}
if (params.dynamicBullets) {
const dynamicBulletsLength = Math.min(bullets.length, params.dynamicMainBullets + 4);
const bulletsOffset =
(bulletSize * dynamicBulletsLength - bulletSize) / 2 - midIndex * bulletSize;
const offsetProp = rtl ? 'right' : 'left';
bullets.forEach((item) => {
item.setCss({
[swiper.isHorizontal() ? offsetProp : 'top']: `${bulletsOffset}px`
})
})
// bullets.css(swiper.isHorizontal() ? offsetProp : 'top', `${bulletsOffset}px`);
}
}
if (params.type === 'fraction') {
// $el
// .find(classesToSelector(params.currentClass))
// .text(params.formatFractionCurrent(current + 1));
swiper.native.paginationContent.text = params.formatFractionCurrent(current + 1);
swiper.native.paginationContent.total = params.formatFractionTotal(total);
swiper.native.updateData({
paginationContent: swiper.native.paginationContent,
})
// $el.find(classesToSelector(params.totalClass)).text(params.formatFractionTotal(total));
}
if (params.type === 'progressbar') {
let progressbarDirection;
if (params.progressbarOpposite) {
progressbarDirection = swiper.isHorizontal() ? 'vertical' : 'horizontal';
} else {
progressbarDirection = swiper.isHorizontal() ? 'horizontal' : 'vertical';
}
const scale = (current + 1) / total;
let scaleX = 1;
let scaleY = 1;
if (progressbarDirection === 'horizontal') {
scaleX = scale;
} else {
scaleY = scale;
}
// $el
// .find(classesToSelector(params.progressbarFillClass))
swiper.native.paginationContent.transform(`translate3d(0,0,0) scaleX(${scaleX}) scaleY(${scaleY})`);
swiper.native.paginationContent.transition(swiper.params.speed);
swiper.native.updateData({
paginationContent: swiper.native.paginationContent,
})
}
if (params.type === 'custom' && params.renderCustom) {
$el.html(params.renderCustom(swiper, current + 1, total));
emit('paginationRender', $el[0]);
} else {
emit('paginationUpdate', $el[0]);
}
if (swiper.params.watchOverflow && swiper.enabled) {
swiper.$wrapperEl[swiper.isLocked ? 'addPaginationClass' : 'removePaginationClass'](params.lockClass);
}
}
function render() {
// Render Container
const params = swiper.params.pagination;
if (isPaginationDisabled()) return;
const slidesLength =
swiper.virtual && swiper.params.virtual.enabled ?
swiper.virtual.slides.length :
swiper.slides.length;
const $el = swiper.pagination.$el;
let paginationHTML = 0;
if (params.type === 'bullets') {
let numberOfBullets = swiper.params.loop ?
Math.ceil((slidesLength - swiper.loopedSlides * 2) / swiper.params.slidesPerGroup) :
swiper.snapGrid.length;
if (
swiper.params.freeMode &&
swiper.params.freeMode.enabled &&
!swiper.params.loop &&
numberOfBullets > slidesLength
) {
numberOfBullets = slidesLength;
}
for (let i = 0; i < numberOfBullets; i += 1) {
if (params.renderBullet) {
paginationHTML += params.renderBullet.call(swiper, i, params.bulletClass);
}
// else {
// paginationHTML +=
// `<${params.bulletElement} class="${params.bulletClass}"></${params.bulletElement}>`;
// }
// paginationHTML += 1;
else {
swiper.native.paginationType = "bullets";
swiper.native.paginationContent.push({
index: i,
outerWidth: 16,
outerHeight: 16,
classContent: [params.bulletClass],
styleContent: {},
addPaginationItemClass: function(value) {
this.classContent = Array.from(new Set([...this.classContent,
...value.split(" ")
]));
},
removePaginationItemClass: function(value) {
this.classContent = this.classContent.filter(item => !value.split(
" ").includes(item));
},
setCss: function(value) {
// vueNative['itemStyle'] = {
// ...vueNative['itemStyle'],
// ...value
// };Object.keys(value).forEach((item) => {
Object.keys(value).forEach((item) => {
// this.$set(this.itemStyle, item, value[item])
this.styleContent[item] = value[item];
})
// this.$set(this.itemStyle, item, value[item])
}
});
swiper.native.updateData({
paginationType: swiper.native.paginationType,
paginationContent: swiper.native.paginationContent,
})
}
}
// $el.html(paginationHTML);
// swiper.$wrapperEl.addPaginationItemClass(params.bulletClass)
// swiper.pagination.bullets = $el.find(classesToSelector(params.bulletClass));
swiper.pagination.bullets = swiper.native.paginationContent;
}
if (params.type === 'fraction') {
if (params.renderFraction) {
paginationHTML = params.renderFraction.call(swiper, params.currentClass, params.totalClass);
} else {
swiper.native.paginationType = "fraction";
// paginationHTML =
// `<span class="${params.currentClass}"></span>` +
// ' / ' +
// `<span class="${params.totalClass}"></span>`;
swiper.native.paginationContent = {
currentClass: params.currentClass,
totalClass: params.totalClass
}
swiper.native.updateData({
paginationType: swiper.native.paginationType,
paginationContent: swiper.native.paginationContent,
})
}
}
if (params.type === 'progressbar') {
if (params.renderProgressbar) {
paginationHTML = params.renderProgressbar.call(swiper, params.progressbarFillClass);
} else {
swiper.native.paginationType = "progressbar";
// paginationHTML = `<span class="${params.progressbarFillClass}"></span>`;
swiper.native.paginationContent = {
progressbarFillClass: params.progressbarFillClass,
styleContent: {
transform: '',
transitionDuration: ''
},
transition: function(value) {
this.styleContent.transitionDuration = `${value}ms`;
},
transform: function(value) {
this.styleContent.transform = value;
},
}
swiper.native.updateData({
paginationType: swiper.native.paginationType,
paginationContent: swiper.native.paginationContent,
})
}
// $el.html(paginationHTML);
}
if (params.type !== 'custom') {
emit('paginationRender', swiper.pagination.$el[0]);
}
}
function init() {
const params = swiper.params.pagination;
if (!params.el) return;
// swiper.native.showIndicators = true;
swiper.native.updateData({
showIndicators: true
})
let $el = params.el;
if (params.type === 'bullets' && params.clickable) {
swiper.$wrapperEl.addPaginationClass(params.clickableClass);
}
swiper.$wrapperEl.addPaginationClass(params.modifierClass + params.type);
swiper.$wrapperEl.addPaginationClass(params.modifierClass + swiper.params.direction);
if (params.type === 'bullets' && params.dynamicBullets) {
swiper.$wrapperEl.addPaginationClass(`${params.modifierClass}${params.type}-dynamic`);
dynamicBulletIndex = 0;
if (params.dynamicMainBullets < 1) {
params.dynamicMainBullets = 1;
}
}
if (params.type === 'progressbar' && params.progressbarOpposite) {
swiper.$wrapperEl.addPaginationClass(params.progressbarOppositeClass);
}
if (params.clickable) {
swiper.on('paginationItemClick', function onClick(_s, itemIndex) {
let index = itemIndex * swiper.params.slidesPerGroup;
if (swiper.params.loop) index += swiper.loopedSlides;
swiper.slideTo(index);
});
}
Object.assign(swiper.pagination, {
$el,
el: $el,
});
if (!swiper.enabled) {
swiper.$wrapperEl.addPaginationClass(params.lockClass);
}
}
function destroy() {
const params = swiper.params.pagination;
if (isPaginationDisabled()) return;
const $el = swiper.pagination.$el;
if (params.clickable) {
swiper.off('paginationItemClick', classesToSelector(params.bulletClass));
}
}
on('init update', () => {
if (swiper.native.paginationContent) {
swiper.native.updateData({
paginationContent: []
})
}
// swiper.native.paginationContent = [];
init();
render();
update();
});
on('activeIndexChange', () => {
if (swiper.params.loop) {
update();
} else if (typeof swiper.snapIndex === 'undefined') {
update();
}
});
on('snapIndexChange', () => {
if (!swiper.params.loop) {
update();
}
});
on('slidesLengthChange', () => {
if (swiper.params.loop) {
render();
update();
}
});
on('snapGridLengthChange', () => {
if (!swiper.params.loop) {
render();
update();
}
});
on('destroy', () => {
destroy();
});
on('enable disable', () => {
const {
$el
} = swiper.pagination;
if ($el) {
swiper.$wrapperEl[swiper.enabled ? 'removePaginationClass' : 'addPaginationClass'](swiper.params
.pagination.lockClass);
}
});
on('lock unlock', () => {
update();
});
on('click', (_s, e) => {
const targetEl = e.target;
const {
$el
} = swiper.pagination;
if (
swiper.params.pagination.el &&
swiper.params.pagination.hideOnClick &&
$el.length > 0 &&
!$(targetEl).hasClass(swiper.params.pagination.bulletClass)
) {
if (
swiper.navigation &&
((swiper.navigation.nextEl && targetEl === swiper.navigation.nextEl) ||
(swiper.navigation.prevEl && targetEl === swiper.navigation.prevEl))
)
return;
const isHidden = $el.hasClass(swiper.params.pagination.hiddenClass);
if (isHidden === true) {
emit('paginationShow');
} else {
emit('paginationHide');
}
$el.toggleClass(swiper.params.pagination.hiddenClass);
}
});
Object.assign(swiper.pagination, {
render,
update,
init,
destroy,
});
}
uni_modules/zebra-swiper/modules/pagination/pagination.scss 0 → 100644
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
font-size: 24rpx;
&.swiper-pagination-hidden {
opacity: 0;
}
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
.swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: 50%;
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
@at-root button#{&} {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
appearance: none;
}
.swiper-pagination-clickable & {
cursor: pointer;
}
&:only-child {
display: none !important;
}
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, #007aff);
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
.swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
}
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
.swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
}
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
.swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, #007aff);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl & .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > &,
&.swiper-pagination-horizontal,
.swiper-vertical > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-vertical > &,
&.swiper-pagination-vertical,
.swiper-horizontal > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
}
.swiper-pagination-lock {
display: none;
}
uni_modules/zebra-swiper/modules/scrollbar/scrollbar.js 0 → 100644
import {
nextTick
} from '../../shared/utils.js';
export default function Scrollbar({
swiper,
extendParams,
on,
emit
}) {
let isTouched = false;
let timeout = null;
let dragTimeout = null;
let dragStartPos;
let dragSize;
let trackSize;
let divider;
extendParams({
scrollbar: {
el: null,
dragSize: 'auto',
hide: false,
draggable: false,
snapOnRelease: true,
lockClass: 'swiper-scrollbar-lock',
dragClass: 'swiper-scrollbar-drag',
},
});
swiper.scrollbar = {
el: null,
dragEl: null,
$el: null,
$dragEl: null,
};
function setTranslate() {
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
const {
scrollbar,
rtlTranslate: rtl,
progress
} = swiper;
const params = swiper.params.scrollbar;
let newSize = dragSize;
let newPos = (trackSize - dragSize) * progress;
if (rtl) {
newPos = -newPos;
if (newPos > 0) {
newSize = dragSize - newPos;
newPos = 0;
} else if (-newPos + dragSize > trackSize) {
newSize = trackSize + newPos;
}
} else if (newPos < 0) {
newSize = dragSize + newPos;
newPos = 0;
} else if (newPos + dragSize > trackSize) {
newSize = trackSize - newPos;
}
if (swiper.isHorizontal()) {
swiper.$wrapperEl.scrollbarItemTransform(`translate3d(${newPos}px, 0, 0)`);
swiper.$wrapperEl.scrollbarItemCss({
width: `${newSize}px`
})
} else {
swiper.$wrapperEl.scrollbarItemTransform(`translate3d(0px, ${newPos}px, 0)`);
swiper.$wrapperEl.scrollbarItemCss({
height: `${newSize}px`
})
}
if (params.hide) {
clearTimeout(timeout);
swiper.$wrapperEl.scrollbarCss({
opacity: 1
})
timeout = setTimeout(() => {
swiper.$wrapperEl.scrollbarCss({
opacity: 0
})
swiper.$wrapperEl.scrollbarTransition(400)
}, 1000);
}
}
function setTransition(duration) {
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
swiper.$wrapperEl.scrollbarItemTransition(duration);
}
async function updateSize() {
if (!swiper.params.scrollbar.el || !swiper.scrollbar.el) return;
const {
scrollbar
} = swiper;
const {
$el,
methods
} = scrollbar;
swiper.$wrapperEl.scrollbarItemCss({
width: '',
height: ''
})
let rectInfo = await swiper.native.getRectScrollbar();
methods.offset = function() {
return rectInfo;
}
trackSize = swiper.isHorizontal() ? rectInfo.width : rectInfo.height;
divider =
swiper.size /
(swiper.virtualSize +
swiper.params.slidesOffsetBefore -
(swiper.params.centeredSlides ? swiper.snapGrid[0] : 0));
if (swiper.params.scrollbar.dragSize === 'auto') {
dragSize = trackSize * divider;
} else {
dragSize = parseInt(swiper.params.scrollbar.dragSize, 10);
}
if (swiper.isHorizontal()) {
swiper.$wrapperEl.scrollbarItemCss({
width: `${dragSize}px`
})
} else {
swiper.$wrapperEl.scrollbarItemCss({
height: `${dragSize}px`
})
}
if (divider >= 1) {
swiper.$wrapperEl.scrollbarCss({
display: 'none'
})
} else {
swiper.$wrapperEl.scrollbarCss({
display: ''
})
}
if (swiper.params.scrollbar.hide) {
swiper.$wrapperEl.scrollbarCss({
opacity: 0
})
}
if (swiper.params.watchOverflow && swiper.enabled) {
swiper.$wrapperEl[swiper.isLocked ? 'addScrollbarClass' : 'removeScrollbarClass'](
swiper.params.scrollbar.lockClass,
);
}
}
function getPointerPosition(e) {
if (swiper.isHorizontal()) {
return e.type === 'touchstart' || e.type === 'touchmove' || 'touchStart' || e.type === 'touchMove' ?
e.touches[0].clientX :
e.clientX;
}
return e.type === 'touchstart' || e.type === 'touchmove' ?
e.touches[0].clientY :
e.clientY;
}
function setDragPosition(e) {
const {
scrollbar,
rtlTranslate: rtl
} = swiper;
const {
$el,
methods
} = scrollbar;
let positionRatio;
positionRatio =
(getPointerPosition(e) -
methods.offset()[swiper.isHorizontal() ? 'left' : 'top'] -
(dragStartPos !== null ? dragStartPos : dragSize / 2)) /
(trackSize - dragSize);
positionRatio = Math.max(Math.min(positionRatio, 1), 0);
if (rtl) {
positionRatio = 1 - positionRatio;
}
const position =
swiper.minTranslate() + (swiper.maxTranslate() - swiper.minTranslate()) * positionRatio;
swiper.updateProgress(position);
swiper.setTranslate(position);
swiper.updateActiveIndex();
swiper.updateSlidesClasses();
}
function onDragStart(_s, e) {
const params = swiper.params.scrollbar;
const {
scrollbar,
$wrapperEl
} = swiper;
isTouched = true;
dragStartPos =
// e.target ===
// $dragEl[0] || e.target === $dragEl ?
// getPointerPosition(e) -
// e.target.getBoundingClientRect()[swiper.isHorizontal() ? 'left' : 'top'] :
null;
// e.preventDefault();
// e.stopPropagation();
$wrapperEl.transition(100);
swiper.$wrapperEl.scrollbarItemTransition(100)
// $dragEl.transition(100);
setDragPosition(e);
clearTimeout(dragTimeout);
swiper.$wrapperEl.scrollbarTransition(0)
if (params.hide) {
swiper.$wrapperEl.scrollbarCss({
opacity: 1
})
}
if (swiper.params.cssMode) {
swiper.$wrapperEl.css({
'scroll-snap-type': 'none'
});
}
emit('scrollbarDragStart', e);
}
function onDragMove(_s, e) {
const {
scrollbar,
$wrapperEl
} = swiper;
if (!isTouched) return;
setDragPosition(e);
$wrapperEl.transition(0);
swiper.$wrapperEl.scrollbarTransition(0)
swiper.$wrapperEl.scrollbarItemTransition(0)
emit('scrollbarDragMove', e);
}
function onDragEnd(_s, e) {
const params = swiper.params.scrollbar;
const {
scrollbar,
$wrapperEl
} = swiper;
const {
$el
} = scrollbar;
if (!isTouched) return;
isTouched = false;
if (swiper.params.cssMode) {
swiper.$wrapperEl.css({
'scroll-snap-type': ''
});
$wrapperEl.transition('');
}
if (params.hide) {
clearTimeout(dragTimeout);
dragTimeout = nextTick(() => {
swiper.$wrapperEl.scrollbarCss({
opacity: 0
})
swiper.$wrapperEl.scrollbarTransition(400)
}, 1000);
}
emit('scrollbarDragEnd', e);
if (params.snapOnRelease) {
swiper.slideToClosest();
}
}
function events(method) {
const {
scrollbar,
touchEventsTouch,
touchEventsDesktop,
params,
support
} = swiper;
const $el = scrollbar.$el;
const target = $el;
const activeListener =
support.passiveListener && params.passiveListeners ? {
passive: false,
capture: false
} :
false;
const passiveListener =
support.passiveListener && params.passiveListeners ? {
passive: true,
capture: false
} :
false;
if (!target) return;
const eventMethod = method === 'on' ? 'on' : 'off';
if (!support.touch) {
swiper[eventMethod]('touchStartScrollbar', onDragStart, activeListener);
swiper[eventMethod]('touchMoveScrollbar', onDragMove, activeListener);
swiper[eventMethod]('touchEndScrollbar', onDragEnd, passiveListener);
} else {
swiper[eventMethod]('touchStartScrollbar', onDragStart, activeListener);
swiper[eventMethod]('touchMoveScrollbar', onDragMove, activeListener);
swiper[eventMethod]('touchEndScrollbar', onDragEnd, passiveListener);
}
}
function enableDraggable() {
if (!swiper.params.scrollbar.el) return;
events('on');
}
function disableDraggable() {
if (!swiper.params.scrollbar.el) return;
events('off');
}
function init() {
const {
scrollbar,
} = swiper;
const params = swiper.params.scrollbar;
if (!params.el) return;
// swiper.native.updateData({
// scrollbarShow: true
// })
let $el = params.el;
Object.assign(scrollbar, {
$el,
el: $el,
methods: {}
});
if (params.draggable) {
enableDraggable();
}
swiper.$wrapperEl[swiper.enabled ? 'removeScrollbarClass' : 'addScrollbarClass'](swiper.params.scrollbar
.lockClass);
return true;
}
function destroy() {
disableDraggable();
}
on('init', async () => {
await init();
updateSize();
setTranslate();
});
on('update resize observerUpdate lock unlock', () => {
updateSize();
});
on('setTranslate', () => {
setTranslate();
});
on('setTransition', (_s, duration) => {
setTransition(duration);
});
on('enable disable', () => {
const {
$el
} = swiper.scrollbar;
if ($el) {
$el[swiper.enabled ? 'removeClass' : 'addClass'](swiper.params.scrollbar.lockClass);
}
});
on('destroy', () => {
destroy();
});
Object.assign(swiper.scrollbar, {
updateSize,
setTranslate,
init,
destroy,
});
}
uni_modules/zebra-swiper/modules/scrollbar/scrollbar.scss 0 → 100644
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
.swiper-horizontal > & {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-vertical > & {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
uni_modules/zebra-swiper/modules/thumbs/thumbs.js 0 → 100644
import {
isObject
} from '../../shared/utils.js';
// import $ from '../../shared/dom.js';
export default function Thumb({
swiper,
extendParams,
on
}) {
extendParams({
thumbs: {
swiper: null,
multipleActiveThumbs: true,
autoScrollOffset: 0,
slideThumbActiveClass: 'swiper-slide-thumb-active',
thumbsContainerClass: 'swiper-thumbs',
},
});
let initialized = false;
let swiperCreated = false;
swiper.thumbs = {
swiper: null,
};
function onThumbClick() {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper) return;
const clickedIndex = thumbsSwiper.clickedIndex;
const clickedSlide = thumbsSwiper.clickedSlide;
if (clickedSlide && clickedSlide.hasClass(swiper.params.thumbs.slideThumbActiveClass))
return;
if (typeof clickedIndex === 'undefined' || clickedIndex === null) return;
let slideToIndex;
if (thumbsSwiper.params.loop) {
slideToIndex = parseInt($(thumbsSwiper.clickedSlide).attr('data-swiper-slide-index'), 10);
} else {
slideToIndex = clickedIndex;
}
if (swiper.params.loop) {
let currentIndex = swiper.activeIndex;
if (swiper.slides.eq(currentIndex).hasClass(swiper.params.slideDuplicateClass)) {
swiper.loopFix();
// eslint-disable-next-line
swiper._clientLeft = swiper.$wrapperEl[0].clientLeft;
currentIndex = swiper.activeIndex;
}
const prevIndex = swiper.slides
.eq(currentIndex)
.prevAll(`[data-swiper-slide-index="${slideToIndex}"]`)
.eq(0)
.index();
const nextIndex = swiper.slides
.eq(currentIndex)
.nextAll(`[data-swiper-slide-index="${slideToIndex}"]`)
.eq(0)
.index();
if (typeof prevIndex === 'undefined') slideToIndex = nextIndex;
else if (typeof nextIndex === 'undefined') slideToIndex = prevIndex;
else if (nextIndex - currentIndex < currentIndex - prevIndex) slideToIndex = nextIndex;
else slideToIndex = prevIndex;
}
swiper.slideTo(slideToIndex);
}
function init() {
const {
thumbs: thumbsParams
} = swiper.params;
if (initialized) return false;
initialized = true;
const SwiperClass = swiper.constructor;
if (thumbsParams.swiper instanceof SwiperClass) {
swiper.thumbs.swiper = thumbsParams.swiper;
Object.assign(swiper.thumbs.swiper.originalParams, {
watchSlidesProgress: true,
slideToClickedSlide: false,
});
Object.assign(swiper.thumbs.swiper.params, {
watchSlidesProgress: true,
slideToClickedSlide: false,
});
} else if (isObject(thumbsParams.swiper)) {
const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
Object.assign(thumbsSwiperParams, {
watchSlidesProgress: true,
slideToClickedSlide: false,
});
swiper.thumbs.swiper = new SwiperClass(thumbsSwiperParams);
swiperCreated = true;
}
swiper.thumbs.swiper.$el && swiper.thumbs.swiper.$el.addClass(swiper.params.thumbs.thumbsContainerClass);
swiper.thumbs.swiper.on('slideClick', onThumbClick);
return true;
}
function update(initial) {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper) return;
const slidesPerView =
thumbsSwiper.params.slidesPerView === 'auto' ?
thumbsSwiper.slidesPerViewDynamic() :
thumbsSwiper.params.slidesPerView;
const autoScrollOffset = swiper.params.thumbs.autoScrollOffset;
const useOffset = autoScrollOffset && !thumbsSwiper.params.loop;
if (swiper.realIndex !== thumbsSwiper.realIndex || useOffset) {
let currentThumbsIndex = thumbsSwiper.activeIndex;
let newThumbsIndex;
let direction;
if (thumbsSwiper.params.loop) {
if (
thumbsSwiper.slides
.eq(currentThumbsIndex)
.hasClass(thumbsSwiper.params.slideDuplicateClass)
) {
thumbsSwiper.loopFix();
// eslint-disable-next-line
thumbsSwiper._clientLeft = thumbsSwiper.$wrapperEl[0].clientLeft;
currentThumbsIndex = thumbsSwiper.activeIndex;
}
// Find actual thumbs index to slide to
const prevThumbsIndex = thumbsSwiper.slides
.eq(currentThumbsIndex)
.prevAll(`[data-swiper-slide-index="${swiper.realIndex}"]`)
.eq(0)
.index();
const nextThumbsIndex = thumbsSwiper.slides
.eq(currentThumbsIndex)
.nextAll(`[data-swiper-slide-index="${swiper.realIndex}"]`)
.eq(0)
.index();
if (typeof prevThumbsIndex === 'undefined') {
newThumbsIndex = nextThumbsIndex;
} else if (typeof nextThumbsIndex === 'undefined') {
newThumbsIndex = prevThumbsIndex;
} else if (nextThumbsIndex - currentThumbsIndex === currentThumbsIndex - prevThumbsIndex) {
newThumbsIndex =
thumbsSwiper.params.slidesPerGroup > 1 ? nextThumbsIndex : currentThumbsIndex;
} else if (nextThumbsIndex - currentThumbsIndex < currentThumbsIndex - prevThumbsIndex) {
newThumbsIndex = nextThumbsIndex;
} else {
newThumbsIndex = prevThumbsIndex;
}
direction = swiper.activeIndex > swiper.previousIndex ? 'next' : 'prev';
} else {
newThumbsIndex = swiper.realIndex;
direction = newThumbsIndex > swiper.previousIndex ? 'next' : 'prev';
}
if (useOffset) {
newThumbsIndex += direction === 'next' ? autoScrollOffset : -1 * autoScrollOffset;
}
if (
thumbsSwiper.visibleSlidesIndexes &&
thumbsSwiper.visibleSlidesIndexes.indexOf(newThumbsIndex) < 0
) {
if (thumbsSwiper.params.centeredSlides) {
if (newThumbsIndex > currentThumbsIndex) {
newThumbsIndex = newThumbsIndex - Math.floor(slidesPerView / 2) + 1;
} else {
newThumbsIndex = newThumbsIndex + Math.floor(slidesPerView / 2) - 1;
}
} else if (
newThumbsIndex > currentThumbsIndex &&
thumbsSwiper.params.slidesPerGroup === 1
) {
// newThumbsIndex = newThumbsIndex - slidesPerView + 1;
}
thumbsSwiper.slideTo(newThumbsIndex, initial ? 0 : undefined);
}
}
// Activate thumbs
let thumbsToActivate = 1;
const thumbActiveClass = swiper.params.thumbs.slideThumbActiveClass;
if (swiper.params.slidesPerView > 1 && !swiper.params.centeredSlides) {
thumbsToActivate = swiper.params.slidesPerView;
}
if (!swiper.params.thumbs.multipleActiveThumbs) {
thumbsToActivate = 1;
}
thumbsToActivate = Math.floor(thumbsToActivate);
// thumbsSwiper.slides.removeClass(thumbActiveClass);
thumbsSwiper.slides.forEach((item) => {
item.addClass(swiper.params.slideThumbsClass);
item.removeClass(thumbActiveClass);
})
if (
thumbsSwiper.params.loop ||
(thumbsSwiper.params.virtual && thumbsSwiper.params.virtual.enabled)
) {
for (let i = 0; i < thumbsToActivate; i += 1) {
thumbsSwiper.$wrapperEl
.children(`[data-swiper-slide-index="${swiper.realIndex + i}"]`)
.addClass(thumbActiveClass);
}
} else {
for (let i = 0; i < thumbsToActivate; i += 1) {
thumbsSwiper.slides[swiper.realIndex + i].addClass(thumbActiveClass);
}
}
}
on('beforeInit', () => {
const {
thumbs
} = swiper.params;
if (!thumbs || !thumbs.swiper) return;
init();
update(true);
});
on('slideChange update resize observerUpdate', () => {
if (!swiper.thumbs.swiper) return;
update();
});
on('setTransition', (_s, duration) => {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper) return;
thumbsSwiper.setTransition(duration);
});
on('beforeDestroy', () => {
const thumbsSwiper = swiper.thumbs.swiper;
if (!thumbsSwiper) return;
if (swiperCreated && thumbsSwiper) {
thumbsSwiper.destroy();
}
});
Object.assign(swiper.thumbs, {
init,
update,
});
}
uni_modules/zebra-swiper/modules/thumbs/thumbs.scss 0 → 100644
.swiper-thumbs {
}
.swiper-slide-thumb {
opacity: 0.4;
}
.swiper-slide-thumb-active {
// Styles for active thumb slide
opacity: 1;
}
\ No newline at end of file
uni_modules/zebra-swiper/modules/virtual/virtual.js 0 → 100644
export default function Virtual({
swiper,
extendParams,
on
}) {
extendParams({
virtual: {
enabled: false,
slides: [],
cache: true,
renderSlide: null,
renderExternal: null,
renderExternalUpdate: true,
addSlidesBefore: 0,
addSlidesAfter: 0,
},
});
let cssModeTimeout;
swiper.virtual = {
cache: {},
from: undefined,
to: undefined,
slides: [],
offset: 0,
slidesGrid: [],
};
function renderSlide(slide, index) {
const params = swiper.params.virtual;
if (params.cache && swiper.virtual.cache[index]) {
return swiper.virtual.cache[index];
}
// const $slideEl = params.renderSlide ?
// $(params.renderSlide.call(swiper, slide, index)) :
// $(
// `<div class="${swiper.params.slideClass}" data-swiper-slide-index="${index}">${slide}</div>`,
// );
// if (!$slideEl.attr('data-swiper-slide-index')) $slideEl.attr('data-swiper-slide-index', index);
// if (params.cache) swiper.virtual.cache[index] = $slideEl;
// return $slideEl;
}
function onRendered() {
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
if (swiper.lazy && swiper.params.lazy.enabled) {
swiper.lazy.load();
}
}
async function update(force) {
const {
slidesPerView,
slidesPerGroup,
centeredSlides
} = swiper.params;
const {
addSlidesBefore,
addSlidesAfter
} = swiper.params.virtual;
const {
from: previousFrom,
to: previousTo,
slides,
slidesGrid: previousSlidesGrid,
offset: previousOffset,
} = swiper.virtual;
if (!swiper.params.cssMode) {
swiper.updateActiveIndex();
}
const activeIndex = swiper.activeIndex || 0;
let offsetProp;
if (swiper.rtlTranslate) offsetProp = 'right';
else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
let slidesAfter;
let slidesBefore;
if (centeredSlides) {
slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
} else {
slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesAfter;
slidesBefore = slidesPerGroup + addSlidesBefore;
}
const from = Math.max((activeIndex || 0) - slidesBefore, 0);
const to = Math.min((activeIndex || 0) + slidesAfter, slides.length - 1);
const offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
Object.assign(swiper.virtual, {
from,
to,
offset,
slidesGrid: swiper.slidesGrid,
});
function onRendered() {
swiper.updateSlides();
swiper.updateProgress();
swiper.updateSlidesClasses();
if (swiper.lazy && swiper.params.lazy.enabled) {
swiper.lazy.load();
}
}
if (previousFrom === from && previousTo === to && !force) {
if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
swiper.slides.css(offsetProp, `${offset}px`);
}
swiper.updateProgress();
return;
}
if (swiper.params.virtual.renderExternal) {
swiper.params.virtual.renderExternal.call(swiper, {
offset,
from,
to,
slides: (function getSlides() {
const slidesToRender = [];
if (swiper.params.virtual.type == 'keep') {
for (let i = 0; i < from; i += 1) {
slidesToRender.push("");
}
}
for (let i = from; i <= to; i += 1) {
slidesToRender.push(slides[i]);
}
return slidesToRender;
})(),
});
if (swiper.params.virtual.renderExternalUpdate) {
onRendered();
}
return;
}
const prependIndexes = [];
const appendIndexes = [];
if (force) {
swiper.$wrapperEl.find(`.${swiper.params.slideClass}`).remove();
} else {
for (let i = previousFrom; i <= previousTo; i += 1) {
if (i < from || i > to) {
swiper.virtualList.splice(swiper.virtualList.findIndex((item) => {
return item == slides[i]
}), 1)
swiper.virtualIndexList.splice(swiper.virtualIndexList.findIndex((item) => {
return item == i
}), 1)
// swiper.slides[i].virtualShow = false;
}
}
}
for (let i = 0; i < slides.length; i += 1) {
if (i >= from && i <= to) {
if (typeof previousTo === 'undefined' || force) {
appendIndexes.push(i);
} else {
if (i > previousTo) appendIndexes.push(i);
if (i < previousFrom) prependIndexes.push(i);
}
}
}
// let list = [];
appendIndexes.forEach((index) => {
// if (swiper.slides[index]) {
// swiper.slides[index].virtualShow = true;
// } else {
swiper.virtualList.push(slides[index]);
swiper.virtualIndexList.push(index)
// }
// renderSlide(slides[index], index)
// renderSlide(slides[index], index)
// swiper.$wrapperEl.append(renderSlide(slides[index], index));
});
prependIndexes
.sort((a, b) => b - a)
.forEach((index) => {
// swiper.slides[index].virtualShow = true;
swiper.virtualList.unshift(slides[index]);
swiper.virtualIndexList.unshift(index)
// swiper.$wrapperEl.prepend(renderSlide(slides[index], index));
});
swiper.native.emit("input", [swiper.virtualList])
onRendered();
}
function appendSlide(slides) {
if (typeof slides === 'object' && 'length' in slides) {
for (let i = 0; i < slides.length; i += 1) {
if (slides[i]) swiper.virtual.slides.push(slides[i]);
}
} else {
swiper.virtual.slides.push(slides);
}
update(true);
}
function prependSlide(slides) {
const activeIndex = swiper.activeIndex;
let newActiveIndex = activeIndex + 1;
let numberOfNewSlides = 1;
if (Array.isArray(slides)) {
for (let i = 0; i < slides.length; i += 1) {
if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
}
newActiveIndex = activeIndex + slides.length;
numberOfNewSlides = slides.length;
} else {
swiper.virtual.slides.unshift(slides);
}
if (swiper.params.virtual.cache) {
const cache = swiper.virtual.cache;
const newCache = {};
Object.keys(cache).forEach((cachedIndex) => {
const $cachedEl = cache[cachedIndex];
const cachedElIndex = $cachedEl.attr('data-swiper-slide-index');
if (cachedElIndex) {
$cachedEl.attr(
'data-swiper-slide-index',
parseInt(cachedElIndex, 10) + numberOfNewSlides,
);
}
newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = $cachedEl;
});
swiper.virtual.cache = newCache;
}
update(true);
swiper.slideTo(newActiveIndex, 0);
}
function removeSlide(slidesIndexes) {
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
let activeIndex = swiper.activeIndex;
if (Array.isArray(slidesIndexes)) {
for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
swiper.virtual.slides.splice(slidesIndexes[i], 1);
if (swiper.params.virtual.cache) {
delete swiper.virtual.cache[slidesIndexes[i]];
}
if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
activeIndex = Math.max(activeIndex, 0);
}
} else {
swiper.virtual.slides.splice(slidesIndexes, 1);
if (swiper.params.virtual.cache) {
delete swiper.virtual.cache[slidesIndexes];
}
if (slidesIndexes < activeIndex) activeIndex -= 1;
activeIndex = Math.max(activeIndex, 0);
}
update(true);
swiper.slideTo(activeIndex, 0);
}
function removeAllSlides() {
swiper.virtual.slides = [];
if (swiper.params.virtual.cache) {
swiper.virtual.cache = {};
}
update(true);
swiper.slideTo(0, 0);
}
on('beforeInit', () => {
if (!swiper.params.virtual.enabled) return;
swiper.virtual.slides = swiper.params.virtual.slides;
swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
swiper.params.watchSlidesProgress = true;
swiper.originalParams.watchSlidesProgress = true;
if (!swiper.params.initialSlide) {
update();
}
});
// on('beforeUpdate', () => {
// if (!swiper.params.virtual.enabled) return;
// let offsetProp;
// if (swiper.rtlTranslate) offsetProp = 'right';
// else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
// swiper.slides.forEach((item, index) => {
// item.dataSwiperSlideIndex = swiper.virtualIndexList[index];
// item.css({
// [offsetProp]: `${swiper.virtual.offset}px`
// })
// })
// })
on('setTranslate', async () => {
if (!swiper.params.virtual.enabled) return;
if (swiper.params.cssMode && !swiper._immediateVirtual) {
clearTimeout(cssModeTimeout);
cssModeTimeout = setTimeout(() => {
update();
}, 100);
} else {
console.log("update==========")
clearTimeout(cssModeTimeout);
cssModeTimeout = setTimeout(() => {
update();
}, 100);
// update();
}
});
Object.assign(swiper.virtual, {
appendSlide,
prependSlide,
removeSlide,
removeAllSlides,
update,
});
}
uni_modules/zebra-swiper/modules/virtual/virtual.scss 0 → 100644
.swiper-virtual.swiper-css-mode {
.swiper-wrapper::after {
content: '';
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
&.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
&.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
}
uni_modules/zebra-swiper/modules/will-change/will-change.js 0 → 100644
export default function WillChange({
swiper,
extendParams,
on
}) {
on('setTransition', (s, duration) => {
if (!swiper.params.willChange) return;
if (swiper.params.effect == "slide" || swiper.params.effect == "cube" || swiper.params.effect ==
"coverflow" || swiper.params.effect == "panorama") {
swiper.$wrapperEl.willChange("transform");
}
});
on('transitionEnd', (s, duration) => {
if (!swiper.params.willChange) return;
swiper.$wrapperEl.willChange("auto");
swiper.slides.forEach((item) => {
item.$itemEl.willChange("auto");
})
});
}
uni_modules/zebra-swiper/package.json 0 → 100644
{
"name": "@zebra-ui/swiper",
"id": "zebra-swiper",
"displayName": "zebra-swiper 3D轮播，全面对标swiperjs并实现全端兼容。",
"version": "2.2.6",
"description": "适配多端的高自定义轮播组件，多种3D效果。全面对标swiperjs。",
"main": "index.js",
"keywords": [
"zebra",
"swiper",
"轮播",
"3D",
"banner"
],
"repository": "https://github.com/zebra-ui/zebra-uniapp-swiper",
"bugs": {
"url": "https://github.com/zebra-ui/zebra-uniapp-swiper/issues"
},
"homepage": "https://github.com/zebra-ui/zebra-uniapp-swiper#readme",
"author": "zebra-ui",
"license": "ISC",
"publishConfig": {
"access": "public"
},
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "插件不采集任何数据",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@zebra-ui/swiper",
"type": "component-vue"
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"Vue": {
"vue2": "y",
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "n"
},
"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",
"快手": "y",
"飞书": "y",
"京东": "u"
},
"快应用": {
"华为": "y",
"联盟": "y"
}
}
}
}
}
uni_modules/zebra-swiper/shared/classes-to-selector.js 0 → 100644
export default function classesToSelector(classes = '') {
return `.${classes.trim().replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
.replace(/ /g, '.')}`;
}
\ No newline at end of file
uni_modules/zebra-swiper/shared/effect-init.js 0 → 100644
export default function effectInit(params) {
const {
effect,
swiper,
on,
setTranslate,
setTransition,
overwriteParams,
perspective
} = params;
on('beforeInit', () => {
if (swiper.params.effect !== effect) return;
swiper.classNames.push(`${swiper.params.containerModifierClass}${effect}`);
if (perspective && perspective()) {
swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
}
const overwriteParamsResult = overwriteParams ? overwriteParams() : {};
Object.assign(swiper.params, overwriteParamsResult);
Object.assign(swiper.originalParams, overwriteParamsResult);
});
on('setTranslate', () => {
if (swiper.params.effect !== effect) return;
setTranslate();
});
on('setTransition', (_s, duration) => {
if (swiper.params.effect !== effect) return;
setTransition(duration);
});
}
\ No newline at end of file
uni_modules/zebra-swiper/shared/effect-target.js 0 → 100644
export default function effectTarget(effectParams, $slideEl) {
if (effectParams.transformEl) {
return $slideEl.find(effectParams.transformEl).css({
'backface-visibility': 'hidden',
'-webkit-backface-visibility': 'hidden'
});
}
return $slideEl;
}
\ No newline at end of file
uni_modules/zebra-swiper/shared/effect-virtual-transition-end.js 0 → 100644
export default function effectVirtualTransitionEnd({
swiper,
duration,
transformEl,
allSlides
}) {
const {
slides,
activeIndex,
$wrapperEl
} = swiper;
if (swiper.params.virtualTranslate && duration !== 0) {
let eventTriggered = false;
let $transitionEndTarget;
if (allSlides) {
$transitionEndTarget = transformEl ? slides.find(transformEl) : slides;
} else {
$transitionEndTarget = transformEl ? slides.eq(activeIndex).find(transformEl) : slides[activeIndex];
}
for (let i = 0; i < $transitionEndTarget.length; i += 1) {
$transitionEndTarget[i].transitionEnd(() => {
if (eventTriggered) return;
if (!swiper || swiper.destroyed) return;
eventTriggered = true;
swiper.animating = false;
// const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
swiper.emit('transitionEnd');
// for (let i = 0; i < triggerEvents.length; i += 1) {
// $wrapperEl.trigger(triggerEvents[i]);
// }
}, duration);
}
}
}
uni_modules/zebra-swiper/shared/get-browser.js 0 → 100644
let browser;
function calcBrowser() {
function isSafari() {
const res = uni.getSystemInfoSync();
return res.model;
}
return {
isSafari: isSafari(),
isWebView: /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(isSafari())
};
}
function getBrowser() {
if (!browser) {
browser = calcBrowser();
}
return browser;
}
export {
getBrowser
};
uni_modules/zebra-swiper/shared/get-device.js 0 → 100644
import {
getSupport
} from './get-support.js';
let deviceCached;
function calcDevice({
userAgent
} = {}) {
const support = getSupport();
const device = {
ios: false,
android: false
};
const res = uni.getSystemInfoSync();
if (res.platform == "android") {
device.os = 'android';
device.android = true;
}
if (res.platform == "ios") {
device.os = 'ios';
device.ios = true;
} // Export object
return device;
}
function getDevice(overrides = {}) {
if (!deviceCached) {
deviceCached = calcDevice(overrides);
}
return deviceCached;
}
export {
getDevice
};
uni_modules/zebra-swiper/shared/get-support.js 0 → 100644
let support;
function getMobile() {
if (navigator.userAgent.indexOf('Mobile') > -1) {
return true;
} else {
return false;
}
}
function calcSupport() {
return {
smoothScroll: true,
// #ifdef H5
touch: getMobile(),
// #endif
// #ifndef H5
touch: true,
// #endif
passiveListener: function checkPassiveListener() {
let supportsPassive = false;
try {
const opts = Object.defineProperty({}, 'passive', {
// eslint-disable-next-line
get() {
supportsPassive = true;
}
});
} catch (e) { // No support
}
return supportsPassive;
}(),
gestures: function checkGestures() {
return false;
}()
};
}
function getSupport() {
if (!support) {
support = calcSupport();
}
return support;
}
export {
getSupport
};
uni_modules/zebra-swiper/shared/utils.js 0 → 100644
function deleteProps(obj) {
const object = obj;
Object.keys(object).forEach(key => {
try {
object[key] = null;
} catch (e) { // no getter for object
}
try {
delete object[key];
} catch (e) { // something got wrong
}
});
}
function getTranslate(el, axis = 'x') {
let curTransform;
if (axis === 'x') {
curTransform = el.translate;
}
if (axis === 'y') {
curTransform = el.translate;
}
return curTransform || 0;
}
function isObject(o) {
return typeof o === 'object' && o !== null && o.constructor && Object.prototype.toString.call(o).slice(8, -1) ===
'Object';
}
function now() {
return Date.now();
}
function nextTick(callback, delay = 0) {
return setTimeout(callback, delay);
}
function extend(...args) {
const to = Object(args[0]);
const noExtend = ['__proto__', 'constructor', 'prototype'];
for (let i = 1; i < args.length; i += 1) {
const nextSource = args[i];
if (nextSource !== undefined && nextSource !== null) {
const keysArray = Object.keys(Object(nextSource)).filter(key => noExtend.indexOf(key) < 0);
for (let nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex += 1) {
const nextKey = keysArray[nextIndex];
const desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
if (isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
if (nextSource[nextKey].__swiper__) {
to[nextKey] = nextSource[nextKey];
} else {
extend(to[nextKey], nextSource[nextKey]);
}
} else if (!isObject(to[nextKey]) && isObject(nextSource[nextKey])) {
to[nextKey] = {};
if (nextSource[nextKey].__swiper__) {
to[nextKey] = nextSource[nextKey];
} else {
extend(to[nextKey], nextSource[nextKey]);
}
} else {
to[nextKey] = nextSource[nextKey];
}
}
}
}
}
return to;
}
function setCSSProperty(el, varName, varValue) {
el.style.setProperty(varName, varValue);
}
function animateCSSModeScroll({
swiper,
targetPosition,
side
}) {
const window = getWindow();
const startPosition = -swiper.translate;
let startTime = null;
let time;
const duration = swiper.params.speed;
swiper.wrapperEl.style.scrollSnapType = 'none';
window.cancelAnimationFrame(swiper.cssModeFrameID);
const dir = targetPosition > startPosition ? 'next' : 'prev';
const isOutOfBound = (current, target) => {
return dir === 'next' && current >= target || dir === 'prev' && current <= target;
};
const animate = () => {
time = new Date().getTime();
if (startTime === null) {
startTime = time;
}
const progress = Math.max(Math.min((time - startTime) / duration, 1), 0);
const easeProgress = 0.5 - Math.cos(progress * Math.PI) / 2;
let currentPosition = startPosition + easeProgress * (targetPosition - startPosition);
if (isOutOfBound(currentPosition, targetPosition)) {
currentPosition = targetPosition;
}
swiper.wrapperEl.scrollTo({
[side]: currentPosition
});
if (isOutOfBound(currentPosition, targetPosition)) {
swiper.wrapperEl.style.overflow = 'hidden';
swiper.wrapperEl.style.scrollSnapType = '';
setTimeout(() => {
swiper.wrapperEl.style.overflow = '';
swiper.wrapperEl.scrollTo({
[side]: currentPosition
});
});
window.cancelAnimationFrame(swiper.cssModeFrameID);
return;
}
swiper.cssModeFrameID = window.requestAnimationFrame(animate);
};
animate();
}
export {
deleteProps,
extend,
nextTick,
now,
setCSSProperty,
animateCSSModeScroll,
getTranslate,
isObject
};
uni_modules/zebra-swiper/static/css/iconfont.css 0 → 100644
@font-face {
font-family: 'iconfont';
/* project id 3161382 */
src: url('?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_3161382_m9empg4v7s.woff2') format('woff2'),
url('//at.alicdn.com/t/font_3161382_m9empg4v7s.woff') format('woff'),
url('//at.alicdn.com/t/font_3161382_m9empg4v7s.ttf') format('truetype'),
url('#iconfont') format('svg');
}
.zebra-icon {
font-family: "iconfont" !important;
font-size: inherit;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.zebra-icon-circle_chevron_left:before {
content: "\e611";
}
.zebra-icon-circle_chevron_right:before {
content: "\e615";
}
uni_modules/zebra-swiper/static/css/var.scss 0 → 100644
$gray-3: #ebedf0;
$gray-8: #323233;
$animation-duration-fast: 0.2s;
$swipe-indicator-size: 12rpx;
$swipe-indicator-margin: 24rpx;
$swipe-indicator-active-opacity: 1;
$swipe-indicator-inactive-opacity: 0.3;
$swipe-indicator-active-background-color: #1989fa;
$swipe-indicator-inactive-background-color: #323233;
\ No newline at end of file
uni_modules/zebra-swiper/wxs/z-swiper-wxs.wxs 0 → 100644
function onTouchStartWxs(event, ins) {
ins.callMethod("onTouchStartSwiperWxs", {
changedTouches: event.changedTouches,
currentTarget: event.currentTarget,
touches: event.touches,
type: event.type
})
}
function onTouchMoveWxs(event, ins) {
ins.callMethod("onTouchMoveSwiperWxs", {
changedTouches: event.changedTouches,
currentTarget: event.currentTarget,
touches: event.touches,
type: event.type
})
}
function onTouchEndWxs(event, ins) {
ins.callMethod("onTouchEndSwiperWxs", {
changedTouches: event.changedTouches,
currentTarget: event.currentTarget,
touches: event.touches,
type: event.type
})
}
function wxsTransformObserver(newValue, oldValue, ownerInstance, instance) {
instance.setStyle({
transform: newValue
})
}
function wxsItemTransformObserver(newValue, oldValue, ownerInstance, instance) {
instance.setStyle({
transform: newValue
})
}
module.exports = {
onTouchStartWxs: onTouchStartWxs,
onTouchMoveWxs: onTouchMoveWxs,
onTouchEndWxs: onTouchEndWxs,
wxsTransformObserver: wxsTransformObserver,
wxsItemTransformObserver: wxsItemTransformObserver
}
utils/app-info-config.js 0 → 100644
var system_info = {};
if (uni) {
system_info = uni.getSystemInfoSync();
}
export default {
ppolicy_app : 'https://img-1252711425.cos.ap-guangzhou.myqcloud.com/app/ppolicy_jqty.html' ,// 隐私政策
ppolicy_user : 'https://img-1252711425.cos.ap-guangzhou.myqcloud.com/app/ppolicy_jqty.html' , // 用户协议
server_url: {
app_host_url: "https://app.ydniu.com/",
},
app_info: {
"AppName": "虎博体育", //system_info.appName
"PromoterId": 662,
"Version": "1.0.0", //system_info.appVersion
"platform": system_info.platform, //
"device": system_info.model, //system_info.model
"appId": "com.hb.tiyu", //system_info.appId
"deviceId": system_info.deviceId
}
}
utils/common.js 0 → 100644
const common = {
statusBarH: 0
}
export default common
utils/http.js 0 → 100644
var detaultHeaderOption = { 'Content-Type': 'application/json; charset=utf-8' };
import {default as app_info_config} from '../utils/app-info-config.js';
const http = {
async gql(parmas, loadding = false) {
console.debug("----http---", app_info_config.app_info)
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('uni_cookie');
let header = {
'Cookie': token,
'AppVersion': encodeURI(JSON.stringify(app_info_config.app_info)),
...detaultHeaderOption
};
if(!token){
delete header.Cookie;
}
uni.request({
url: `${app_info_config.server_url.app_host_url}graphql`,
method:"POST",
data: parmas,
header: header,
success: (res) => {
let tokens = res.cookies;
if(res.header['connect.sid']){
uni.setStorageSync('uni_cookie',res.header['connect.sid'])
}
resolve(res.data)
},
fail: (error) => {
reject(error.data)
}
})
})
}
}
export default http;
\ No newline at end of file
utils/utils.js 0 → 100644
const utils = {
dateFormatWeek(value) {
if (!value) {
return "xxxx-xx-xx(周x)"
}
const date = new Date(value);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const weekday = weekdays[date.getDay()];
return `${year}年${month}月${day}日 ${weekday}`;
},
getweekDay(time) {
let temp_data = new Date(time)
if (temp_data.getDay() === 0) return "星期天"
if (temp_data.getDay() === 1) return "星期一"
if (temp_data.getDay() === 2) return "星期二"
if (temp_data.getDay() === 3) return "星期三"
if (temp_data.getDay() === 4) return "星期四"
if (temp_data.getDay() === 5) return "星期五"
if (temp_data.getDay() === 6) return "星期六"
},
getweekDayZhou(time) {
let temp_data = new Date(time)
if (temp_data.getDay() === 0) return "周日"
if (temp_data.getDay() === 1) return "周一"
if (temp_data.getDay() === 2) return "周二"
if (temp_data.getDay() === 3) return "周三"
if (temp_data.getDay() === 4) return "周四"
if (temp_data.getDay() === 5) return "周五"
if (temp_data.getDay() === 6) return "周六"
},
dateFormat(time) {
let date = new Date(time);
let year = date.getFullYear();
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
// 拼接
return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
},
dateFormatYear(time) {
let date = new Date(time);
let year = date.getFullYear();
// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一 如 09:11:05
let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
// 拼接
return year + "-" + month + "-" + day;
},
getTimeByISO(time) {
let temp_data = new Date(time).toJSON()
let bj_time = new Date(+new Date(temp_data) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
/\.[\d]{3}Z/, '')
return bj_time
},
getWebView(header, top, height) {
let wv = plus.webview.create("", "square-webview", {
additionalHttpHeaders: {
header: header,
},
plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
top: top,
height: height,
})
wv.overrideUrlLoading({
mode: "reject"
}, (e) => {
console.log('-------拦截请求', e.url)
if (e.url.indexOf("?zq") !== -1) {
let tempData = {
url: e.url,
}
uni.navigateTo({
url: `/pages/notitle_h5/notitle_h5?info=${encodeURIComponent(JSON.stringify(tempData))}`
})
} else if (e.url.indexOf("login") !== -1) {
uni.navigateTo({
url: `/pages/login_account/login_account`
})
} else if (e.url.indexOf("?ydn_back") !== -1) {
uni.navigateBack({
})
} else {
if (e.url === 'https://app.ydniu.com/' || e.url === 'https://app.ydniu.com') {
uni.navigateBack({
})
}
}
})
return wv
},
getPassUrl() {
return 'https://app.ydniu.com/sports,https://app.ydniu.com/jczq/index'
},
getCurrentState(state, time) {
var result = "未";
switch (state) {
case 4:
case 10:
case 12:
result = "完";
break;
case 2:
result = "中场";
break;
case 5:
result = "中断";
break;
case 6:
result = "取消";
break;
case 13:
result = "延期";
break;
case 14:
result = "腰斩";
break;
case 15:
result = "待定";
break;
default:
if (state == 3) {
result = (time / (1000 * 60) + 45) + "'";
if ((time / (1000 * 60)) > 45) {
result = 90 + "+";
}
} else if (state == 1) {
result = time / (1000 * 60) + "'";
if (time / (1000 * 60) > 45) {
result = 45 + "+";
} else if (time / (1000 * 60) == 0) {
result = 1 + "'";
}
} else {
result = time / (1000 * 60) + "'";
}
break;
}
return result
},
// 将金额转换为亿、万的函数
formatAmount(amount) {
if(!amount) {
return "";
}
// 判断金额是否超过亿
if (amount >= 100000000) {
return (amount / 100000000).toFixed(2) + "亿";
}
// 判断金额是否超过万
if (amount >= 10000) {
return (amount / 10000).toFixed(2) + "万";
}
// 小于万直接返回金额
return amount.toFixed(2);
}
}
export default utils;
\ No newline at end of file
支持 Markdown 格式
你添加了 0 人 到此讨论。请谨慎行事。
Finish editing this message first!