uniapp 17 轮播图样式设置

效果

1. 外框圆角
2. 图片充满整个区域
3. 正常轮播
4. 外层渐变色包裹填充
   
   
   

代码

<template>
  <view class="pageBg">
    <!-- 背景渐变色区域 -->
    <view class="background-gradual">
      <!-- 1. 轮播图 -->
      <view class="banner" v-if="swiperList.length > 0">
        <swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
          <swiper-item v-for="(item, index) in swiperList" :key="index" @click="clickBannerImg(item)">
            <image :src="fileBaseUrl + item.image"  mode="aspectFill"/>
          </swiper-item>
        </swiper>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  /* 背景渐变色区域 */
  .background-gradual {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-image: linear-gradient(orange, #F4F5F9);
    /* 轮播图 */
    .banner {
      height: 340rpx;
      margin-top: 30rpx;
      swiper {
        width: $base-content-width;
        height: 340rpx;
        /** 切圆角只有放在此处，且和overflow结合使用时，才不会出现直角问题*/
        border-radius: 20rpx;
        /* 圆角切换时，产生直角问题*/
        overflow: hidden;
        &-item {
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>