国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序實現折疊面板

2019-11-19 14:26:17
字體:
來源:轉載
供稿:網友

本文實例為大家分享了微信小程序MUI折疊面板的具體代碼,供大家參考,具體內容如下

實現原理

通過控制詳情部分的顯示隱藏,來實現折疊效果,同時切換右側向下箭頭。

效果圖

折疊面板效果圖

WXML

<!--pages/accordion/accordion.wxml--><view class="tui-accordion-content"> <view class="tui-menu-list {{isShowFrom1 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">  <view bindtap="showFrom" data-param="1"><text>表單</text></view>  <view class="tui-accordion-from {{isShowFrom1 ? '' : 'tui-hide'}}">   <view class="tui-menu-list tui-clear">    <text class="tui-input-name">input</text>    <input placeholder="普通輸入框"></input>   </view>    <view class="tui-menu-list tui-clear">    <text class="tui-input-name">input</text>    <input placeholder="普通輸入框"></input>   </view>    <view class="tui-menu-list tui-clear">    <text class="tui-input-name">input</text>    <input placeholder="普通輸入框"></input>   </view>    <view class="tui-menu-list tui-clear" style="text-align:center;padding-top:20rpx;">    <button size="mini" type="primary">確定</button>    <button size="mini" style="margin-left:10rpx;">取消</button>   </view>  </view> </view> <view class="tui-menu-list {{isShowFrom2 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">  <view bindtap="showFrom" data-param="2"><text>輪播圖片</text></view>  <view class="{{isShowFrom2 ? '' : 'tui-hide'}}">   <swiper class="tui-swiper" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}"      autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"      indicator-color="#fff" indicator-active-color="red">    <block wx:for-items="{{banner_url}}">     <swiper-item>      <block wx:if="{{item}}">       <image class="tui-img" src="{{item}}" mode="aspectFill"/>      </block>      <block wx:else>       <image src="../../images/default_pic.png" mode="aspectFill"></image>      </block>     </swiper-item>    </block>   </swiper>  </view> </view> <view class="tui-menu-list {{isShowFrom3 ? 'tui-shangjiantou' : 'tui-xiajiantou'}}">  <view bindtap="showFrom" data-param="3"><text>文字排版</text></view>  <view class="{{isShowFrom3 ? '' : 'tui-hide'}}">   <view class="tui-h1"><text>H1 標簽內文字大小及加粗樣式</text></view>   <view class="tui-h2"><text>H2 標簽內文字大小及加粗樣式</text></view>   <view class="tui-h3"><text>H3 標簽內文字大小及加粗樣式</text></view>   <view class="tui-h4"><text>H4 標簽內文字大小及加粗樣式</text></view>   <view class="tui-h5"><text>H5 標簽內文字大小及加粗樣式</text></view>   <view class="tui-h6"><text>H6 標簽內文字大小及加粗樣式</text></view>   <view class="tui-p"><text>P 標簽內文字大小及加粗樣式</text></view>  </view> </view></view>

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下載

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 昔阳县| 合阳县| 景洪市| 建水县| 体育| 沁水县| 永春县| 平邑县| 林州市| 靖宇县| 丹寨县| 云龙县| 孟村| 宁远县| 仁怀市| 新民市| 乐都县| 绥中县| 台州市| 邓州市| 桂林市| 独山县| 台江县| 张家界市| 开远市| 浦北县| 延吉市| 屏南县| 娄烦县| 甘洛县| 阜宁县| 冀州市| 黔西| 武冈市| 深水埗区| 德安县| 昌邑市| 山阴县| 攀枝花市| 双流县| 凯里市|