按照下面的代碼封裝完輪播組件后，在微信小程序模擬器中可以實現(xiàn)圓角效果，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%;
            }
        }

在真機上終于顯示圓角效果了