Example of implementation method of folding panel of WeChat applet

小云云
Release: 2018-02-02 10:22:14
Original
5057 people have browsed it

This article mainly introduces the relevant information of WeChat applet to realize folding panel in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Implementation Principle

By controlling the display and hiding of the details part, the folding effect is achieved, and at the same time, the downward arrow on the right is switched.

Rendering

Example of implementation method of folding panel of WeChat applet

WXML


##

<!--pages/accordion/accordion.wxml-->
<view class="tui-accordion-content">
 <view class="tui-menu-list {{isShowFrom1 ? &#39;tui-shangjiantou&#39; : &#39;tui-xiajiantou&#39;}}">
  <view bindtap="showFrom" data-param="1"><text>表单</text></view>
  <view class="tui-accordion-from {{isShowFrom1 ? &#39;&#39; : &#39;tui-hide&#39;}}">
   <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 ? &#39;tui-shangjiantou&#39; : &#39;tui-xiajiantou&#39;}}">
  <view bindtap="showFrom" data-param="2"><text>轮播图片</text></view>
  <view class="{{isShowFrom2 ? &#39;&#39; : &#39;tui-hide&#39;}}">
   <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 ? &#39;tui-shangjiantou&#39; : &#39;tui-xiajiantou&#39;}}">
  <view bindtap="showFrom" data-param="3"><text>文字排版</text></view>
  <view class="{{isShowFrom3 ? &#39;&#39; : &#39;tui-hide&#39;}}">
   <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>
Copy after login

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;
}
Copy after login

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
  });
 }
})
Copy after login

Summary:

1 Each accordion requires a Boolean value variables to control;

2 When controlling the hiding and display of details, switch the arrows on the right accordingly;
3 The showFrom function optimizes the modified ternary expression of each Boolean variable.

Related recommendations:


Pure CSS3 cool 3D folding panel animation effects_html/css_WEB-ITnose

##jQuery In-depth analysis of folding panel_jquery

Simple folding menu (folding panel) effect code implemented by jQuery_jquery

The above is the detailed content of Example of implementation method of folding panel of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template