微信小程序实现折叠面板
wxml:
<view class='help'> <view class='help_item'> <view class='title' data-index='1' catchtap='panel'> <view class='title_1'>便签小程序使用免费吗</view> <view class='title_2'><image src="../../images/{{showIndex == 1 ? 'up':'down'}}.png"></image></view> </view> <view class='detail' wx:if="{{showIndex == 1}}">便签小程序是一款免费应用,并承诺永不收费1</view> </view> <view class='help_item'> <view class='title' data-index='2' catchtap='panel'> <view class='title_1'>便签小程序使用免费吗</view> <view class='title_2'><image src="../../images/{{showIndex == 2 ? 'up':'down'}}.png"></image></view> </view> <view class='detail' wx:if="{{showIndex == 2}}">便签小程序是一款免费应用,并承诺永不收费2</view> </view> <view class='help_item'> <view class='title' data-index='3' catchtap='panel'> <view class='title_1'>便签小程序使用免费吗</view> <view class='title_2'><image src="../../images/{{showIndex == 3 ? 'up':'down'}}.png"></image></view> </view> <view class='detail' wx:if="{{showIndex == 3}}">便签小程序是一款免费应用,并承诺永不收费3</view> </view> </view>
wxss:
.help { width: 700rpx; margin: 0 auto; } .help .help_item { margin: 10rpx auto; } .help .help_item .title { font-size: 30rpx; height: 60rpx; line-height: 60rpx; background: #e2e2e2; display: flex; } .help .help_item .title .title_1 { width: 630rpx; height: 60rpx; padding-left: 20rpx; } .help .help_item .title .title_2 { width: 50rpx; height: 60rpx; text-align: center; } .help .help_item .title .title_2 image { width: 40rpx; height: 40rpx; margin: 10rpx auto; } .help .help_item .detail { margin: 10rpx auto; font-size: 25rpx; line-height: 40rpx; text-indent: 2em; }
js:
/** * 页面的初始数据 */ data: { showIndex:0 },
panel: function (e) { if (e.currentTarget.dataset.index != this.data.showIndex) { this.setData({ showIndex: e.currentTarget.dataset.index }) } else { this.setData({ showIndex: 0 }) } }
最终效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步