zting590
zting590
  • 发布:2020-02-17 22:11
  • 更新:2020-02-18 16:22
  • 阅读:2425

#插件需求# uni-app官方内置的swiper有个内置固定高度150px,配合uni-swiper-dot使用会有问题,如图

分类:uni-app

源码请见附件!

<template>  
    <view class="content">  
        <uni-swiper-dot :info="bannerList" :current="current"  :dotsStyles="dotsStyles">  
            <swiper class="swiper-box" @change="change" autoplay="true" circular="true">  
                <swiper-item v-for="(item, index) in bannerList" :key="index">  
                        <image class="swiperitem" mode="widthFix" src="../../static/banner.png"/>  
                        <!-- <image class="swiperitem" mode="scaleToFill" src="../../static/banner.png"/> -->  
                </swiper-item>  
            </swiper>  
        </uni-swiper-dot>  
        <image class="zhilaizhiwang" src="../../static/Snip20191111_2.png" mode="widthFix"></image>  

    </view>  
</template>  

<script>  

    import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'  

    export default {  
        components: {  
            uniSwiperDot  
        },  
        data() {  
            return {  
                bannerList:[0,1,2],  
                current: 0,  
                dotsStyles:{  
                    bottom:10,  
                    backgroundColor: 'rgba(255, 255, 255,1)',  
                    border: '1px rgba(255, 255, 255,1) solid',  
                    color: '#fff',  
                    selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',  
                    selectedBorder: '1px rgba(255, 90, 95,0.9) solid'  
                }  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            change(e) {  
                this.current = e.detail.current  
            }  
        }  
    }  
</script>  

<style>  
.content {  
    background-color: lightgray;  
}  
.swiper-box{  
    /* height: 190px; */  
    margin-bottom: 10px;  
    width: 100%;  
    background-color: green;  
    /* height: 50vw; */  
}  
.swiperitem{  
    width: 100%;  
    height: 100%;  
}  

.zhilaizhiwang{  
    /* margin-top: 10px; */  
    width: 100%;  
    margin-bottom: 5px;  
}  
</style>  
2020-02-17 22:11 负责人:无 分享
已邀请:
zting590

zting590 (作者)

哪位给看看呢?

zting590

zting590 (作者)

顶顶顶ddd。。。

DCloud_UNI_FXY

DCloud_UNI_FXY

为什么不自己指定swiper的高度呢?
swiper在使用时,必须指定一个高度值,否则默认是150px

  • 庄与宁

    swiper内容无限多呢

    2021-04-21 14:32

该问题目前已经被锁定, 无法添加新回复