【移動應(yīng)用開發(fā)技術(shù)】微信小程序折疊面板如何實現(xiàn)

【移動應(yīng)用開發(fā)技術(shù)】微信小程序折疊面板如何實現(xiàn)

在下給大家分享一下微信小程序折疊面板如何實現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！實現(xiàn)原理通過控制詳情部分的顯示隱藏，來實現(xiàn)折疊效果，同時切換右側(cè)向下箭頭。效果圖WXML<!s/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-h2"><text>H1

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-h3"><text>H2

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-h4"><text>H3

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-h5"><text>H4

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-h6"><text>H5

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-h7"><text>H6

標簽內(nèi)文字大小及加粗樣式</text></view>

<view

class="tui-p"><text>P

標簽內(nèi)文字大小及加粗樣式</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;

}JSvar

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