uni-collapse里套uni-collapse在uniapp的小程序端不生效?
站长
· 阅读数 14
<!--课程详情 目录-->
<template>
<view>
<view class="v-box catalogue">
<!--*****录播*****-->
<!-- ***** 一级目录 ***** -->
<view class="">
<view class="collapseBox" v-if="catalogueList.length > 0">
<!--录播 带目录的课程-->
<uni-collapse accordion ref="collapse" @change="changePanel">
<uni-collapse-item :title="item.name" v-for="(item,index) in catalogueList" :key="index">
<view class="subAll">
<view class="subBox">
<!-- ***** 二级目录 ***** -->
<view class="">
<view class="collapseBoxTwo" v-if="catalogueListTwo.length > 0">
<!--录播 带目录的课程-->
<uni-collapse accordion ref="collapseTwo" @change="changePanelTwo">
<uni-collapse-item :title="item.name" v-for="item in catalogueListTwo"
:key="item.id">
<view class="subAllTwo">
<view class="subBoxTwo">
<view class="subBox-boxTwo" v-for="subItem in item.children"
:key="subItem.id">
<!-- <view class="boxFlex" @click="clickSubjectTry(subItem)"
v-if="item.viewMode !== '3'&&subItem.viewMode&&introduceInfo.selected === false&&showBuy === '1'">
<view class="sub">
{{subItem.name}}
</view>
<view class="sub-try">
支持试看
</view>
</view> -->
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlexTwo" @click="clickSubject(subItem)">
<view class="subNameTwo">
{{'【' + `${subItem.resTypeFmt}` + '】' + `${subItem.name}`}}
</view>
<view class="sub-progressTwo"
v-if="introduceInfo.selected === true">
{{subItem.studyProgress || '0%'}}
</view>
<image :src="videoIcon"
v-if="subItem.resType === '1'" class="iconImage"
mode=""></image>
<image :src="audioIcon"
v-if="subItem.resType === '2'" class="iconImage"
mode=""></image>
<image :src="imageTextIcon"
v-if="subItem.resType === '3'" class="iconImage"
mode=""></image>
<image :src="workIcon"
v-if="subItem.resType === '4'||subItem.resType === '6'||subItem.resType === '16'||subItem.resType === '17'"
class="iconImage" mode=""></image>
<image :src="workmanship"
v-if="subItem.resType === '9'||subItem.resType === '10'"
class="iconImage" mode=""></image>
</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="" v-if="catalogueListTaskTwo.length > 0">
<!--录播 不带目录的课程-->
<view class="" v-for="item in catalogueListTaskTwo" :key="item.id">
<view class="indepTwo">
<view class="boxFlexTwo" @click="clickSubjectTry(item)"
v-if="item.viewMode !== '3'&&item.viewMode&&introduceInfo.selected === false&&showBuy === '1'&&isOpenCourse !== '1'">
<view class="subNameTwo">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-tryTwo">
支持试看
</view>
</view>
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlexTwo" @click="clickSubject(item)" v-else>
<view class="subNameTwo">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-progressTwo"
v-if="introduceInfo.selected === true">
{{item.studyProgress || '0%'}}
</view>
<image :src="videoIcon" v-if="item.resType === '1'"
class="iconImage" mode=""></image>
<image :src="audioIcon" v-if="item.resType === '2'"
class="iconImage" mode=""></image>
<image :src="imageTextIcon" v-if="item.resType === '3'"
class="iconImage" mode="">
</image>
<image :src="workIcon"
v-if="item.resType === '4'||item.resType === '6'||item.resType === '16'||item.resType === '17'"
class="iconImage" mode=""></image>
<image :src="workmanship"
v-if="item.resType === '9'||item.resType === '10'"
class="iconImage" mode=""></image>
</view>
</view>
</view>
</view>
</view>
<!-- ***** 二级目录 结尾 ***** -->
<view class="subBox-box" v-for="subItem in item.children" :key="subItem.id">
<view class="boxFlex" @click="clickSubjectTry(subItem)"
v-if="item.viewMode !== '3'&&subItem.viewMode&&introduceInfo.selected === false&&showBuy === '1'">
<view class="sub">
{{'【' + `${subItem.resTypeFmt}` + '】' + `${subItem.name}`}}
</view>
<view class="sub-try">
支持试看
</view>
</view>
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlex" @click="clickSubject(subItem)" v-else>
<view class="subNameOne">
{{'【' + `${subItem.resTypeFmt}` + '】' + `${subItem.name}`}}
</view>
<view class="sub-progress" v-if="introduceInfo.selected === true">
{{subItem.studyProgress || '0%'}}
</view>
<image :src="videoIcon" v-if="subItem.resType === '1'" class="iconImage"
mode=""></image>
<image :src="audioIcon" v-if="subItem.resType === '2'" class="iconImage"
mode=""></image>
<image :src="imageTextIcon" v-if="subItem.resType === '3'" class="iconImage"
mode=""></image>
<image :src="workIcon"
v-if="subItem.resType === '4'||subItem.resType === '6'||subItem.resType === '16'||subItem.resType === '17'"
class="iconImage" mode=""></image>
<image :src="workmanship"
v-if="subItem.resType === '9'||subItem.resType === '10'"
class="iconImage" mode=""></image>
</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="" v-if="catalogueListTask.length > 0">
<!--录播 不带目录的课程-->
<view class="" v-for="(item,index) in catalogueListTask" :key="index">
<view class="indep">
<view class="boxFlex" @click="clickSubjectTry(item)"
v-if="item.viewMode !== '3'&&item.viewMode&&introduceInfo.selected === false&&showBuy === '1'&&isOpenCourse !== '1'">
<view class="subNameOne">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-try">
支持试看
</view>
</view>
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlex" @click="clickSubject(item)" v-else>
<view class="subNameOne">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-progress" v-if="introduceInfo.selected === true">
{{item.studyProgress || '0%'}}
</view>
<image :src="videoIcon" v-if="item.resType === '1'" class="iconImage" mode=""></image>
<image :src="audioIcon" v-if="item.resType === '2'" class="iconImage" mode=""></image>
<image :src="imageTextIcon" v-if="item.resType === '3'" class="iconImage" mode="">
</image>
<image :src="workIcon"
v-if="item.resType === '4'||item.resType === '6'||item.resType === '16'||item.resType === '17'"
class="iconImage" mode=""></image>
<image :src="workmanship" v-if="item.resType === '9'||item.resType === '10'"
class="iconImage" mode=""></image>
</view>
</view>
</view>
</view>
</view>
<!-- ***** 一级目录 结尾 ***** -->
<!--*****专题*****-->
<view class="" v-if="subjectType === '1'&&false">
<view class="catalogueSub">
<u-subsection :list="subCatalog" bgColor="#FFFFFF" mode="subsection" :current="currentCatalog"
@change="changeSubTab"></u-subsection>
</view>
<view class="" v-if="showSubConrtent">
<view class="literature">课程内容</view>
<view class="stepsSub">
<u-steps :current="stepsCurrent" activeColor="#2692FC" direction="row">
<u-steps-item :title="stepsItem.title" v-for="stepsItem in stepsList"
@eventStep='eventStep'>
</u-steps-item>
</u-steps>
</view>
</view>
<view class="literature">目录</view>
</view>
<!--目录 线上-->
<view class="" v-if="showCatalogueType === '0'&&subjectType === '1'&&false">
<!--线上 必修选修-->
<view class="" v-if="showSubCatalogue === '0'">
<view class="collapseBox" v-if="catalogueList.length > 0">
<!--专题 目录 目录-->
<uni-collapse accordion ref="collapse" @change="changePanel">
<uni-collapse-item :title="item.name" v-for="(item,index) in catalogueList" :key="index">
<view class="subAll">
<view class="subBox">
<view class="subBox-box" v-for="subItem in item.children" :key="subItem.id">
<view class="boxFlex" @click="clickSubjectTry(subItem)"
v-if="subItem.viewMode !== '3'&&subItem.viewMode&&introduceInfo.selected === false&&showBuy === '1'">
<view class="sub">
{{subItem.name}}
</view>
<view class="sub-try">
支持试看
</view>
</view>
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlex" v-else @click="clickSubject(subItem)">
<view class="sub">
{{subItem.name}}
</view>
<view class="sub-progress" v-if="introduceInfo.selected === true">
{{subItem.studyProgress || '0%'}}
</view>
<image :src="videoIcon" class="iconImage" mode=""></image>
</view>
</view>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
<view class="" v-if="catalogueListTask.length > 0">
<!--专题 目录 任务-->
<view class="" v-for="(item,index) in catalogueListTask" :key="index">
<view class="indep">
<view class="boxFlex"
v-if="item.viewMode !== '3'&&item.viewMode&&introduceInfo.selected === false&&showBuy === '1'">
<view class="sub">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-try" @click="clickSubjectTry(item)">
支持试看
</view>
</view>
<!-- v-if="showBuy === '0'||isOpenCourse === '1'" -->
<view class="boxFlex" v-else>
<view class="sub">
{{'【' + `${item.resTypeFmt}` + '】' + `${item.name}`}}
</view>
<view class="sub-progress" v-if="introduceInfo.selected === true">
<!--课程购买后显示进度-->
{{item.studyProgress || '0%'}}
</view>
<image :src="videoIcon" class="iconImage" mode="" @click="clickSubject(item)">
</image>
</view>
</view>
</view>
</view>
</view>
<!--线上 作业-->
<view class="" v-if="showSubCatalogue === '1'">
<view class="catalogueWork" v-for="workItem in 8">
<view class="title">作业：安全生产法解读与企业</view>
<image :src="goIcon" class="goImage" mode=""></image>
</view>
</view>
<!--线上 考试-->
<view class="" v-if="showSubCatalogue === '2'">
<view class="catalogueWork" v-for="examCatalogueItem in 8">
<view class="title">考试：安全生产法解读与企业</view>
<image :src="goIcon" class="goImage" mode=""></image>
</view>
</view>
<!--线上 练习-->
<view class="" v-if="showSubCatalogue === '3'">
<view class="catalogueWork" v-for="practiceItem in 8">
<view class="title">练习：安全生产法解读与企业</view>
<image :src="goIcon" class="goImage" mode=""></image>
</view>
</view>
</view>
<!--目录 线下-->
<view class="" v-if="showCatalogueType === '1'&&false">
<offline v-for="a in 3"></offline>
</view>
</view>
<u-modal :show="showModal" title="该视频需要人脸识别" :showCancelButton="true" @confirm='confirmIdentify'
@cancel="cancelIdentify"></u-modal>
</view>
</template>
<script>
import offline from '@/components/user/offline.vue'
import {
watch
} from "vue"
import {
faceIdentify
} from '@/api/uploadFile.js'
export default {
data() {
return {
subCatalog: ['线上', '线下', '课程辅导'],
currentCatalog: 0,
stepsCurrent: 0, //目录 课程内容 当前在第几步
goIcon: this.imagePrefix + 'Jump.png',
videoIcon: this.imagePrefix + 'videoIcon.png', //视频图标
audioIcon: this.imagePrefix + 'audioIcon.png', //音频图标
imageTextIcon: this.imagePrefix + 'imageTextIcon.png', //图文图标
workIcon: this.imagePrefix + 'workIcon.png', //视频图标
workmanship: this.imagePrefix + 'workmanship.png', //视频图标
showCatalogueType: '0', //显示的目录类型 0线上 1线下 2课程辅导
showSubCatalogue: '0', //目录里面显示那一个课程的目录 0必修选修 1作业 2考试 3练习
stepsList: [{
title: '必修课程'
}, {
title: '选修课程'
}, {
title: '作业'
}, {
title: '考试'
}, {
title: '练习'
}],
showSubConrtent: true, //是否显示课程内容的步骤条
catalogueListValue: '', //接收页面传递的目录类型列表 做一下监听 给相应点击的属性下添加children数组
passVideoValue: null, //人脸认证通过后 传递到详情页的参数
showModal: false,
}
},
components: {
offline
},
/**
* subjectType 课程类型 0录播 1专题 2直播 3精品 //暂时都按录播课程展示
* catalogueList 课程 目录 列表 （必修或选修）
* catalogueListTask 课程 任务 列表 （必修或选修）
* introduceInfo 详情 获取selected字段 true为课程已购买
* showBuy 0为我的课程 可以任意观看 1为课程中心 只能观看某些课程
* isOpenCourse 是否为免费课程 1为是
*
* **/
props: ['subjectType', 'catalogueList', 'catalogueListTask', 'introduceInfo', 'showBuy',
'isOpenCourse', 'catalogueListTwo', 'catalogueListTaskTwo'
],
mounted() {
// console.log('subjectType',this.subjectType)
// console.log('catalogueList1', this.catalogueList)
// console.log('catalogueListTask1', this.catalogueListTask)
// audioIcon imageTextIcon workIcon workmanship
// resType 课程任务资源类型
/**
* 1 视频
* 2 音频
* 3 图文 富文本
* 4 文档 pdf
* 6 作业
* 9 物理空间
* 10 工艺仿真
* 16 考试
* 17 练习
*
* **/
},
computed: {
setFaceRecogn() { //是否需要人脸认证
return this.$store.state.faceRecogn
},
whetherDistinguish() { //是否是我的课程或计划进入
return this.$store.state.isDistinguish
}
},
watch: {
catalogueListTwo: { //监听 二级 目录
handler(newValue, oldValue) {
this.$refs.collapse.resize();
},
deep: true
},
catalogueListTaskTwo: { //监听 二级 任务
handler(newValue, oldValue) {
this.$refs.collapse.resize();
},
deep: true
}
},
methods: {
//人脸识别 确认
confirmIdentify() {
this.faceIdentify()
this.showModal = false
},
//人脸识别 取消
cancelIdentify() {
this.showModal = false
},
changeSubTab(e) {
this.currentCatalog = e
this.showCatalogueType = String(e)
if (e === 0) {
this.showSubConrtent = true
} else if (e === 1) {
this.showSubConrtent = false
} else if (e === 2) {
this.showSubConrtent = false
}
},
eventStep(e) {
if (e === '必修课程') {
this.showSubCatalogue = '0'
this.stepsCurrent = '0'
} else if (e === '选修课程') {
this.showSubCatalogue = '0'
this.stepsCurrent = '1'
} else if (e === '作业') {
this.showSubCatalogue = '1'
this.stepsCurrent = '2'
} else if (e === '考试') {
this.showSubCatalogue = '2'
this.stepsCurrent = '3'
} else if (e === '练习') {
this.showSubCatalogue = '3'
this.stepsCurrent = '4'
}
},
clickSubject(e) { //目录 课程点击 普通课程
// console.log('e普通课程', e)
this.passVideoValue = e
if (!e) {
this.utils.checkTips('未查询到课程数据')
return
}
if (e.resType !== '1'&&(this.introduceInfo.selected === false||this.introduceInfo.selected === true)) {
this.utils.checkTips('暂未开放')
return
}
// console.log('是否公开', this.isOpenCourse)
// console.log('this.whetherDistinguish',this.whetherDistinguish)
if(this.whetherDistinguish === '1'){ //我的课程或计划进入
if (this.isOpenCourse === '1') { //免费 不用验证人脸
this.$emit('eventGoDetails', e)
} else { //不免费
// console.log('是否购买', this.introduceInfo.selected)
if (this.introduceInfo.selected === true) { //已购买
// console.log('是否需要人脸识别', this.setFaceRecogn)
if (this.setFaceRecogn === '0') {
this.$emit('eventGoDetails', this.passVideoValue)
} else {
this.showModal = true //需要人脸认证
}
} else if (this.introduceInfo.selected === false) { //未购买
this.utils.checkTips('请购买后观看')
} else {
if (this.setFaceRecogn === '0') {
this.$emit('eventGoDetails', this.passVideoValue)
} else {
this.showModal = true //需要人脸认证
}
}
}
}else{
if (this.isOpenCourse === '1') { //免费 不用验证人脸
this.$emit('eventGoDetails', e)
} else { //不免费
// console.log('是否购买', this.introduceInfo.selected)
if (this.introduceInfo.selected === true) { //已购买
// console.log('是否需要人脸识别', this.setFaceRecogn)
if (this.setFaceRecogn === '0') {
this.$emit('eventGoDetails', this.passVideoValue)
} else {
this.showModal = true //需要人脸认证
}
} else if (this.introduceInfo.selected === false) { //未购买
this.utils.checkTips('请购买后观看')
} else {
this.utils.checkTips('请购买后观看')
}
}
}
},
clickSubjectTry(e) { //目录 课程点击 试看课程（不用人脸识别）
this.$emit('eventGoDetails', e)
},
changePanel(e) { //切换 目录 (点击 获取子集数据) 一级
this.$emit('eventCatalogue', this.catalogueList[e], e)
this.$nextTick(() => {
setTimeout(() => {
this.$refs.collapse.resize();
}, 500)
});
},
changePanelTwo(e) { //切换 目录 (点击 获取子集数据) 二级
this.$emit('eventCatalogueTwo', this.catalogueListTwo[e], e)
this.$nextTick(() => {
setTimeout(() => {
this.$refs.collapse.resize();
}, 500)
});
},
setUpDataHeight() { //更新 二级面板 高度
this.$nextTick(() => {
setTimeout(() => {
this.$refs.collapse.resize();
}, 500)
});
},
//人脸识别 看视频课程时使用
faceIdentify() {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['camera'], //拍照
success: (res) => {
this.faceRoute = res.tempFilePaths[0]
let params = res.tempFilePaths[0]
faceIdentify(params).then(res => {
// console.log('res.msg', res.msg)
if (Number(res.msg) > 80) { //上线时 换成80
this.utils.checkTips('认证通过')
setTimeout(() => {
this.$emit('eventGoDetails', this.passVideoValue)
}, 1500)
} else {
this.utils.checkTips('认证失败，请重试')
}
})
}
});
}
}
}
</script>
<style scoped lang="scss">
.subNameTwo {
width: 420rpx;
}
.subNameOne {
width: 500rpx;
}
//任务目录2
.collapseBoxTwo {
width: 105%;
.subAllTwo {
width: 90%;
display: flex;
margin: 30rpx 0 30rpx 6%;
.subBoxTwo {
width: 95%;
.subBox-boxTwo {
height: 89rpx;
display: flex;
justify-content: space-between;
margin-bottom: 9rpx;
.boxFlexTwo {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
.subTwo {
width: 500rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sub-tryTwo {
width: 112rpx;
height: 40rpx;
border-radius: 8px;
border: 2px solid #00BA7C;
color: #00BA7C;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
.sub-progressTwo {
color: #2692FC;
font-size: 22rpx;
}
}
}
}
}
}
.boxFlexTwo {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
}
//任务目录1
.collapseBox {
width: 100%;
.subAll {
width: 90%;
display: flex;
margin: 30rpx 0 30rpx 6%;
.subBox {
width: 95%;
.subBox-box {
height: 89rpx;
display: flex;
justify-content: space-between;
margin-bottom: 9rpx;
.boxFlex {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
.sub {
width: 500rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sub-try {
width: 112rpx;
height: 40rpx;
border-radius: 8px;
border: 2px solid #00BA7C;
color: #00BA7C;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
.sub-progress {
color: #2692FC;
font-size: 22rpx;
}
}
}
}
}
}
// 任务样式2
.indepTwo {
width: 93%;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
font-size: 28rpx;
border-bottom: 1rpx #F1F2F5 solid;
padding-top: 30rpx;
.boxFlexTwo {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
.subTwo {
width: 520rpx;
}
.sub-progressTwo {
color: #2692FC;
font-size: 22rpx;
}
.sub-tryTwo {
width: 112rpx;
height: 40rpx;
border-radius: 8px;
border: 2px solid #00BA7C;
color: #00BA7C;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
// 任务样式1
.indep {
width: 93%;
display: flex;
justify-content: space-between;
align-items: center;
color: #333333;
font-size: 28rpx;
border-bottom: 1rpx #F1F2F5 solid;
padding-top: 30rpx;
.boxFlex {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 30rpx;
.sub {
width: 520rpx;
}
.sub-progress {
color: #2692FC;
font-size: 22rpx;
}
.sub-try {
width: 112rpx;
height: 40rpx;
border-radius: 8px;
border: 2px solid #00BA7C;
color: #00BA7C;
font-size: 24rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
//内容右侧图片
.iconImage {
width: 30rpx;
height: 30rpx;
}
//最外层大盒子
.catalogue {
margin-top: 10rpx;
}
</style>
<!-- .literature {
color: #111111;
font-size: 32rpx;
margin-top: 40rpx;
font-weight: 500;
}
.catalogueSub {
width: 70%;
margin-top: 40rpx;
}
.stepsSub {
margin-top: 30rpx;
}
.catalogueWork {
height: 100rpx;
border-bottom: 1rpx #F1F2F5 solid;
display: flex;
justify-content: space-between;
align-items: center;
.title {
color: #111111;
font-size: 28rpx;
}
.goImage {
width: 24rpx;
height: 24rpx;
}
} -->
使用了resize()也不生效, 求大佬解答...
回复
1个回答
test
2024-07-16
不清楚你描述的 uni-collapse 不生效是指的什么意思。
如果说是点击这点面板之后没有完全展开，那么需要你逐级去触发折叠面板的 resize 方法。很可能是因为 最外部的折叠面板没有resize 或者 内部的折叠面板没有resize。
大概看了一下你贴上来的代码，我只看到了你去触发了最外部折叠面板（uni-collapse accordion ref="collapse"）的 resize 方法。
...
watch: {
catalogueListTwo: { //监听 二级 目录
handler(newValue, oldValue) {
this.$refs.collapse.resize();
},
deep: true
},
catalogueListTaskTwo: { //监听 二级 任务
handler(newValue, oldValue) {
this.$refs.collapse.resize();
},
deep: true
}
}但是我看到你内部的折叠面板(<uni-collapse accordion ref="collapseTwo")的resize方法。
并且你内部的折叠面板里的内容也是循环渲染出来的，所以如果内部面板的高度没有更新的话，外部的折叠面板更新了也没有展开全部内容。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容