先上效果圖:
1.展開狀態
2.顯示狀態
3.收回狀態
先說一下實現原理:
1.給列表一個動畫效果。
2.使用animotion來創建動畫。
3.使列表的高度從0到n開始變化,使用setTimeout做延時處理。
4.收回則與上面相反。
5.animotion的用法請查看官方文檔
傳送門:https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.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>{{item.company_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;
}
.companyInfo{
display: flex;
flex-direction: row;
width: 100%;
line-height: 60rpx;
height: 60rpx;
justify-content: space-between;
align-items: center;
}
.companyInfo-left{
display: flex;
flex-direction: row;
line-height: 60rpx;
height: 60rpx;
font-size: 30rpx;
}
.companyInfo-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 = animation
animation.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,
})
},
})
有什麼問題歡迎大家指出,一起學習,一起進步。