微信小程序实现折叠面板
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
微信小程序实现折叠面板的更多相关文章
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 微信小程序(微信应用号)组件讲解
这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...
- 微信小程序开发初探
一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所 ...
- 原创:从零开始,微信小程序新手入门宝典《一》
为了方便大家了解并入门微信小程序,我将一些可能会需要的知识,列在这里,让大家方便的从零开始学习:一:微信小程序的特点张小龙:张小龙全面阐述小程序,推荐通读此文: 小程序是一种不需要下载.安装即可使用的 ...
- 微信小程序之ES6与事项助手
由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码 ...
- 不一样的角度 解读微信小程序
不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙 ...
- 微信小程序 开发 微信开发者工具 快捷键
微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到 ...
随机推荐
- linux C file format analysis
c语言文件格式 source file file.c C source, ASCII text pretreatment 预处理文件 file.i C source, ASCII text assem ...
- SCRIPT438: 对象不支持“trim”属性或方法
关于ie9以下不支持trim()方法 可以在自己封装的框架中加入如下.或直接调用也行. if(!String.prototype.trim) { String.prototype.trim = fun ...
- linux中如何配置vim的别名为vi?
答: 向~/.bashrc中添加如下内容: alias vi=vim
- kotlin 委托类的初始化函数
import java.beans.AppletInitializer import kotlin.reflect.KProperty fun main(arg: Array<String> ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_20-页面静态化-静态化测试-填写页面DataUrl
启动前端和后端.轮播图的数据url可以在这里修改. 找到列表页面的轮播图,然后点击编辑 随便更新一个地址测试 提交后数据再次编辑 发现url没有变化 在pageService里面update方法把更新 ...
- 【ASP.NET Core学习】远程过程调用 - gRPC使用
本文介绍在gRPC使用,将从下面几个方面介绍 什么是RPC 什么时候需要RPC 如何使用gRPC 什么是RPC RPC是Remote Procedure Call简称,翻译过来是远程过程调用.它是一个 ...
- Nginx+Keepalived高可用负载均衡
转自 https://www.jianshu.com/p/da26df4f7d60 Keepalived+Nginx实现高可用Web负载均衡 Master backup vip(虚拟IP) 192.1 ...
- 申请 Let's Encrypt 通配符 HTTPS 证书
目录 一.背景知识 1.1.什么是通配符证书 1.2.什么是 Let's Encrypt 二.证书申请(certbot) 2.1.系统确定 2.2.工具安装 2.3.证书申请 2.4.证书查看 2.5 ...
- HTTPS工作原理 HTTP协议数据结构分析 HTTP和HTTPS协议的不同之处
HTTP有以下三个缺点:无加密,无身份认证,无完整性保护,因此所谓的HTTPS,它其实就是HTTP+加密+身份认证+完整性保护.HTTPS并不是一种新的协议,在通信接口使用了SSL和TLS协议而已.H ...
- AssassinGo: 基于Go的高并发可拓展式Web渗透框架
转载自FreeBuf.COM AssassinGo是一款使用Golang开发,集成了信息收集.基础攻击探测.Google-Hacking域名搜索和PoC批量检测等功能的Web渗透框架,并且有着基于Vu ...