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
})
}
}

最终效果:

转载:https://www.cnblogs.com/adobe-lin/p/9564549.html

微信小程序实现折叠面板的更多相关文章

  1. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  2. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  3. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  4. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  5. 微信小程序开发初探

    一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所 ...

  6. 原创:从零开始,微信小程序新手入门宝典《一》

    为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...

  7. 微信小程序之ES6与事项助手

    由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码 ...

  8. 不一样的角度 解读微信小程序

    不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙 ...

  9. 微信小程序 开发 微信开发者工具 快捷键

    微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到 ...

随机推荐

  1. HRNET网络结构简单分析

    hrnet相关的两篇文章 CVPR2019   Deep High-Resolution Representation Learning for Human Pose Estimation High- ...

  2. <JavaScript> 寄生继承详解

    // 将原型继承和非原型继承组合为一体的继承方式叫做组合继承,但是这种方法的继承是有一点小缺陷的,下级函数继承了无用的属性,所以我们有了寄生继承来解决污染问题; //创建上级构造函数-食物 funct ...

  3. kotlin陪伴对象

    在kotlin中并没有静态类成员的概念,但并不等于实现类似于静态类成员的功能,陪伴对象可以解决这个问题 fun main(arg: Array<String>) { val create ...

  4. 【工具】sqlmap 中文手册 使用教程

    日期:2019-07-28 09:27:27 更新: 作者:Bay0net 介绍:自己翻译了一下,做个备忘. 0x01. 基本信息 官网 sqlmap: automatic SQL injection ...

  5. Eclipse安装Spring Tools Suites

    第一种:离线安装 下载地址:较高版本 http://spring.io/tools/sts/all/ 比较低版本:http://spring.io/tools/ggts/all 选择适合自己Eclip ...

  6. MyISAM与InnoDB之间的区别

    区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...

  7. Python将多个excel表格合并为一个表格

    Python将多个excel表格合并为一个表格 生活中经常会碰到多个excel表格汇总成一个表格的情况,比如你发放了一份表格让班级所有同学填写,而你负责将大家的结果合并成一个.诸如此类的问题有很多.除 ...

  8. 机器学习实战笔记——KNN

    机器学习实战——读书笔记 书籍奉上

  9. 用cmd命令加密文件夹

    比如新建一个叫“大学财务”的文件夹,我希望这个文件夹下的内容是加密隐藏的. 查看的时候需要点击“大学财务.bat”这个文件,然后输入设置的密码即可. Cls @ECHO OFF title Folde ...

  10. Java面试(一)

    2 什么是java虚拟机: 可以执行java字节码的虚拟机进程,而不需要为每一个平台单独重写或重新编译.虚拟机知道底层指令长度. 3 JDK,JRE区别: JRE是Java虚拟机,可以解释JAVA字节 ...