微信小程序---缓慢展开和收起效果（不需要wx:if控制实现）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序---缓慢展开和收起效果（不需要wx:if控制实现）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、能实现效果：

效果一：

微信小程序展开和收起,微信小程序,微信小程序,小程序,前端

点击中间问题，在中间缓慢展开，将下面往下撑开，点击再次收起效果

效果二：

微信小程序展开和收起,微信小程序,微信小程序,小程序,前端

点击添加商品，缓慢向下展开，点击收起，缓慢将下面收起效果

二、实现方法：

1、实现的原理：

通过height高度来控制展开或收起，当不需要展示时，高度为0，超过的部分用overflow: hidden;来隐藏，可以通过该方法来让需要展示的页面隐藏起来，然后显示的时候，将height条件去掉，在加上transition来控制动画即可

2、效果一具体实现方法：

wxml：

<view class='help'>
  <view class='help_item' wx:for="{{questList}}" wx:key="index">
    <view class='title' data-index='{{index}}' catchtap='panel'>
      <view class='title_1'>{{item.title}}</view>
      <view class='title_2'><image src="/pages/images/common/{{item.t ? 'up':'down'}}.png"></image></view>
    </view>
    <view class='detail' style="height:{{ item.t?'':0}}">{{item.content}}</view>
  </view>
</view>

js部分:

data: {
    showIndex: 10,
    questList: [{
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }, {
      title: 'Q：这是问题',
      content: "A：答案内答案内容答案内容答案内容答案内容答案内容答案内容容容答案内容容容答案内容容",
      t:false,
    }]
  },
panel: function (e) {
    this.data.questList[e.currentTarget.dataset.index].t = !this.data.questList[e.currentTarget.dataset.index].t
    this.setData({
      questList:this.data.questList
    })
    if (e.currentTarget.dataset.index != this.data.showIndex) {
      this.setData({
        showIndex: e.currentTarget.dataset.index,
      })
    } 
    else {
      this.setData({
        showIndex: 10
      })
    }
  },

wxss：

.help {
  width: 700rpx;
  margin: 0 auto;
}

.help .help_item {
  margin: 10rpx auto;
}

.help .help_item .title {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
  /* background: #e2e2e2; */
  border-bottom: 1rpx solid #eeeeee;
  display: flex;
}

.help .help_item .title .title_1 {
  width: 630rpx;
  height: 80rpx;
  padding-left: 20rpx;
}

.help .help_item .title .title_2 {
  width: 50rpx;
  height: 60rpx;
  text-align: center;

}

.help .help_item .title .title_2 image {
  width: 40rpx;
  height: 40rpx;
  margin: 10rpx auto;
}

.help .help_item .detail {
  margin: 10rpx auto;
  font-size: 25rpx;
  line-height: 40rpx;
  font-size: 30rpx;
  height: 300rpx;
  transition: height 1s;
  -moz-transition: height 1s;
  /* Firefox 4 */
  -webkit-transition: height 1s;
  /* Safari and Chrome */
  -o-transition: height 1s;
  /* Opera */
  overflow: hidden;
}

3、效果二实现方法：

原理实现是一样的，只需要将主要部分即可。

.cart-add-box {
  height: 140rpx;//设置好展开需要到什么高度
  transition: height 0.5s;//设置好动画效果
  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  -o-transition: height 0.5s;
  overflow: hidden;//高度为0时，直接隐藏内容
}

<view class='cart-add-box' style="height:{{ is_add_code?'':0}}">内容：小马哥</view>

通过is_add_code：true/false来展示效果即可。

方法简单，只需要明白实现的原理即可实现自己喜欢的效果文章来源地址https://www.toymoban.com/news/detail-584673.html

到了这里，关于微信小程序---缓慢展开和收起效果（不需要wx:if控制实现）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！