uni-app 无法定义swiper-item的宽度

uni-app 无法定义swiper-item的宽度

开发环境 版本号 项目创建方式
Mac 10.15.4 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>

更多关于uni-app 无法定义swiper-item的宽度的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

文档中关于swiper-item的介绍：
swiper-item
仅可放置在 <swiper> 组件中，宽高自动设置为100%。注意：宽高100%是相对于其父组件，不是相对于子组件，不能被子组件自动撑开

更多关于uni-app 无法定义swiper-item的宽度的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

在uni-app中，swiper-item的宽度默认会占满父容器swiper的宽度。要自定义swiper-item宽度，可以通过以下方式解决：

  1. 对于外层swiper-item，可以设置swiper的display:flex和flex-direction:row，然后给swiper-item设置固定宽度：
.swiper {
  display: flex;
  flex-direction: row;
}
.swiper-item {
  width: 450rpx !important;
}
  1. 对于内嵌的hot_swiper_item，你已经在样式中设置了固定宽度450rpx，但要注意：
  • 确保父容器hot_swiper有足够空间
  • 可能需要调整left/top定位值来正确放置
  1. 如果是在nvue环境下，需要使用weex的样式规范：
.hot_swiper_item {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 450px;
  height: 300px;
}
回到顶部