本文实例为大家分享了微信小程序梅折叠面板的具体代码,供大家参考,具体内容如下
<>强实现原理
通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头。
效果图
WXML
& lt; !——页面/手风琴accordion.wxml——比;
& lt;视图类=皌ui-accordion-content”比;
& lt;视图类=" tui-menu-list {{isShowFrom1 & # 63;“tui-shangjiantou”: tui-xiajiantou}}”在
& lt;视图bindtap=" showFrom " data-param=?”祝辞& lt; text>表单& lt;/text> & lt;/view>
& lt;视图类=" tui-accordion-from {{isShowFrom1 & # 63;”:tui-hide}}”在
& lt;视图类=" tui-menu-list tui-clear”比;
& lt;文本类=" tui-input-name "祝辞input
& lt;输入占位符="普通输入框”祝辞& lt;/input>
& lt;/view>
& lt;视图类=" tui-menu-list tui-clear”比;
& lt;文本类=" tui-input-name "祝辞input
& lt;输入占位符="普通输入框”祝辞& lt;/input>
& lt;/view>
& lt;视图类=" tui-menu-list tui-clear”比;
& lt;文本类=" tui-input-name "祝辞input
& lt;输入占位符="普通输入框”祝辞& lt;/input>
& lt;/view>
& lt;视图类=" tui-menu-list tui-clear”比;
& lt;按钮大?懊阅恪崩嘈?爸鳌痹谌范? lt;/button>
& lt;按钮大?"迷你"祝辞取消& lt;/button>
& lt;/view>
& lt;/view>
& lt;/view>
& lt;视图类=" tui-menu-list {{isShowFrom2 & # 63;“tui-shangjiantou”: tui-xiajiantou}}”在
& lt;视图bindtap=" showFrom " data-param=?”祝辞& lt; text>轮播图片& lt;/text> & lt;/view>
& lt;视图类=" {{isShowFrom2 & # 63;”:tui-hide}}”在
& lt;偷窃者类=" tui-swiper " indicator-dots=" {{indicatorDots}}“垂直="{{垂直}}
播放="{{播放}}"间隔时间="{{间隔}}"="{{时间}}
indicator-color=" # fff“indicator-active-color=昂焐痹?
& lt;块wx:项=" {{banner_url}}”在
& lt; swiper-item>
& lt;块wx:如果="{{项}}”在
& lt;图像类=" tui-img " src=" https://www.yisu.com/zixun/{{项}}”模式=" aspectFill "/比;
& lt;/block>
& lt;块wx: else>
& lt;图像src=" https://www.yisu.com/images/default_pic.png "模式=癮spectFill祝辞& lt;/image>
& lt;/block>
& lt;/swiper-item>
& lt;/block>
& lt;/swiper>
& lt;/view>
& lt;/view>
& lt;视图类=" tui-menu-list {{isShowFrom3 & # 63;“tui-shangjiantou”: tui-xiajiantou}}”在
& lt;视图bindtap=" showFrom " data-param=?”祝辞& lt; text>文字排版& lt;/text> & lt;/view>
& lt;视图类=" {{isShowFrom3 & # 63;”:tui-hide}}”在
& lt;视图类=" tui-h2 "祝辞& lt; text> H1标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-h3 "祝辞& lt; text> H2标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-h4 "祝辞& lt; text> H3标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-h5 "祝辞& lt; text> H4标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-h6 "祝辞& lt; text> H5标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-h7 "祝辞& lt; text>代替标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;视图类=" tui-p "祝辞& lt; text> P标签内文字大小及加粗样式& lt;/text> & lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
之前
wxs
/*页/手风琴/手风琴。wxs */.tui-accordion-content {
保证金:10 px;
边界:1 px固体# c8c7cc;
border - radius: 5 px;
溢出:隐藏;
}
.tui-accordion-from {padding-left: 0;}
.tui-accordion-from输入{
身高:80 rpx;
行高:80 rpx;
}
.tui-input-name {
身高:80 rpx;
浮:左;
宽度:200 rpx;
}
之前
JS
var横幅=要求(“. ./. ./src/js/banner.js”);
页面({
数据:{
isShowFrom1:假的,
isShowFrom2:假的,
isShowFrom3:假的,
indicatorDots:没错,
垂直:假的,
播放:没错,
区间:3000年,
持续时间:800
banner_url: banner.bannerList
}，
onLoad:功能(选项){
}，
showFrom (e) {
var参数=e.target.dataset.param;
this.setData ({
isShowFrom1: param==1 & # 63;(this.data。isShowFrom1 & # 63;假:真):假的,
isShowFrom2: param==2 & # 63;(this.data。isShowFrom2 & # 63;假:真):假的,
isShowFrom3: param==3 & # 63;(this.data。isShowFrom3 & # 63;假:真):假的
}）;
}
}）
