12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <template>
- <view class="carousel">
- <swiper indicator-dots :circular="true" duration="400">
- <swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
- <view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
- </swiper-item>
- </swiper>
- </view>
- </template>
- <script>
- export default {
- props: {
- imgList: {
- type: Array,
- default: function () {
- return []
- }
- },
- },
- data() {
- return {
-
- };
- },
- };
- </script>
- <style lang="scss">
- .carousel {
- /* #ifdef APP-PLUS */
- padding-top: var(--status-bar-height);
- /* #endif */
- height: 700rpx;
- position: relative;
- swiper {
- height: 100%;
- }
- .image-wrapper {
- width: 100%;
- height: 100%;
- }
- .swiper-item {
- display: flex;
- justify-content: center;
- align-content: center;
- height: 700rpx;
- overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
- }
- }
- </style>
|