uni-app的uni-collapse折疊組件樣式修改
下面是修改后的樣式

<uni-collapse accordion class="ze"  v-model="isCollapse" @click="toggleCollapse">
				<!-- 因?yàn)閘ist默認(rèn)帶一條分隔線，所以使用 titleBorder="none" 取消面板的分隔線 -->
					<uni-collapse-item title-border="none" :border="false"
					 class="ze_item"
					 >
						<template v-slot:title>
							<uni-list>
								<uni-list-item title="閱讀理解-作者思維知識點(diǎn)"
								 :show-extra-icon="true" :extra-icon="isCollapse ? extraIcon : CloseFold"
								 :show-badge="false"
								 >
								</uni-list-item>
							</uni-list>
						</template>
						<view class="content">
							<uni-list>
								<uni-list-item title="閱讀理解-作者思維知識點(diǎn)"
								 :show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}"
								 :show-badge="false"
								 >
								 <template v-slot:footer>
									<image class="slot-image" src="/static/img/Answerbutton.png" mode="widthFix"></image>
								</template>
								</uni-list-item>
								<uni-list-item title="閱讀理解-作者思維知識點(diǎn)"
								 :show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}"
								 :show-badge="false"
								 >
								</uni-list-item>
								<uni-list-item title="閱讀理解-作者思維知識點(diǎn)"
								 :show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}"
								 :show-badge="false"
								 >
								</uni-list-item>
							</uni-list>
							
						</view>
					</uni-collapse-item>
				<uni-collapse-item title-border="none" title="手風(fēng)琴效果" class="ze_item"
				thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
				>
						<text>折疊內(nèi)容</text>
				</uni-collapse-item>
				<uni-collapse-item title-border="none" title="禁用狀態(tài)" class="ze_item"
				thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
				>
					<text>折疊內(nèi)容</text>
				</uni-collapse-item>
			</uni-collapse>
// js
return {
			isCollapse: false, // 展開。后續(xù)會(huì)在循環(huán)的時(shí)候加入open字段表示當(dāng)前參數(shù)已經(jīng)展開，這里只							做展示
			extraIcon: {color: '#FF6A28',size: '26',type: 'minus-filled'}, // 展開的icon
			CloseFold:{color: '#FF6A28',size: '26',type: 'plus-filled'} // 關(guān)閉的icon
}
methods: {
		toggleCollapse() {
			this.isCollapse = !this.isCollapse;
		},
}

修改的css

// 修改折疊的默認(rèn)樣式 list列表的上下border
	/deep/.uni-collapse,/deep/.uni-list--border:after,/deep/.uni-list--border-top,/deep/.uni-list--border-bottom{
		background-color: transparent;
	}
	// 左側(cè)圖標(biāo)往右便宜
	/deep/.uni-list-item__icon {
		margin-right: 30rpx;
	}
	// 去掉父元素往左偏移
	/deep/.uni-list-item__container {
		padding-left: 0px;
	}
	.content{
		// 展開子元素往左偏移
		/deep/.uni-list-item__container {
			padding-left: 7.5px;
		}
	}
	// 手動(dòng)添加的圖標(biāo)
	.slot-image,/deep/.slot-image{
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// margin-right: 10px;
		width: 28rpx;
		height: 28rpx;
	}
	// 去掉原生的折疊的圖標(biāo)
	/deep/.custom_none{
		display: none;
	}
	// 去掉原生的圖標(biāo)旋轉(zhuǎn)
	/deep/.custom_uni-collapse-item__title-arrow-active{
		    transform: rotate(0deg);
	}

修改一下uni-collapse的uni-collapse-item

<view v-if="showArrow"
				:class="{ 'uni-collapse-item__title-arrow-active': isOpen, 'uni-collapse-item--animation': showAnimation === true }"
				class="uni-collapse-item__title-arrow custom_uni-collapse-item__title-arrow-active">
				<uni-icons class="custom_none" :color="disabled?'#ddd':'#bbb'" size="14" type="bottom" />
				<image class="slot-image" src="/static/img/Answerbutton.png" mode="widthFix"></image>
			</view>

設(shè)計(jì)圖樣式

修改后的樣式

就這樣吧…文章來源地址http://www.zghlxwxcb.cn/news/detail-699972.html

到了這里，關(guān)于uni-app 折疊自定義的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！