实现原理
通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头。
效果图
WXML
<!--pages/accordion/accordion.wxml--> <view class=tui-accordion-content> <view class=tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}> <view bindtap=showFrom data-param=1><text>表单</text></view> <view class=tui-accordion-from {{isShowFrom1 ? '' : 'tui-hide'}}> <view class=tui-menu-list tui-clear> <text class=tui-input-name>input</text> <input placeholder=普通输入框></input> </view> <view class=tui-menu-list tui-clear> <text class=tui-input-name>input</text> <input placeholder=普通输入框></input> </view> <view class=tui-menu-list tui-clear> <text class=tui-input-name>input</text> <input placeholder=普通输入框></input> </view> <view class=tui-menu-list tui-clear style=text-align:center;padding-top:20rpx;> <button size=mini type=primary>确定</button> <button size=mini style=margin-left:10rpx;>取消</button> </view> </view> </view> <view class=tui-menu-list {{isShowFrom2 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}> <view bindtap=showFrom data-param=2><text>轮播图片</text></view> <view class={{isShowFrom2 ? '' : 'tui-hide'}}> <swiper class=tui-swiper indicator-dots={{indicatorDots}} vertical={{vertical}} autoplay={{autoplay}} interval={{interval}} duration={{duration}} indicator-color=#fff indicator-active-color=red> <block wx:for-items={{banner_url}}> <swiper-item> <block wx:if={{item}}> <image class=tui-img src={{item}} mode=aspectFill/> </block> <block wx:else> <image src=../../images/default_pic.png mode=aspectFill></image> </block> </swiper-item> </block> </swiper> </view> </view> <view class=tui-menu-list {{isShowFrom3 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}> <view bindtap=showFrom data-param=3><text>文字排版</text></view> <view class={{isShowFrom3 ? '' : 'tui-hide'}}> <view class=tui-h1><text>H1 标签内文字大小及加粗样式</text></view> <view class=tui-h2><text>H2 标签内文字大小及加粗样式</text></view> <view class=tui-h3><text>H3 标签内文字大小及加粗样式</text></view> <view class=tui-h4><text>H4 标签内文字大小及加粗样式</text></view> <view class=tui-h5><text>H5 标签内文字大小及加粗样式</text></view> <view class=tui-h6><text>H6 标签内文字大小及加粗样式</text></view> <view class=tui-p><text>P 标签内文字大小及加粗样式</text></view> </view> </view> </view>
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函数对每一个布尔值变量的修改三目表达式的优化。
相关推荐:
纯CSS3炫酷3D折叠面板动画特效_html/css_WEB-ITnose
jQuery实现的简单折叠菜单(折叠面板)效果代码_jquery
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。