Uniapp的Swiper无法显示内容

最新推荐文章于 2024-08-30 17:04:41 发布

tomxiong

最新推荐文章于 2024-08-30 17:04:41 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/tomxiong/article/details/124909001

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用了Uniapp官网上的Swiper组件案例代码，但是Swiper标签内的所有内容无法显示。

这个兄弟也曾遇到过类似问题，简直一模一样。我把代码贴出来。


//index.vue文件

<template>
	<view  class='content'>
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<view class="swiper-item uni-bg-red">A</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-green">B</view>
						</swiper-item>
						<swiper-item>
							<view class="swiper-item uni-bg-blue">C</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="swiper-list">
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">指示点</view>
				<switch :checked="indicatorDots" @change="changeIndicatorDots" />
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="uni-list-cell-db">自动播放</view>
				<switch :checked="autoplay" @change="changeAutoplay" />
			</view>
		</view>
		<view class="uni-padding-wrap">
			<view class="uni-common-mt">
				<text>幻灯片切换时长(ms)</text>
				<text class="info">{{duration}}</text>
			</view>
			<slider @change="durationChange" :value="duration" min="500" max="2000" />
			<view class="uni-common-mt">
				<text>自动播放间隔时长(ms)</text>
				<text class="info">{{interval}}</text>
			</view>
			<slider @change="intervalChange" :value="interval" min="2000" max="10000" />
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
            background: ['color1', 'color2', 'color3'],
            indicatorDots: true,
            autoplay: true,
            interval: 2000,
            duration: 500
        }
    },
    methods: {
        changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
    }
}
</script>

<style>
//轮播图高度自动  
.content {  
    width: auto;  
}  
.swiper {  
  height: auto;  
}  
.uni-swiper-wrapper {  
  overflow: auto!important;  
}  
.swiper-item {  
  width: auto!important;  
  height: auto!important;  

}
</style>

请大家看看是哪里问题？欢迎留言探讨，谢谢！