uni-app 折叠自定义

news2024/11/18 9:34:28

uni-app的uni-collapse折叠组件样式修改
下面是修改后的样式

<uni-collapse accordion class="ze"  v-model="isCollapse" @click="toggleCollapse">
				<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
					<uni-collapse-item title-border="none" :border="false"
					 class="ze_item"
					 >
						<template v-slot:title>
							<uni-list>
								<uni-list-item title="阅读理解-作者思维知识点"
								 :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="阅读理解-作者思维知识点"
								 :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="阅读理解-作者思维知识点"
								 :show-extra-icon="true" :extra-icon="{type:'smallcircle-filled',color: '#FF6A28',size: '14'}"
								 :show-badge="false"
								 >
								</uni-list-item>
								<uni-list-item title="阅读理解-作者思维知识点"
								 :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="手风琴效果" class="ze_item"
				thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
				>
						<text>折叠内容</text>
				</uni-collapse-item>
				<uni-collapse-item title-border="none" title="禁用状态" class="ze_item"
				thumb="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
				>
					<text>折叠内容</text>
				</uni-collapse-item>
			</uni-collapse>
// js
return {
			isCollapse: false, // 展开。后续会在循环的时候加入open字段表示当前参数已经展开，这里只							做展示
			extraIcon: {color: '#FF6A28',size: '26',type: 'minus-filled'}, // 展开的icon
			CloseFold:{color: '#FF6A28',size: '26',type: 'plus-filled'} // 关闭的icon
}
methods: {
		toggleCollapse() {
			this.isCollapse = !this.isCollapse;
		},
}

修改的css

// 修改折叠的默认样式 list列表的上下border
	/deep/.uni-collapse,/deep/.uni-list--border:after,/deep/.uni-list--border-top,/deep/.uni-list--border-bottom{
		background-color: transparent;
	}
	// 左侧图标往右便宜
	/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;
		}
	}
	// 手动添加的图标
	.slot-image,/deep/.slot-image{
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// margin-right: 10px;
		width: 28rpx;
		height: 28rpx;
	}
	// 去掉原生的折叠的图标
	/deep/.custom_none{
		display: none;
	}
	// 去掉原生的图标旋转
	/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>