用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序动画:高度渐变,left渐变

Rolan 2019-8-9 00:32

 今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变。  实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需要跟 ...

 今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变。

 

  实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需要跟随子元素right的高度来改变父元素box的高度的,并且子元素right的高度不确定,我们需要先获取子元素的高度。

  在改变高度的时候出错了,高度未改变。在测试时发现

1
2
3
4
5
6
7
8
9
10
var box = wx.createAnimation(option); // 创建动画
var obj = wx.createSelectorQuery();
obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
  box.height(rect.height).step();//改变父元素高度
  console.log(1);
}).exec();
console.log(2);
that.setData({
  box: box.export()
});

  先打印的竟然是2,原来是一个异步操作,这就可以理解为什么执行无效了。改成这样

1
2
3
4
5
6
7
obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
  var box = wx.createAnimation(option); // 创建动画
  box.height(rect.height).step();//改变父元素高度
  that.setData({
    box: box.export()
  });
}).exec();

  想着应该没问题了,但是遇到了另外一个坑,父元素的高度一下子变成了预设的效果,并没有Animation的渐变效果。本身父元素的高度是由left这个子元素撑起来的,给父元素预设一个高度这个问题就解决了。渐变效果就实现了。

   源码解析

wxml

1
2
3
4
5
6
<view class="box" animation="{{box}}">
  <view class="anl">left</view>
  <view class="anr" animation="{{anr}}">right</view>
</view>
<button bindtap="add" wx:if="{{down}}">goDown</button>
<button bindtap="goback" wx:else>goBack</button>

 

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* pages/userinfo/index.wxss */
.box{
  position: relative;
  height: 200rpx;
  overflow: hidden;
  text-align: center;
  color: white;
  font-size: 120rpx;
}
.anl{
  height: 200rpx;
  background-color: red;
}
.anr{
  background-color: green;
  height: 400rpx;
  width: 100%;
  position: absolute;
  left: 100%;
  top: 0;
}
.add{
  background-color: yellow;
  height: 100rpx;
}

  

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// pages/userinfo/index.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    box: {},
    anr: {},
    down:true
  },
  add: function () {
    this.setData({
      down: false
    });
    var that = this;
    let option = {
      duration: 1000, // 动画执行时间
      timingFunction: 'ease-in' // 动画执行效果
    };
    var anr = wx.createAnimation(option);// 创建动画
    this.anr=anr;
    anr.left(0).step();
    that.setData({
      anr: anr.export()
    });
    var obj = wx.createSelectorQuery();
    obj.select('.anr').boundingClientRect(function (rect) {//获取子元素高度
      var box = wx.createAnimation(option); // 创建动画
      that.box=box;
      box.height(rect.height).step();//改变父元素高度
      that.setData({
        box: box.export()
      });
    }).exec();
  },
  goback:function(){
    this.setData({
      down:true
    });
    this.box.height('200rpx').step();
    this.setData({
      box:this.box.export()
    });
    this.anr.left('750rpx').step();
    this.setData({
      anr:this.anr.export()
    })
  }
})

  

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Steven Hanth 来自: cnblogs