重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
微信小程序實現折疊面板
本文實例為大家分享了微信小程序MUI折疊面板的具體代碼，供大家參考，具體內容如下
網站建設哪家好，找成都創新互聯！專注于網頁設計、網站建設、微信開發、重慶小程序開發公司、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了洪洞免費建站歡迎大家使用！
實現原理
通過控制詳情部分的顯示隱藏，來實現折疊效果，同時切換右側向下箭頭。
效果圖
WXML
表單 input input input 輪播圖片 文字排版 H1 標簽內文字大小及加粗樣式 H2 標簽內文字大小及加粗樣式 H3 標簽內文字大小及加粗樣式 H4 標簽內文字大小及加粗樣式 H5 標簽內文字大小及加粗樣式 H6 標簽內文字大小及加粗樣式 P 標簽內文字大小及加粗樣式
WXSS
/* pages/accordion/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;
}
JS
var banner = require("../../src/js/banner.js");
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下載
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。
當前名稱：微信小程序實現折疊面板
標題路徑：http://www.xueling.net.cn/article/ijjoop.html