小程序可滑动弧形进度条(小程序实现文字循环滚动动画)
类别:编程学习 浏览量:1264
时间:2022-01-14 02:32:14 小程序可滑动弧形进度条
小程序实现文字循环滚动动画本文通过实例为大家分享了小程序实现文字循环滚动的具体代码,供大家参考,具体内容如下
解决问题:
1、文字循环播放特效
2、小程序退出、隐藏后台动画停止(已解决)
效果:
代码:
wxml
<view animation="{{animation}}" class="animation"> 919测试使用——小程序循环播放~~~ </view>
wxss
.animation{ width: 100%; transform: translateX(100%); position: fixed; top: 45%; font-size: 16px; font-weight: bold; }
最后js
/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.bindAnimation(); }, bindAnimation(){ var this_ = this; var animation = wx.createAnimation({ duration: 5000, timingFunction: 'linear', transformOrigin:"100% 0 0" }) animation.translateX('-100%').step(); this.setData({ animation:animation.export(), }) //设置循环动画 this.animation = animation; setInterval(function(){ //第二个动画 文字位置初始化 this.Animation2(); //延迟播放滚动动画(效果会更好点) setTimeout(function(){ this.animation.translateX('-100%').step(); this.setData({ animation: animation.export(), }) }.bind(this),200); }.bind(this),5000); }, /** * 第二个动画 文字位置初始化 */ Animation2(){ var this_ = this; var animation2 = wx.createAnimation({ duration: 0, timingFunction: 'linear', transformOrigin:"100% 0 0" }) animation2.translateX('100%').step(); this_.setData({ animation:animation2.export(), }) }, /** * 解决小程序退出、隐藏后台动画停止 */ onHide: function () { //解决小程序退出、隐藏后台动画停止 //重新触发动画方法即可 this.bindAnimation(); },
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序多人编辑表格(微信小程序实现固定表头、列表格组件)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 能自动点赞的小程序(python实现QQ空间自动点赞功能)
- 微信小程序图片加特效(微信小程序实现可实时改变转速的css3旋转动画实例代码)
- 微信小程序function怎么使用(微信小程序在{{ }}中直接使用函数的方法示例)
- dedecms织梦小程序插件(批量删除织梦dedecms文档搜索关键词的方法)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序左右翻页效果(微信小程序实现九宫格效果)
- 微信小程序如何请求服务器数据(微信小程序学习笔记之页面配置与路由方式)
- 用python制作一个简单的小程序(Python简单基础小程序的实例代码)
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- ui小程序布局(AmazeUI 输入框组的示例代码)
- 微信小程序数学公式(微信小程序计算器实例详解)
- 微信小程序scrollview 截图(微信小程序scroll-view不能左右滑动问题的解决方法)
- 微信小程序静态页面详情(微信小程序基础教程之echart的使用)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
热门推荐
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- dedecms栏目静态化(dedecms TAG标签按栏目显示的方法)
- 如何注册asp.net 4.0 到iis
- java上传图片压缩包(js实现多张图片打包成zip)
- 查看IIS网站的进程ID
- Linux 下如何检查内存使用率(Linux 下如何检查内存使用率)
- sqlserver中根据日期时间获取秒数(sql server编写通用脚本实现获取一年前日期的方法)
- mysql意外查不到数据(MySQL 丢失数据的原因及解决)
- flow布局(详解为什么设置overflow为hidden可以清除浮动带来的影响)
- nginx最新配置(配置nginx 重定向到系统维护页面)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9