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. linux C file format analysis

    c语言文件格式 source file file.c C source, ASCII text pretreatment 预处理文件 file.i C source, ASCII text assem ...

  2. SCRIPT438: 对象不支持“trim”属性或方法

    关于ie9以下不支持trim()方法 可以在自己封装的框架中加入如下.或直接调用也行. if(!String.prototype.trim) { String.prototype.trim = fun ...

  3. linux中如何配置vim的别名为vi?

    答: 向~/.bashrc中添加如下内容: alias vi=vim

  4. kotlin 委托类的初始化函数

    import java.beans.AppletInitializer import kotlin.reflect.KProperty fun main(arg: Array<String> ...

  5. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_20-页面静态化-静态化测试-填写页面DataUrl

    启动前端和后端.轮播图的数据url可以在这里修改. 找到列表页面的轮播图,然后点击编辑 随便更新一个地址测试 提交后数据再次编辑 发现url没有变化 在pageService里面update方法把更新 ...

  6. 【ASP.NET Core学习】远程过程调用 - gRPC使用

    本文介绍在gRPC使用,将从下面几个方面介绍 什么是RPC 什么时候需要RPC 如何使用gRPC 什么是RPC RPC是Remote Procedure Call简称,翻译过来是远程过程调用.它是一个 ...

  7. Nginx+Keepalived高可用负载均衡

    转自 https://www.jianshu.com/p/da26df4f7d60 Keepalived+Nginx实现高可用Web负载均衡 Master backup vip(虚拟IP) 192.1 ...

  8. 申请 Let's Encrypt 通配符 HTTPS 证书

    目录 一.背景知识 1.1.什么是通配符证书 1.2.什么是 Let's Encrypt 二.证书申请(certbot) 2.1.系统确定 2.2.工具安装 2.3.证书申请 2.4.证书查看 2.5 ...

  9. HTTPS工作原理 HTTP协议数据结构分析 HTTP和HTTPS协议的不同之处

    HTTP有以下三个缺点:无加密,无身份认证,无完整性保护,因此所谓的HTTPS,它其实就是HTTP+加密+身份认证+完整性保护.HTTPS并不是一种新的协议,在通信接口使用了SSL和TLS协议而已.H ...

  10. AssassinGo: 基于Go的高并发可拓展式Web渗透框架

    转载自FreeBuf.COM AssassinGo是一款使用Golang开发,集成了信息收集.基础攻击探测.Google-Hacking域名搜索和PoC批量检测等功能的Web渗透框架,并且有着基于Vu ...