微信小程序之内容的动画展开与收回

程序之内容的动画展开与收回"/>

微信小程序之内容的动画展开与收回

先上效果图：
1.展开状态

2.显示状态

3.收回状态

先说一下实现原理：
1.给列表一个动画效果。
2.使用animotion来创建动画。
3.使列表的高度从0到n开始变化，使用setTimeout做延时处理。
4.收回则与上面相反。
5.animotion的用法请查看官方文档
传送门：.createAnimation.html

下面是wxml代码：

<view class='container'><button class='text' bindtap="{{ stopBtn ? 'showContent' : 'hideContent' }}">内容的展开与收回</button> <view wx:for="{{companyInfo}}" wx:if="{{choose}}" class='companyInfo' wx:for-index="idx" wx:key="0" animation='{{animationData}}'><view class='companyInfo-left'><text>{{itempany_base}}</text><text>{{item.content}}</text></view><view class='companyInfo-right'><button class='small-button' wx:if="{{idx > 1}}" id="{{idx}}" data-set="{{item.content}}" disabled='{{stopBtn}}'>拨打</button><button class='small-button' wx:else bindtap='copyToClipboard' id="{{idx}}" data-content="{{item.content}}" disabled='{{stopBtn}}'>复制</button></view></view>
</view>

然后是wxss代码：

.container {} 
.text {width: 100%;position: relative;height: 100rpx;line-height: 100rpx;border: 1px solid #ccc;
}
panyInfo{display: flex;flex-direction: row;width: 100%;line-height: 60rpx;height: 60rpx;justify-content: space-between;align-items: center;
}
panyInfo-left{display: flex;flex-direction: row;line-height: 60rpx;height: 60rpx;font-size: 30rpx;
}
panyInfo-right{display: flex;align-items: center;line-height: 60rpx;height: 60rpx;
}
.small-button{font-size: 24rpx;background: lightgreen;height: 50rpx;display: flex;justify-content: center;align-items: center;
}

最后是js代码：

const app = getApp()Page({data: {choose: false,animationData: {},stopBtn: true,//动画未执行完之前禁用按钮companyInfo: [{company_base: '公司名称：',content: '某某公司'}, {company_base: '公司地址：',content: '某某地址'}, {company_base: '公司电话：',content: '1234567890'}, {company_base: '公司座机：',content: '987654'}]},onLoad: function () {},showContent: function (e) {// 用that取代this，防止setTimeout内使用this出错var that = this;// 创建一个动画实例var animation = wx.createAnimation({// 动画持续时间duration: 500,// 定义动画效果，当前是匀速timingFunction: 'linear'})// 将该变量赋值给当前动画that.animation = animation//用step()完成一个动画， 高度为0，透明度为不可见animation.height("0").opacity(0).step()// 用setData改变当前动画that.setData({// 通过export()方法导出数据animationData: animation.export(),// 改变显示条件choose: true})// 设置setTimeout来改变高度以及透明度，实现有感觉的展开setTimeout(function () {animation.height("60rpx").opacity(1).step({ duration: 500 })that.setData({animationData: animation.export(),})}, 50)//在动画时间禁用按钮setTimeout(function () {that.setData({stopBtn: false})}, 500)},// 隐藏hideContent: function (e) {var that = this;var animation = wx.createAnimation({duration: 500,timingFunction: 'linear'})that.animation = animationanimation.height(0).opacity(0).step({ duration: 500 })that.setData({animationData: animation.export()})setTimeout(function () {animation.height("60rpx").step();that.setData({animationData: animation.export(),choose: false,})}, 500)//收回动画开始禁用按钮that.setData({stopBtn: true,})},
})

有什么问题欢迎大家指出，一起学习，一起进步。