微信小程序动态设定背景样式、滚动至顶部、简单动画的实例

微信小程序动态设定背景样式、滚动至顶部、简单动画的实例

效果演示

wxml

<view>
    <button bindtap="backgroundColor">动态设定背景样式</button>
    <view class="content"></view>
    <button bindtap="scrollTo">滚动页面</button>
    <button bindtap="animation">动画演示</button>
    <view animation="{{animationData}}" class="animation"></view>
</view>

js

下面是js中的绑定事件

backgroundColor:function(){
      wx.setBackgroundColor({
        backgroundColor: '#00ff00',
      })
    },
    scrollTo:function(){
      wx.pageScrollTo({
        //距离顶部的像素值
        scrollTop:0,
        //滚动用时
        duration: 200,
      })
    },
    animation:function(){
      //先创建动画对象
      var animation=wx.createAnimation({
        delay: 0,
        //动画演示长度
        duration:1000,
        //动画效果
        timingFunction:'ease',    
      });
      this.animation=animation;
      //x、y轴放大两倍（括号里可以为小数），旋转90度，然后完成
      animation.scale(2,2).rotate(90).step();
      //最后导出
      this.setData({
        animationData:animation.export()
      });
    },

wxss

.content{
    height: 500px;
    background-color: rosybrown;
}
.animation{
    background-color: red;
    height: 100rpx;
    width: 100rpx;
    margin: 50rpx 100rpx;
}