收藏
回答

微信小程序轮播图支持淡入淡出效果吗?

问题模块
API和组件

问题描述

      微信小程序中的轮播图支持淡入淡出效果。查看swiper组件,并没有提供animation 属性,对轮播动画做处理。

请问小程序支持这样的效果吗?


最后一次编辑于  2017-10-27  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • cid
    cid
    06-20

    目前不支持animation 属性

    只有easing-function 的合法值default,linear,easeInCubic,easeOutCubic,easeInOutCubic

    可以自定一个

    index.wxml:
    <view class="banner">
      <image class="pic" src="../../images/banner1.jpg" animation="{{num==0?showpic:hidepic}}"/>
      <image class="pic" src="../../images/banner2.jpg" animation="{{num==1?showpic:hidepic}}"/>
      <image class="pic" src="../../images/banner3.jpg" animation="{{num==2?showpic:hidepic}}"/></view>
    index.wxss:
    .banner{    width:750rpx;    height:600rpx;    position: relative;
    }.pic{    display:block;    width:750rpx;    height:600rpx;   
        position:absolute; 
        top:0;    left:0;
    }
    index.js:
    Page({  data:{        setTime:'',        num:0,        showpic:null,        hidepic:null,
      },  onLoad:function(){    var _this=this;    var num=_this.data.num;    var animation= wx.createAnimation({}) //创建一个动画实例
        _this.setData({      //创建一个计时器
            setTime:setInterval(function(){
                _this.setData({                num:num++
                })            if(num>2){
                  num=0;
                }           //淡入
                animation.opacity(1).step({                  duration:1500
                }) //描述动画
                _this.setData({                showpic:animation.export()
                }) //输出动画
              //淡出
                animation.opacity(0).step({duration:1500})
                _this.setData({hidepic:animation.export()})
          },4000)
        })
      }
    })


    06-20
    赞同 1
    回复
  • 遥远不过时光
    遥远不过时光
    2018-07-19

    请问,问题解决了吗?

    2018-07-19
    赞同
    回复 1
    • 🐳 吃番茄的少年
      🐳 吃番茄的少年
      07-03

      自己写的animation动画,啊哈哈哈哈哈

      07-03
      回复