收藏
回答

如何解决wx.createAnimation()动画中设置高度,第一次没有动画效果的问题?

调试基础库:2.10.3

api: wx.createAnimation()


js:



Page({


  /**
   * 页面的初始数据
   */
  data: {
    list: ['1''2''3'],
    expand: true
  },
  wrapH: 0,
  itemH: 0,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options{


  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const query = wx.createSelectorQuery();
      query.select('#wrap').boundingClientRect()
      query.select('#item1').boundingClientRect()
      query.exec((rect)=>{
        console.log(rect);
        this.wrapH = rect[0].height;
        this.itemH = rect[1].height;
      });
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {


  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {


  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {


  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {


  },


  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {


  },


  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {


  },
  expand() {
    let height;
    
    if (this.data.expand) {
      height = this.itemH;
    } else {
      height = this.wrapH;
    }
    const animation = wx.createAnimation({
      timingFunction: 'ease',
      duration:500,
      // transformOrigin: '0 0 0',
      // delay: 1000
    });
    animation.height(height);
    animation.step();
    const aaa = animation.export()
    this.setData({
      animation: aaa,
      expand: !this.data.expand
    });
  }
})


wxml:

<view id="wrap" class="wrap" animation="{{animation}}" >
  <view id="{{'item'+index}}" class="a {{'item'+index}}" wx:for="{{list}}" wx:key="index" >
    <view>{{item}}</view>
  </view>
</view>
<view class="expand" catchtap="expand" wx:if="{{list.length > 0 }}"></view>
回答关注问题邀请回答
收藏

2 个回答

  • 卢霄霄
    卢霄霄
    10-14

    .wrap 有height这个属性吗

    10-14
    有用 1
    回复
  • 玉衡
    玉衡
    10-14

    已解决,感谢楼上的同学

    query.exec((rect)=>{
            console.log(rect);
            this.wrapH = rect[0].height;
            this.itemH = rect[1].height;
    // 添加高度
            this.setData({wrapH: this.wrapH});
          });
    

    wxml中设置高度

    <view id="wrap" class="wrap" animation="{{animation}}" style="height:{{wrapH}}px;">//查询到高度之后,赋值上去
      <view id="{{'item'+index}}" class="a {{'item'+index}}" wx:for="{{list}}" wx:key="index" >
        <view>{{item}}</view>
      </view>
    </view>
    <view class="expand" catchtap="expand" wx:if="{{list.length > 0 }}"></view>
    
    10-14
    有用
    回复
登录 后发表内容
问题标签