uniapp微信小程序swiper 轮播图

uni-swiper-dot 为轮播图指示点组件
swiper设置圆角，需要为swiper组件设置如下样式：

 //设置圆角
  overflow: hidden;
  border-radius: 4px;
  transform: translateY(0);

示例
template

<template>
  <view class="card-box">
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      :info="swiperList"
      :current="current"
      :dots-styles="dotsStyles"
      mode="round"
      field="content"
      @click-item="clickItem"
    >
      <swiper
        class="swiper"
        :current="swiperDotIndex"
        style="height: 140px"
        :autoplay="true"
        :interval="interval"
        :circular="true"
        @change="onChangeSwiper"
      >
        <swiper-item v-for="item in swiperList" :key="item.id">
          <image class="swiper-image" :src="item.url" mode="aspectFill" @click="enlargeImg(item)" />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>id
  </view>
</template>

script

<script lang="ts" setup>
import { ref, watch } from 'vue'

const swiperList = [
  {
    id: 1,
    url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641'
  },
  {
    id: 2,
    url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641'
  },
  {
    id: 3,
    url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641'
  },
  {
    id: 4,
    url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641'
  },
  {
    id: 5,
    url: 'https://img0.baidu.com/it/u=3021883569,1259262591&fm=253&fmt=auto&app=120&f=JPEG?w=1140&h=641'
  }
]
const interval = 3000
const current = ref(0)
const swiperDotIndex = ref(0)
const dotsStyles = ref({
  width: 3,
  height: 3,
  backgroundColor: 'rgb(255,255,255,0.6)',
  border: 'none',
  color: '#fff',
  selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
  selectedBorder: 'none'
})
const clickItem = (e: any) => {
  swiperDotIndex.value = e
}
const onChangeSwiper = (e: any) => {
  current.value = e.detail.current
}
const enlargeImg = (item: any) => {
  //点击事件
}
</script>

样式

<style scoped lang="scss">
.card-box {
  width: 100%;
  height: 100%;
}

.swiper {
  height: 100%;
 //设置圆角
  overflow: hidden;
  border-radius: 4px;
  transform: translateY(0);
}

.swiper-image {
  width: 100%;
  height: 100%;
}
</style>

样式效果图

image.png