|
|
@@ -0,0 +1,112 @@
|
|
|
+<template>
|
|
|
+ <view class="hometop">
|
|
|
+ <swiper class="swiper" circular :indicator-active-color="activecolor" :current="currentidx" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
|
|
|
+ :duration="duration">
|
|
|
+ <block v-for="(ite,idx) in bannerlist" :key='idx'>
|
|
|
+ <swiper-item>
|
|
|
+ <image :src="baseUrl+ite" class="swiperimg" @click.stop="getPreviewImage(idx)"></image>
|
|
|
+ </swiper-item>
|
|
|
+ </block>
|
|
|
+ </swiper>
|
|
|
+ <block v-if="bannerlist.length>1">
|
|
|
+ <image :src="leftimg" class="arrow arrowleft" @click.stop="prev"></image>
|
|
|
+ <image :src="rightimg" class="arrow arrowright" @click.stop="next"></image>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import config from '@/config.js';
|
|
|
+ export default{
|
|
|
+ props:{
|
|
|
+ bannerlist:{
|
|
|
+ type: Array,
|
|
|
+ default () {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ type:{
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return 'zhao'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ currentdate:{
|
|
|
+ type: String,
|
|
|
+ default () {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ leftimg:require('@/work/static/yuy/left.png'),
|
|
|
+ rightimg:require('@/work/static/yuy/right.png'),
|
|
|
+ background: ['color1', 'color2', 'color3'],
|
|
|
+ activecolor:'#ffffff',
|
|
|
+ indicatorDots: true,
|
|
|
+ autoplay: false,
|
|
|
+ interval: 2000,
|
|
|
+ duration: 500,
|
|
|
+ baseUrl:config.baseUrl,
|
|
|
+ currentidx:0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getPreviewImage(idx){
|
|
|
+ var newArr=[];
|
|
|
+ var arr=this.bannerlist
|
|
|
+ arr.forEach(ite=>{
|
|
|
+ var ds=this.baseUrl+ite
|
|
|
+ newArr.push(ds)
|
|
|
+ })
|
|
|
+ uni.previewImage({
|
|
|
+ urls: newArr,
|
|
|
+ current:idx,
|
|
|
+ success: function(data) {
|
|
|
+
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ prev(){
|
|
|
+ var len=this.bannerlist.length
|
|
|
+ this.currentidx=(this.currentidx-1+len)%len
|
|
|
+ },
|
|
|
+ next(){
|
|
|
+ var len=this.bannerlist.length
|
|
|
+ this.currentidx=(this.currentidx+1)%len
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .hometop{position: relative;}
|
|
|
+ .arrow{width: 30rpx;height: 30rpx;position: absolute;top: 50%;transform: translateY(-50%);
|
|
|
+ &.arrowleft{left: 26rpx;}
|
|
|
+ &.arrowright{right: 26rpx;}
|
|
|
+ }
|
|
|
+ // height: 246rpx;
|
|
|
+ .swiper{height: 322rpx;position: relative;border-radius: 10rpx;overflow: hidden;
|
|
|
+ .swiperimg{width: 100%;height: 100%;border-radius: 10rpx;overflow: hidden;}
|
|
|
+ }
|
|
|
+ .swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot{
|
|
|
+ width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot-active{
|
|
|
+ width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff;
|
|
|
+ }
|
|
|
+ // wx
|
|
|
+ .swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot{
|
|
|
+ width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5);
|
|
|
+ }
|
|
|
+ .swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot-active{
|
|
|
+ width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .bannerfot{position: absolute;left: 0;right: 0;height: 70rpx;background-color: rgba(0, 0, 0, 0.5);padding: 0 32rpx;bottom: 0;display: flex;align-items: center;justify-content: space-between;}
|
|
|
+</style>
|
zouling
