uni-app 折叠自定义-编程知识

uni-app 折叠自定义

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'}, // 展开的iconCloseFold:{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>