<swiper class="exam-list"
v-if="examList.length > 0"
:style="examStyle"
:autoplay="true"
:interval="2000"
:circular="true"
:vertical="true"
:display-multiple-items="examList.length > 2 ? 3 : pageData.examList.length"
:disable-touch="true"
>
<swiper-item v-for="(item, index) in examList" :key="index" class="exam-item">
<view class="exam-item text-maxline-1">{{ item.title }}</view>
</swiper-item>
</swiper>
let examStyle = reactive({
height: 0
})
let examList = reactive([])
pageData.examList = [{title: '123'}, {title: '345'},{title: '123'}, {title: '345'}]
console.log('res.result_data.length----------', res.result_data.length)
console.log('pageData.examList----------', pageData.examList.length)
examStyle.height = pageData.examList.length > 2 ? '150rpx' : ((pageData.examList.length * 50) + 'rpx')
console.log('examStyle.height----------', examStyle)
setTimeout(() => {
pageData.examList = [{title: '123'}, {title: '345'}]
console.log('res.result_data.length----------', res.result_data.length)
console.log('pageData.examList----------', pageData.examList.length)
examStyle.height = pageData.examList.length > 2 ? '150rpx' : ((pageData.examList.length * 50) + 'rpx')
console.log('examStyle.height----------', examStyle)
}, 2000)
狗尾草joss
- 发布：2023-07-20 09:36
- 更新：2023-07-20 10:44
- 阅读：135
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 11.4
HBuilderX类型： 正式
HBuilderX版本号： 3.8.7
手机系统： Android
手机系统版本号： Android 10
手机厂商： OPPO
手机机型： pbcm30
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
看代码
看代码
预期结果：
能改变高度
能改变高度
实际结果：
不能能改变高度
不能能改变高度
bug描述：
swiper的:style属性设置之后不能更改
爱豆豆 - 办法总比困难多
我忽悠你干啥呢？换成ref试一下
<template>
<view>
<swiper class="exam-list" :style="examStyle" :autoplay="true" :interval="2000" :circular="true" :vertical="true"
:disable-touch="true">
<swiper-item class="exam-item">
<image src="/static/wx.png"></image>
</swiper-item>
<swiper-item class="exam-item">
<image src="/static/wx.png"></image>
</swiper-item>
</swiper>
</view>
</template>
<script setup>
import {
ref,
reactive
} from 'vue'
const examStyle = ref('height: 100px')
setTimeout(() => {
examStyle.value = 'height:300px'
}, 5000)
</script>
<style lang="scss">
.exam-list {
background-color: #fff;
}
.exam-item {
background-color: pink;
}
</style> 爱豆豆 - 办法总比困难多
可以动态修改swiper高度
<template>
<view>
<swiper class="exam-list" :style="examStyle" :autoplay="true" :interval="2000" :circular="true" :vertical="true"
:disable-touch="true">
<swiper-item class="exam-item">
<image src="../../static/logo.png"></image>
</swiper-item>
<swiper-item class="exam-item">
<image src="../../static/logo.png"></image>
</swiper-item>
</swiper>
</view>
</template>
<script setup>
import {
ref,
reactive
} from 'vue'
const examStyle = reactive({
height: '100px'
})
setTimeout(() => {
examStyle.height = '300px'
}, 5000)
</script>
<style lang="scss">
.exam-list {
background-color: #fff;
}
.exam-item {
background-color: pink;
}
</style>
-
狗尾草joss (作者)
你忽悠我吗，我用你的代码新建一个页面也不能改变高度
<template>
<view>
<swiper class="exam-list" :style="examStyle" :autoplay="true" :interval="2000" :circular="true" :vertical="true"
:disable-touch="true">
<swiper-item class="exam-item">
<image src="/static/wx.png"></image>
</swiper-item>
<swiper-item class="exam-item">
<image src="/static/wx.png"></image>
</swiper-item>
</swiper>
</view>
</template>
<script setup>
import { ref, reactive } from 'vue'
const examStyle = reactive({
height: '100px'
})
setTimeout(() => {
console.log(examStyle)
examStyle.height = '300px'
console.log(examStyle)
}, 5000)
</script>2023-07-20 10:23
狗尾草joss (作者)
可以了，感谢
2023-07-20 10:45
爱豆豆
回复 狗尾草joss: 不得点个赞？
2023-07-20 10:47
狗尾草joss (作者)
回复 爱豆豆: 必须点赞
2023-07-20 11:03
狗尾草joss (作者)
I'm sorry
2023-07-20 11:03
爱豆豆
回复 狗尾草joss: 谢谢
2023-07-20 11:05