s***@163.com
s***@163.com
  • 发布:2020-06-17 11:09
  • 更新:2020-06-22 09:28
  • 阅读:2755

【报Bug】无法定义swiper-item的宽度

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 10.15.4

HBuilderX类型: 正式

HBuilderX版本号: 2.7.13

手机系统: iOS

手机系统版本号: iOS 13.4

手机厂商: 苹果

手机机型: iphone8

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="pages">  
        <view class="status-bar" :style="{ height: iStatusBarHeight + 'px'}"></view>  
        <view class="status-bar-fix" :style="{ height: iStatusBarHeight + 'px'}"></view>  
        <view class="tab_fix" :style="{ top: iStatusBarHeight}">  
            <text class="tab_text" @click="toSwiper(0)">精选</text>  
            <text class="tab_text" @click="toSwiper(1)">手机</text>  
            <text class="tab_text" @click="toSwiper(2)">电脑</text>  
            <text class="tab_text" @click="toSwiper(3)">家电</text>  
            <text class="tab_text" @click="toSwiper(4)">其他</text>  
        </view>  
        <swiper class="swiper" @change="swiperChange" :current="swiperIndex">  
            <swiper-item :style="{ backgroundColor:'#3d3d3d'}">  
                    <swiper class="hot_swiper" circular @change="swiperChange2" indicator-dots indicator-color="rgba(248, 248, 248, .3)" indicator-active-color="#f8f8f8">  
                        <swiper-item class="hot_swiper_item">  

                        </swiper-item>  
                    </swiper>  

            </swiper-item>  
        </swiper>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                iStatusBarHeight:0//nvue页面获取状态栏高度  
            }  
        },  
        onLoad() {  
            this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight  
        },  
        mounted() {  

        },  
        onUnload(){  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .pages{  
        width: 750rpx;  
        background-color: #f8f8f8;  
        color: #333333;  
    }  
    .status-bar{  
        width: 100%;  
        background-color: #f8f8f8;  
    }  
    .status-bar-fix{  
        width: 100%;  
        position: fixed;  
        top: 0;  
        left: 0;  
        z-index: 999;  
        background-color: #f8f8f8;  
    }  
    .tab_fix{  
        width: 100%;  
        height: 54rpx;  
        padding: 30rpx 0 48rpx 0;  
        flex-direction: row;  
        position: fixed;  
        left: 0;  
        background-color: #f8f8f8;  
        z-index: 1000;  
    }  
    .tab_text{  
        width: 150rpx;  
        height: 54rpx;  
        line-height: 54rpx;  
        text-align: center;  
        font-size: 30rpx;  
    }  
    .tab_active{  
        font-size: 32rpx;  
        font-weight: 800;  
    }  
    .tab_block{  
        position: absolute;  
        height: 4rpx;  
        width: 54rpx;  
        bottom: -40rpx;  

        transition: left .3s;  
    }  
    .swiper{  
        width: 750rpx;  
        height: 750rpx;  
        margin-top: 132rpx;  
        justify-content: center;  
        align-items: center;  
    }  
    .hot_swiper{  
        margin-bottom: 44rpx;  
        width: 750rpx;  
        height: 400rpx;  
        background-color: #f9385b;  
    }  
    .hot_swiper_item{  
        position: absolute;  
        top: 50rpx;  
        left: 50rpx;  
        width: 450rpx;  
        height: 300rpx;  
        background-color: #e2923d;  
    }  
</style>

操作步骤:

模拟器,真机都已测试

预期结果:

能够自定义swiper-item的宽度,能使用绝对定位自定义swiper-item的位置

实际结果:

宽度一直为父元素的100%宽度,绝对定位不起作用

bug描述:

nvue编译方式为uni-app,swiper-item的宽度自动为swiper的100%,设置width没有作用,也无法使用position: absolute 属性定义swiper-item的位置。

2020-06-17 11:09 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

文档中关于swiper-item的介绍:

swiper-item

仅可放置在 <swiper> 组件中,宽高自动设置为100%。注意:宽高100%是相对于其父组件,不是相对于子组件,不能被子组件自动撑开

  • s***@163.com (作者)

    在vue中swiper-item是可以自定义宽高以及定位的,nvue就完全失效了

    2020-06-22 09:28

s***@163.com

s***@163.com (作者)

在vue中swiper-item是可以自定义宽高以及定位的,nvue就完全失效了

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