小编给大家分享一下微信小程序折叠面板如何实现，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
在秦安等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计制作、做网站 网站设计制作按需制作,公司网站建设,企业网站建设,品牌网站制作,全网营销推广,成都外贸网站建设公司,秦安网站建设费用合理。
实现原理
通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。
效果图
WXML
表单
input
input
input
确定
取消
轮播图片
文字排版
H1 标签内文字大小及加粗样式
H2 标签内文字大小及加粗样式
H3 标签内文字大小及加粗样式
H4 标签内文字大小及加粗样式
H5 标签内文字大小及加粗样式
H6 标签内文字大小及加粗样式
P 标签内文字大小及加粗样式
WXSS
/* pages/accordion/accordion.wxss */
.tui-accordion-content{
margin: 10px;
border: 1px solid #c8c7cc;
border-radius: 5px;
overflow: hidden;
}
.tui-accordion-from{padding-left: 0;}
.tui-accordion-from input{
height: 80rpx;
line-height: 80rpx;
}
.tui-input-name{
height: 80rpx;
float: left;
width: 200rpx;
}JS
var banner = require("../../src/js/banner.js");
Page({
data: {
isShowFrom1: false,
isShowFrom2: false,
isShowFrom3: false,
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 3000,
duration: 800,
banner_url: banner.bannerList
},
onLoad: function (options) {
},
showFrom(e){
var param = e.target.dataset.param;
this.setData({
isShowFrom1: param == 1 ? (this.data.isShowFrom1 ? false : true) : false,
isShowFrom2: param == 2 ? (this.data.isShowFrom2 ? false : true) : false,
isShowFrom3: param == 3 ? (this.data.isShowFrom3 ? false : true) : false
});
}
})总结：
1 每一个折叠面板需要一个布尔值变量来控制；
2 在控制详情隐藏和显示时，要将右侧的箭头对应切换；
3 showFrom函数对每一个布尔值变量的修改三目表达式的优化。
以上是“微信小程序折叠面板如何实现”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
网站题目：微信小程序折叠面板如何实现
文章源于：
http://bjjierui.cn/article/jpjddi.html
