uni-app 动态循环出来的 swiper-item 设置高度不生效

项目	信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	7
HBuilderX类型	正式
HBuilderX版本号	2.9.8
手机系统	Android
手机系统版本号	Android 5.1
手机厂商	OPPO
手机机型	A59S
页面类型	vue
打包方式	云端
项目创建方式	HBuilderX

示例代码：

<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="u-flex-1 swiper" style="background-color: #007AFF;">  
    <block v-for="(item, index) in categoryList" :key="index">  
        <swiper-item class="swiper-item u-flex-col u-flex-1" :style="`height: ${swiperHeight};background-color:red`">  
            <text>{{`swiperHeight:${swiperHeight}`}}</text>  
            <!-- <kyh-promote-list :ref="`pList${item.id}`" :catId="item.id"></kyh-promote-list> -->  
        </swiper-item>  
    </block>  
</swiper>

操作步骤：

必现在低版本安卓手机
高版本安卓手机正常

预期结果：

swiper-item 高度为 swiperHeight

实际结果：

不足指定高度

bug描述：

swiperHeight打印为459px 高度设置不生效！！！

更多关于uni-app 动态循环出来的 swiper-item 设置高度不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

yibo5220 1楼

更多关于uni-app 动态循环出来的 swiper-item 设置高度不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

在低版本Android设备上，动态设置swiper-item高度不生效是已知的兼容性问题。问题主要出现在Android 5.x等早期版本中，CSS动态绑定在swiper-item组件上的渲染机制存在缺陷。

建议改用以下解决方案：

使用计算属性预先处理样式

computed: {
  swiperItemStyle() {
    return `height: ${this.swiperHeight}; background-color: red`
  }
}

模板中直接绑定计算属性

<swiper-item 
  class="swiper-item u-flex-col u-flex-1" 
  :style="swiperItemStyle">

备选方案：使用行内样式对象

<swiper-item 
  class="swiper-item u-flex-col u-flex-1" 
  :style="{ height: swiperHeight, backgroundColor: 'red' }">

强制样式优先级

.swiper-item {
  height: 459px !important;
}