Merge branch 'master' of http://gitea.zianxin.com/zianxin-tec/biz-mobile-react-cloud
This commit is contained in:
weiwei committed
commit
01c058681d
1 file changed
+310
@@ -0,0 +1,310 @@
|
||||
<!-- 轮播滚动组件 -->
|
||||
|
||||
<template>
|
||||
<view class="flex row bg-white">
|
||||
<view
|
||||
v-if="textShow"
|
||||
class="family700 size16 line20 bg-clip-text col-transparent"
|
||||
:style="{
|
||||
backgroundImage: gradients ? 'linear-gradient(to bottom right, ' + textColor + ', ' + colorRgba(textColor, 0.2) + ')' : '',
|
||||
color: gradients ? '' : textColor,
|
||||
}"
|
||||
>
|
||||
{{ text }}
|
||||
</view>
|
||||
<swiper
|
||||
circular
|
||||
autoplay
|
||||
vertical
|
||||
current="1"
|
||||
:interval="interval"
|
||||
duration="1000"
|
||||
:display-multiple-items="2"
|
||||
class="swiper marginLR15"
|
||||
:style="{ color: titleColor }"
|
||||
>
|
||||
<swiper-item v-if="list.length > 3" v-for="(item, index) in list" :key="index" @click="$emit('active', item)" class="flex jbetween">
|
||||
<view class="ellipsis">{{ item[title] }}</view>
|
||||
<view v-if="timeShow" class="white-space size12 color9 paddingL5">
|
||||
{{ timeFrom(item[time]) }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item v-if="list.length == 3" v-for="(item, index) in 4" :key="index" @click="$emit('active', list[item - 1])">
|
||||
<view v-if="item < 4" class="flex jbetween">
|
||||
<view class="ellipsis">{{ list[item - 1][title] }}</view>
|
||||
<view v-if="timeShow" class="white-space size12 color9 paddingL5">
|
||||
{{ timeFrom(list[item - 1][time]) }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="flex jbetween">
|
||||
<view class="ellipsis">{{ list[1][title] }}</view>
|
||||
<view v-if="timeShow" class="white-space size12 color9 paddingL5">
|
||||
{{ timeFrom(list[1][time]) }}
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item v-if="list.length == 0" v-for="item in 3" :key="item" class="flex jbetween">
|
||||
<view class="ellipsis">暂无 {{ text }}</view>
|
||||
<view v-if="timeShow" class="white-space size12 color9 paddingL5">刚刚</view>
|
||||
</swiper-item>
|
||||
<swiper-item v-if="list.length == 1" v-for="item in 3" :key="item" @click="$emit('active', list[0])" class="flex jbetween">
|
||||
<view class="ellipsis">{{ list[0][title] }}</view>
|
||||
<view v-if="timeShow" class="white-space size12 color9 paddingL5">
|
||||
{{ timeFrom(list[0][time]) }}
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item
|
||||
v-if="list.length == 2"
|
||||
v-for="(item, index) in 4"
|
||||
:key="item"
|
||||
@click="$emit('active', list[index % list.length])"
|
||||
class="flex jbetween"
|
||||
>
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="ellipsis" v-if="item == 0">{{ list[0][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 0">
|
||||
{{ timeFrom(list[0][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 1">{{ list[1][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 1">
|
||||
{{ timeFrom(list[1][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 2">{{ list[0][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 2">
|
||||
{{ timeFrom(list[0][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 3">{{ list[1][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 3">
|
||||
{{ timeFrom(list[1][time]) }}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view class="ellipsis" v-if="item == 1">{{ list[0][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 1">
|
||||
{{ timeFrom(list[0][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 2">{{ list[1][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 2">
|
||||
{{ timeFrom(list[1][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 3">{{ list[0][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 3">
|
||||
{{ timeFrom(list[0][time]) }}
|
||||
</view>
|
||||
<view class="ellipsis" v-if="item == 4">{{ list[1][title] }}</view>
|
||||
<view class="white-space size12 color9 paddingL5" v-if="timeShow && item == 4">
|
||||
{{ timeFrom(list[1][time]) }}
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* @description 轮播滚动
|
||||
* @example <h-carousel-roll :list="list"></h-carousel-roll>
|
||||
*
|
||||
* @property {String} text 标题文字（默认 通知公告 ）
|
||||
* @property {Boolean} textShow 是否展示标题文字（默认 true ）
|
||||
* @property {String} textColor 标题文字颜色（默认 #f15723 ）
|
||||
* @property {Boolean} gradients 字体是否开启渐变色（默认 true ）
|
||||
* @property {Array} list 滚动数据
|
||||
* @property {String} title 滚动数据标题字段（默认 title）
|
||||
* @property {String} titleColor 滚动数据标题颜色（默认 #000000）
|
||||
* @property {String} time 滚动数据时间字段（默认 time）
|
||||
* @property {Boolean} timeShow 是否展示时间（默认 true ）
|
||||
* @property {Number} interval 轮播自动切换时间间隔（默认 5000 ）
|
||||
*
|
||||
* @event {Function} active 点击数据时触发
|
||||
*/
|
||||
export default {
|
||||
// 小程序样式穿透
|
||||
options: {
|
||||
styleIsolation: "shared",
|
||||
},
|
||||
name: "h-carousel-roll",
|
||||
props: {
|
||||
// 标题文字
|
||||
text: {
|
||||
type: String,
|
||||
default: "通知公告",
|
||||
},
|
||||
// 是否展示标题文字
|
||||
textShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 标题文字颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: "#f15723",
|
||||
},
|
||||
// 字体是否开启渐变色
|
||||
gradients: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 滚动数据
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 滚动数据标题字段
|
||||
title: {
|
||||
type: String,
|
||||
default: "title",
|
||||
},
|
||||
// 滚动数据标题颜色
|
||||
titleColor: {
|
||||
type: String,
|
||||
default: "#000000",
|
||||
},
|
||||
// 滚动数据时间字段
|
||||
time: {
|
||||
type: String,
|
||||
default: "time",
|
||||
},
|
||||
// 是否展示时间
|
||||
timeShow: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
// 轮播自动切换时间间隔
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 5000,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
// 转换时间
|
||||
timeFrom(time) {
|
||||
if (time) {
|
||||
let arrs = time.split(/[- :]/)
|
||||
let times = new Date(arrs[0], arrs[1] - 1, arrs[2], arrs[3], arrs[4], arrs[5])
|
||||
return uni.$u.timeFrom(new Date(times).getTime(), false)
|
||||
}
|
||||
},
|
||||
// 颜色转换
|
||||
colorRgba(sHex, alpha = 1) {
|
||||
// 十六进制颜色值的正则表达式
|
||||
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
|
||||
/* 16进制颜色转为RGB格式 */
|
||||
let sColor = sHex.toLowerCase()
|
||||
if (sColor && reg.test(sColor)) {
|
||||
if (sColor.length === 4) {
|
||||
var sColorNew = "#"
|
||||
for (let i = 1; i < 4; i += 1) {
|
||||
sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
|
||||
}
|
||||
sColor = sColorNew
|
||||
}
|
||||
// 处理六位的颜色值
|
||||
var sColorChange = []
|
||||
for (let i = 1; i < 7; i += 2) {
|
||||
sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)))
|
||||
}
|
||||
if (alpha == 1) {
|
||||
return sColorChange.join(",")
|
||||
} else {
|
||||
return "rgba(" + sColorChange.join(",") + "," + alpha + ")"
|
||||
}
|
||||
} else {
|
||||
return sColor
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f9f9f9;
|
||||
font-family: "微软雅黑", sans-serif;
|
||||
font-size: 28rpx;
|
||||
min-height: 100%;
|
||||
overflow-x: hidden;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.family700 {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.line20 {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.col-transparent {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.marginLR15 {
|
||||
margin: 0 30rpx;
|
||||
}
|
||||
|
||||
.jbetween {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 不换行显示省略号 */
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 不换行 */
|
||||
.white-space {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.size12 {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.size16 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.color9 {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.paddingL5 {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 108rpx;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
|
||||
.bg-clip-text {
|
||||
padding: 30rpx 0 30rpx 30rpx;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
min-width: 70rpx;
|
||||
width: 70rpx;
|
||||
}
|
||||
|
||||
/deep/ .uni-swiper-slide-frame {
|
||||
line-height: 54rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user