先上效果圖：
1.展開狀態

2.顯示狀態

3.收回狀態

下面是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,
        })
    },
})
 

有什麼問題歡迎大家指出，一起學習，一起進步。