小程序-列表展开收起动画效果

效果如下

c3bb8bfaf1d6ea2e9bc9572c423227a4.gif

方法一：

<view class='fold'> 
  <scroll-view scroll-y class='scrollFold'>
    <view style='top:{{ischangeFold?480:(dataList.length>5?0:btnHeight)}}rpx;' catchtap='changeFold'>展开</view>
    <text wx:for='{{dataList}}' wx:key='index' style='transition: transform 300ms linear 0ms;transform: translateY({{ischangeFold?550-index:((dataList.length<5)?(index==0?(5-dataList.length)*120+70:(5-dataList.length+index)*120+70):index*120+70)}}rpx); transform-origin: 50% 50% 0px;margin-bottom:{{index==dataList.length-1?100:""}}rpx;z-index:{{-index}};'>{{item.text}}</text>
  </scroll-view>
</view>

方法二：

<view class='fold' style='height:{{!ischangeFold?((dataList.length>5)?114*5 +66 :(dataList.length)*114 + 66):114}}rpx'>
          <scroll-view scroll-y class='scrollFold'>
            <view wx:if='{{!ischangeFold}}' style='width:100%;text-align:right;color:#626262;font-size:26rpx;position:absolute;top:0;z-index:100;left:0;' catchtap='closeChangeFold'> <image style='width:26rpx;height:14rpx;vertical-align:middle;margin-right:10rpx;' src='/image/indexCloseLong.png'></image> 收起</view>
            <--bindconfirm是当前点击项相应的事件-->
            <text wx:for='{{dataList}}' catchtap='{{ischangeFold?"changeFold":"bindconfirm"}}' wx:for-item='itemOp' wx:for-index='indexOp' wx:key='' style='transition: transform 300ms linear 0ms;transform: translateY({{ischangeFold?(indexOp)*5:indexOp*114 + 66}}rpx); transform-origin: 50% 50% 0px;z-index:{{20-indexOp}};'
              data-text='{{itemOp.text}}' data-indexop='{{indexOp}}'>{{itemOp.text}}</text>
          </scroll-view>
        </view>

css:

page{
  background: pink;
}
.fold{
  width: 670rpx;
  height: 720rpx;
  position: fixed;
  bottom: 200rpx;
  left: 50%;
  transform: translateX(-50%);
}

.scrollFold{
  height:100%;
  width: 100%;
}
.fold text{
  position: absolute;
  line-height: 90rpx;
  font-size: 32rpx;
  width: 100%;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
  display: block;
  text-align: center;

}
.fold view{
  position: fixed;
  width: 100%;
  text-align: right;
  font-size: 36rpx;
  z-index: 10;
}

js:

const dataList = [{ text: '11111111111' }, { text: '22222222222222' }, { text: '3333333333' }, { text: '22222222222222' }, { text: '3333333333' }, { text: '22222222222222' }, { text: '3333333333' }];
const width = getApp().globalData.width;

Page({
  data: {
    dataList: dataList,
    ischangeFold: true
  },
  onShow: function () {
    
  },
  click:function(){
    this.setData({
      click: !this.data.click
    })
  },
  changeFold: function () {
    let _this = this;
    wx.createSelectorQuery().selectAll('.fold_text').boundingClientRect(data => {
      console.log('===', data);
      //获取屏幕显示区域的高度
      this.setData({
        ischangeFold: !_this.data.ischangeFold,
      });
      console.log(_this.data.btnHeight);
    }).exec()
  },
  closeChangeFold: function () {
    this.setData({
      ischangeFold: true,
    });
  },
})

方法一是写来练手的，方法二是写在项目里的，相比来说，方法一的效果好点，但是框的高度写死得情况下，如果下一层有点击事件，下层点击事件会不生效；方法二是框的高度随列表大小改变的，使用的灵活一些

最后编辑于：2018.12.04 20:29:47