uni-collapse里套uni-collapse在uniapp的小程序端不生效?

<!--课程详情 目录-->

<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.jpg',

videoIcon: this.imagePrefix + 'videoIcon.jpg', //视频图标

audioIcon: this.imagePrefix + 'audioIcon.jpg', //音频图标

imageTextIcon: this.imagePrefix + 'imageTextIcon.jpg', //图文图标

workIcon: this.imagePrefix + 'workIcon.jpg', //视频图标

workmanship: this.imagePrefix + 'workmanship.jpg', //视频图标

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()也不生效, 求大佬解答...


回答:

不清楚你描述的 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方法。

并且你内部的折叠面板里的内容也是循环渲染出来的,所以如果内部面板的高度没有更新的话,外部的折叠面板更新了也没有展开全部内容。

以上是 uni-collapse里套uni-collapse在uniapp的小程序端不生效? 的全部内容, 来源链接: utcz.com/p/933156.html

回到顶部