feat：v1.4前端更新
This commit is contained in:
超凡
289
app/components/homeIndex/swiperBg.vue
Normal file
289
app/components/homeIndex/swiperBg.vue
Normal file
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<!-- 轮播图 -->
|
||||
<view class="swiperBg" :style="[boxStyle]">
|
||||
<view class="swiper page_swiper" :class="docConfig" v-if="imgUrls.length">
|
||||
<swiper :autoplay="true" :circular="true" :interval="3000" :duration="500"
|
||||
:indicator-active-color="docColor" :current="swiperCur" :previous-margin="swiperType==0?'40rpx':''" :next-margin="swiperType==0?'40rpx':''"
|
||||
@change="swiperChange">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<swiper-item :class="{ active: index == swiperCur }">
|
||||
<view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper tui-skeleton-rect'>
|
||||
<image :src="item.img" mode="aspectFill" :style="[imgStyle]" class="slide-image aa"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<view v-if="docType === 0" class="dots" :style="[dotStyle]">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot-item"
|
||||
:style="{'background-color': swiperCur === index ? (dataConfig.themeStyleConfig.tabVal?dataConfig.docColor.color[0].item:themeColor) : ''}">
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="docType === 1" class="dots" :style="[dotStyle]">
|
||||
<block v-for="(item,index) in imgUrls" :key="index">
|
||||
<view class="dot"
|
||||
:style="{'background-color': swiperCur === index ? (dataConfig.themeStyleConfig.tabVal?dataConfig.docColor.color[0].item:themeColor) : ''}">
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// +----------------------------------------------------------------------
|
||||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||
// +----------------------------------------------------------------------
|
||||
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
|
||||
// +----------------------------------------------------------------------
|
||||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||
// +----------------------------------------------------------------------
|
||||
// | Author: CRMEB Team <admin@crmeb.com>
|
||||
// +----------------------------------------------------------------------
|
||||
import {
|
||||
navigatoPage
|
||||
} from "@/utils/index"
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: 'swiperBg',
|
||||
props: {
|
||||
dataConfig: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
merId: {}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
indicatorDots: false,
|
||||
imgUrls: [], //图片轮播数据
|
||||
txtStyle: this.dataConfig.txtStyle.type, //指示器位置
|
||||
imageH: 310,
|
||||
swiperCur: 0,
|
||||
themeColor:this.$options.filters.filterTheme(app.globalData.theme)
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
imageH(nVal, oVal) {
|
||||
let self = this
|
||||
this.imageH = nVal
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
//指示器样式
|
||||
dotStyle() {
|
||||
return {
|
||||
padding: '0 50rpx',
|
||||
justifyContent: this.dataConfig.txtStyle.tabVal === 1 ? 'center' : this.dataConfig.txtStyle
|
||||
.tabVal === 2 ? 'flex-end' : 'flex-start'
|
||||
}
|
||||
},
|
||||
//指示器类型，0圆，1直，2无
|
||||
docType() {
|
||||
return this.dataConfig.docConfig.tabVal
|
||||
},
|
||||
//轮播图样式
|
||||
swiperType(){
|
||||
return this.dataConfig.swiperStyleConfig.tabVal
|
||||
},
|
||||
//最外层盒子的样式
|
||||
boxStyle() {
|
||||
return {
|
||||
borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
|
||||
background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
|
||||
margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + this.dataConfig.lrConfig.val * 2 + 'rpx' +
|
||||
' ' + 0,
|
||||
padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '20rpx' + ' ' + this.dataConfig.downConfig.val *
|
||||
2 + 'rpx'
|
||||
}
|
||||
},
|
||||
//指示器颜色
|
||||
docColor() {
|
||||
return this.dataConfig.docColor.color[0].item + '!important'
|
||||
},
|
||||
//指示器样式
|
||||
docConfig() {
|
||||
if (this.dataConfig.docConfig.tabVal == 1) {
|
||||
return 'square'
|
||||
} else if (this.dataConfig.docConfig.tabVal == 2) {
|
||||
return 'nodoc'
|
||||
} else {
|
||||
return 'circular'
|
||||
}
|
||||
},
|
||||
//内容圆角
|
||||
imgStyle() {
|
||||
return {
|
||||
"border-radius": this.dataConfig.contentStyle.val * 2 + 'rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.imgUrls = this.dataConfig.swiperConfig.list
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
this.$nextTick(function() {
|
||||
uni.getImageInfo({
|
||||
src: that.setDomain(that.imgUrls[0].img),
|
||||
success: function(res) {
|
||||
that.$set(that, 'imageH', res.height);
|
||||
},
|
||||
fail: function(error) {
|
||||
that.$set(that, 'imageH', 310);
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
//替换安全域名
|
||||
setDomain: function(url) {
|
||||
url = url ? url.toString() : '';
|
||||
//本地调试打开,生产请注销
|
||||
if (url.indexOf("https://") > -1) return url;
|
||||
else return url.replace('http://', 'https://');
|
||||
},
|
||||
swiperChange(e) {
|
||||
let {
|
||||
current,
|
||||
source
|
||||
} = e.detail;
|
||||
if (source === 'autoplay' || source === 'touch') {
|
||||
this.swiperCur = e.detail.current;
|
||||
}
|
||||
},
|
||||
goDetail(url) {
|
||||
let path = url.info[1].value
|
||||
this.$util.navigateTo(path);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/*用来包裹所有的小圆点 */
|
||||
.dots {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
bottom: 24rpx;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.dot-item {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
border-radius: 50%;
|
||||
margin: 0 6rpx;
|
||||
}
|
||||
|
||||
/*未选中时的小圆点样式 */
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 6rpx;
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
}
|
||||
.swiperBg {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
|
||||
.colorBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 130rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page_swiper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
overflow-x: hidden;
|
||||
/* #ifdef MP */
|
||||
z-index: 20;
|
||||
|
||||
/* #endif */
|
||||
/* 设置圆角 */
|
||||
&.fillet {
|
||||
|
||||
.swiper-item,
|
||||
image,
|
||||
.acea-row.row-between-wrapper {
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-item,
|
||||
image,
|
||||
.acea-row.row-between-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
swiper {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
image {
|
||||
transform: scale(0.93);
|
||||
transition: all 0.6s ease;
|
||||
}
|
||||
|
||||
swiper-item.active {
|
||||
image {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// 圆形指示点
|
||||
&.circular {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 10rpx;
|
||||
height: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 方形指示点
|
||||
&.square {
|
||||
/deep/.uni-swiper-dot {
|
||||
width: 20rpx;
|
||||
height: 5rpx;
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&.nodoc {
|
||||
/deep/.uni-swiper-dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.dot0 .uni-swiper-dots-horizontal {
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
/deep/.dot1 .uni-swiper-dots-horizontal {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
/deep/.dot2 .uni-swiper-dots-horizontal {
|
||||
left: 90%;
|
||||
}
|
||||
|
||||
.item-img image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user