按照下面的代码封装完轮播组件后，在微信小程序模拟器中可以实现圆角效果，But运行到真机上，圆角效果没了！！！

真机上圆角没了

轮播代码

            <swiper class="swiper" :style="{'height':height}" circular :autoplay="autoplay" :interval="interval"
                :duration="duration" @change="change">
                <swiper-item v-for="(item ,index) in dataSource" :key="index">
                    <image :src="item" mode="aspectFill" class="swiper-image" @click="$emit('onSwiperTap',index)">
                    </image>
                </swiper-item>
            </swiper>

CSS代码

        .swiper {
            height: 320rpx;
            border-radius: 20rpx !important; //这么写在微信小程序上不会生效
            overflow: hidden; //这么写在微信小程序上不会生效
            .swiper-image {
                width: 100%;
                height: 100%;
            }
        }

解决方案：在css代码上添加 transform: translateY(0);

完成代码如下：

        .swiper {
            height: 320rpx;
            border-radius: 20rpx !important;
            overflow: hidden;
            transform: translateY(0); // 关键代码

            .swiper-image {
                width: 100%;
                height: 100%;
            }
        }

在真机上终于显示圆角效果了