3回答

• 

  景树

  2023-10-12 21:59:09

  swiper组件  next-margin属性设置问题，还有就是你的素材图片要一样大小哦

  0 0
• 

  噢噢噢屁

  2024-06-20 15:30:27

  

  宽度减去左右内边距就好了

  0 0
• 

  叶0528

  2023-12-04 10:55:57

  <template>
  <view class="banner-box">
  <view class="banner-bg" :style="{'background-image': `linear-gradient(${bannerBackground || '#345DC2'} 50%, #FFF)`}" ></view>
  <swiper 
  class="banner-swipper"
  indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#FFFFFF"
  autoplay :interval="4000" :current="current" @change="swiperChange"
  >
  <swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
  <image :src="item.imageUrl"></image>
  <div>{{item.background}}</div>
  </swiper-item>
  </swiper>
  </view>
  </template>
  
  <script>
   
   
  export default {
  name:"jingBanner",
  props:{
  bannerList:{
  type: Array,
  default:()=>[
  {
  id:1,
  imageUrl:"../../static/images/it01.png",
  background:'#009B8C',
  advertUrl:"/pages/course/course-details"
  },
  {
  id:2,
  imageUrl:"../../static/images/it02.png",
  background:'#6E3DE6',
  advertUrl:"/pages/course/course-details"
  },
  {
  id:3,
  imageUrl:"../../static/images/it03.png",
  background:'#0D81ED',
  advertUrl:"/pages/course/course-details"
  },
  {
  id:3,
  imageUrl:"../../static/images/it04.png",
  background:'#dda0dd',
  advertUrl:"/pages/course/course-details"
  },
  ]
  },
  },
   
  data() {
  return {
  current: 0,// 当前所在滑块的index
  bannerBackground:'' //背景色
  };
  },
  methods:{
  swiperChange(e){
  this.current = e.detail.current;
  this.bannerBackground = this.bannerList[this.current].background
  console.log(e);
  }
  }
  }
  </script>
  
  <style>
   
  .banner-box{
   padding: 0 30rpx;
   padding-top: 120rpx;
  .banner-bg{
  position: absolute;
  top: 0;
  left: -30rpx;
  width: 130%;
  height: 470rpx;
  transform: .5s;
  background-image: linear-gradient(red 50%, #FFF);
  }
  .banner-swipper{
  height: 350rpx;
  .swiper-item{
  height: 100%;
  image{
  width: 100%;
  height: 100%;
  border-radius: 15rpx;
  }
  }
  }
  }
  </style>

  
  

  0 0