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. php中_initialize()函数与 __construct()函数的区别说明

    _initialize()方法是在任何方法执行之前,都要执行的,当然也包括 __construct构造函数. 也就是说如果存在_initialize()函数,调用对象的任何方法都会导致_initial ...

  2. P2047 [NOI2007]社交网络(洛谷)

    题目描述 在社交网络 ( Social Network ) 的研究中,我们常常使用图论概念去解释一些社会现象.不妨看这样的一个问题:在一个社交圈子里有 nn 个人,人与人之间有不同程度的关系.我们将这 ...

  3. iTerm 2打造ssh完美连接Linux服务器快捷方法

    iTerm 2打造ssh完美连接Linux服务器快捷方法 2019年05月02日 10:40:19 Mars0908 阅读数 213更多 个人分类: Mac下开发   版权声明:本文为博主原创文章,遵 ...

  4. python3 高级编程(三) 使用@property

    @property装饰器就是负责把一个方法变成属性调用的. @property广泛应用在类的定义中,可以让调用者写出简短的代码,同时保证对参数进行必要的检查,这样,程序运行时就减少了出错的可能性 cl ...

  5. Win10安装多个MySQL实例

    Win10安装MySQL-8.0.15 1.下载mysql-8.0.15-winx64.zip安装包,地址如下 https://cdn.mysql.com//Downloads/MySQL-8.0/m ...

  6. 不能在jsp页面<c:choose>对标签中使用<!---->进行注释

    jsp页面<c:choose>标签中使用<!---->进行注释,访问出现异常,如下: 标签范围:

  7. 图像欧拉数计算 matlab实现

    EUL = C - H 其中EUL表示欧拉数  C表示对象数 H表示孔洞数 欧拉数常用来识别数字: 识别数字 8 ,8 的欧拉数为 -1 ,不同于0,1,2,3,4,5,6,7,9 close all ...

  8. [Kevin英语情报局]那些年我们说过的中式英语

    一. blonde hair 金色头发 grey hair 白头发 baijiu 白酒 white wine 白葡萄酒 I don't think it's right 我认为不正确 I'm chin ...

  9. redis数据库安装

        一. 简单介绍: REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用A ...

  10. [转帖]Linux cpufreq 机制了解

    Linux cpufreq 机制了解 https://www.cnblogs.com/armlinux/archive/2011/11/12/2396780.html 引用文章链接: http://w ...