html5折叠面板的代码,微信小程序实现折叠面板

本文实例为大家分享了微信小程序MUI折叠面板的具体代码，供大家参考，具体内容如下

实现原理

通过控制详情部分的显示隐藏，来实现折叠效果，同时切换右侧向下箭头。

WXML

dion-content">

表单

dion-from {{isShowFrom1 ? '' : 'tui-hide'}}">

轮播图片

文字排版

H1 标签内文字大小及加粗样式

H2 标签内文字大小及加粗样式

H3 标签内文字大小及加粗样式

H4 标签内文字大小及加粗样式

H5 标签内文字大小及加粗样式

H6 标签内文字大小及加粗样式

P 标签内文字大小及加粗样式

WXSS

dion/accordion.wxss */

.tui-accordion-content{

margin: 10px;

border: 1px solid #c8c7cc;

border-radius: 5px;

overflow: hidden;

}

.tui-accordion-from{padding-left: 0;}

.tui-accordion-from input{

height: 80rpx;

line-height: 80rpx;

}

.tui-input-name{

height: 80rpx;

float: left;

width: 200rpx;

}

Page({

data: {

isShowFrom1: false,isShowFrom2: false,isShowFrom3: false,indicatorDots: true,vertical: false,autoplay: true,interval: 3000,duration: 800,banner_url: banner.bannerList

},onLoad: function (options) {

},showFrom(e){

var param = e.target.dataset.param;

this.setData({

isShowFrom1: param == 1 ? (this.data.isShowFrom1 ? false : true) : false,isShowFrom2: param == 2 ? (this.data.isShowFrom2 ? false : true) : false,isShowFrom3: param == 3 ? (this.data.isShowFrom3 ? false : true) : false

});

}

})

总结：

1 每一个折叠面板需要一个布尔值变量来控制；

2 在控制详情隐藏和显示时，要将右侧的箭头对应切换；

3 showFrom函数对每一个布尔值变量的修改三目表达式的优化。

DEMO

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

总结

以上是编程之家为你收集整理的微信小程序实现折叠面板全部内容，希望文章能够帮你解决微信小程序实现折叠面板所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！

html5折叠面板的代码,微信小程序实现折叠面板相关推荐

centos ftp服务器搭建_CentOS系统云服务器宝塔面板安装以及微信小程序服务器搭建...
宝塔面板(官网http://bt.cn)是一款非常优秀的服务器管理工具,无论是系统功能还是用户界面都做的很完善很人性化,是使用Linux服务器的站长不可多得的一款工具,本文以CentOS6.5-64位 ...
php一对多聊天程序代码,微信小程序实现一对多发消息
微信小程序中实现一对多发消息详解及实例代码微信小程序中各个界面之间的传值和通知比较蛋疼.所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心. 通知中心可以做到:1对多发消息,传递ob ...
服务器一般安装那种centos_CentOS系统云服务器宝塔面板安装以及微信小程序服务器搭建...
宝塔面板(官网http://bt.cn)是一款非常优秀的服务器管理工具,无论是系统功能还是用户界面都做的很完善很人性化,是使用Linux服务器的站长不可多得的一款工具,本文以CentOS6.5-64位 ...
制作电影影评网的html5代码,微信小程序之电影影评小程序制作代码
本文实例为大家分享了微信小程序制作影评小程序的具体代码,供大家参考,具体内容如下这是博主的项目包含的文件截图: 首先如图建立文件夹和page页面然后app.json页面更新代码如下: { &quo ...
代码微信小程序词典_微信小程序+ANKIWEB-学习语言的神器，背诵单词的利剑
大家好,我喜欢瞎倒腾的大野. 这个周末我又发现了一些有趣的东西,那就是把MDX格式的字典变成在线的工具: PART1 mdx-server-master 话不多说先上效果: 在线查词效果 python ...
效果最接近《羊了个羊》（卡牌堆叠游戏）的开源代码微信小程序开源了
⭐零.教程概述效果最接近<羊了个羊>(卡牌堆叠游戏)的开源代码,有数据库和关卡. 我写的程序是指卡牌堆叠游戏 ,效果与羊了个羊一致.本教程有已有两个版本. 本来是想着Fork多一点的时 ...
微信html字体颜色代码,微信小程序在text文本实现多种字体样式
这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下微信小程序比较特别,它的wxml只允许用自 ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
获取微信html代码,微信小程序云开发js抓取网页内容
最近在研究微信小程序的云开发功能.云开发最大的好处就是不需要前端搭建服务器,可以使用云端能力,从零开始写出来一个能上线的微信小程序,避免了买服务器的开销,对于个人来尝试练手微信小程序从前端到后台的开发 ...

html5折叠面板的代码,微信小程序实现折叠面板

html5折叠面板的代码,微信小程序实现折叠面板相关推荐

最新文章

热门文章