• 微信小程序文字轮播


    wxml:
    <view class="scorll" animation="{{animationData}}" bindtransitionend='animationend'>{{weatherWarn.title}}</view> 
    
    js:
     initAnimation: function(text){
        const animation = wx.createAnimation({
          duration: 5000,// 动画时长:5s
          timingFunction: 'linear',// 匀速
        });
        animation.translateX(parseInt(-130)).step();// -130,向左滚动130px
        this.setData({
          animationData: animation.export(), // 此处为动画
          animation: animation // 此处为方法
        });
      },
      animationend() {
        let that = this;
        // 复位容器的位置,准备开始下一次动画
        that.data.animation.translateX(120).step({duration: 0}); 
        that.setData({
            animationData: that.data.animation.export()
        }, ()=>{
          //开始新一轮动画
            let animation = wx.createAnimation({
                //此处以公告最长内容来设置动画持续时间(duration:决定整个动画播放的速度)
                duration: 8000,
                timingFunction: 'linear'
            });
            animation.translateX(-130).step();// -130代表向左滚动130px
            that.setData({
                animationData: animation.export()
            });
        });
    },

    因为页面上放的是文字所以就是文字的横向轮播,方向内容都是可以自己更改的

    引用:小程序横向滚动公告 无限循环播放动画 | 微信开放社区 (qq.com)

  • 相关阅读:
    Git
    canvas画布
    Node.js
    node的consoidate的插件统一
    使用nodejs去做一个验证码
    node的cookie-parser和express-session
    node的router路由。
    node的经典事件监听
    使用node去爬虫
    node的读写流
  • 原文地址:https://www.cnblogs.com/wanghuanl/p/15273445.html
Copyright © 2020-2023  润新知