getEject:function(){ var arr =[ { name: "木紫槿", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "细节", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "决定", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "成败", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "新数据1", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "新数据2", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "新数据3", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "新数据4", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, { name: "新数据5", imageUrl: "https://wx.qlogo.cn/mmopen/vi_32/YE9cSBvaamKEGaYfD5vwj5ekwbdOQHWofR0FGNluicictus1hQAVe758oNpn0iaxvt4h7MBdWAvwbDXmick34RKWtg/132", state: "已购买" }, ] var count = 0; var array = new Array(); var that = this; var timer1 = setInterval(function(){ var time = Date.parse(new Date()) if(count<4){ array.push(arr[count]); that.setData({ eject: array }) }else{ clearInterval(timer1) } count++; },1000) var index = 4; var arrIndex = 0; var timer2 = setInterval(function () { if (index >= arr.length&&count>4) { index = 0 var eject = that.data.eject; eject[arrIndex] = arr[index] that.setData({ eject: eject }) index++; } else if (index < arr.length && count >4) { var eject = that.data.eject; eject[arrIndex] = arr[index] that.setData({ eject: eject }) index++; } if (arrIndex<3){ arrIndex++ }else{ arrIndex = 0 } }, 1000) },
HTML 代码:
<view id="eject"> <view class="eject-notice" wx:for="{{eject}}" wx:key="key"> <image src="{{item.imageUrl}}"></image> <text>{{item.name}}</text> <view class="state">{{item.state}}</view> </view> </view>
CSS 样式:
.eject-notice{ height: 30px; display: flex; justify-content: flex-start; align-items: center; border-radius: 15px; background: rgba(0,0,0,0.6); position: fixed; left: 8px; bottom: 300rpx; z-index: 9999; color: #fff; font-size: 12px; animation: ejectIn 4s infinite; -webkit-animation: ejectIn 4s infinite; /* animation-iteration-count: 1; */ animation-timing-function:linear; -webkit-animation-timing-function: linear; opacity: 0; } .eject-notice image{ width: 25px; height: 25px; margin: 5px; border-radius: 50%; margin-right: 10px; } .eject-notice .state{ height: 30px; border-radius: 15px; background-color: #FF3545; color: #fff; font-size: 12px; display: flex; justify-content: center; align-items: center; padding: 0 10px; margin-left: 5px; } @keyframes ejectIn{ 0%{ left: -200px; bottom: 300px; } 10%{ left: 50px; bottom: 300px; } 16%{ left: -10px; opacity: 1; } 18%{ left: 10px; } 60%{ bottom:375px; opacity: 1; } 80%{ bottom: 412.5px; opacity: 0; } 100%{ left: 10px; bottom: 450px; opacity: 0; } } @-webkit-keyframes ejectIn{ 0%{ left: -200px; bottom: 300px; } 10%{ left: 50px; bottom: 300px; } 16%{ left: -10px; opacity: 1; } 18%{ left: 10px; } 60%{ bottom: 375px; opacity: 1; } 80%{ bottom:412.5px; opacity: 0; } 100%{ left: 10px; bottom: 450px; opacity: 0; } }
小程序的有些复杂,不能像web一样操作dom删除之前的节点,只能控制循环的数组的值。
H5的话,一个定时器就够了。
相关推荐
触屏版会根据打开的用户地区进行自动城市更新,弹出提示,是否回到当前城市。 登陆注册 用户可以用QQ或者手机号码登陆触屏版进行购物,减少繁琐的输入选项。 在线搜索 触屏版首页有搜索框,用户可以输入自己喜欢的...
实例090 弹出提示对话框并重定向网页 133 3.8 弹出网页对话框 134 实例091 弹出全屏显示的网页模式对话框 134 实例092 网页拾色器 136 实例093 日期选择器 138 3.9 无边框窗口 140 实例094 全屏显示...
修改扩展界面支持库三,解决单击卷帘菜单后导致日期框不能弹出下拉窗口的BUG。 4. 修改XP风格支持库,解决GDI资源泄露,以及在使用通用组件库六时组合框标题出现重影的BUG。 5. 修改扩展界面支持库一,解决树形框...
1.1 弹出窗口控制 2 实例001 打开新窗口显示广告信息 2 实例002 定时打开窗口 4 实例003 通过按钮创建窗口 5 实例004 自动关闭的广告窗口 6 实例005 控制弹出窗口居中显示 7 实例006 弹出的窗口之Cookie控制 9 实例...
重点二:方便稳定、重复购物的老用户 2.1可以参考淘宝的已买宝贝页面的思路,加上一个【再购买】按键; 重点三:送礼的用户; 3.1考虑是否帮用户加上贺卡,贺卡的内容由用户来填写(改日咨询黄鹏); 3.2如何为用户...
如果没有对应的数据,则会弹出对话框进行提示。点击显示全部即可查看所有数据。 * **修改按钮** 在右侧表格中进行修改,再点击保存。 * **保存按钮** 点击即可在数据库中保存数据。 * **统计按钮** 在日历中选择日期...
重点二:方便稳定、重复购物的老用户 2.1可以参考淘宝的已买宝贝页面的思路,加上一个【再购买】按键; 重点三:送礼的用户; 3.1考虑是否帮用户加上贺卡,贺卡的内容由用户来填写(改日咨询黄鹏); 3.2如何为用户...
(2)选择开始菜单中的“所有程序\Apache Tomcat 6.0\Monitor Tomcat”命令,这时在windows的系统托盘中会显示标识Tomcat服务器启动状态的图标,如果显示为,则说明Tomcat服务器没有启动,这时可以在该图标上单击...
202. 发表只限某用户查看的帖子时,若对应用户不存在时将会提示错误 207. 允许设定用户一定积分值则不再需要验证码,包括发帖,短消息及编辑帖子 215. 后台风格模板选择,可以选择是否纯HTML输出,或是使用JS...
如果没有对应的数据,则会弹出对话框进行提示。点击显示全部即可查看所有数据。 修改按钮 在右侧表格中进行修改,再点击保存。 保存按钮 点击即可在数据库中保存数据。 统计按钮 在日历中选择日期,再点击统计。...
如果没有对应的数据,则会弹出对话框进行提示。点击显示全部即可查看所有数据。 修改按钮** 在右侧表格中进行修改,再点击保存。 保存按钮** 点击即可在数据库中保存数据。 统计按钮** 在日历中选择日期,再点击...
已完成历史使命,临时标签的方案已整合入@最新工具。 第三方华为共享OneHop 辅助制作第三方华为一碰传标签的小工具其实最重要的功能是让你的华为手机对准一碰传标签,让标签可以...时刻关注程序弹出的中文提示 手机未
(6) 安装程序出现格式化提示对话框,要求用户选择格式化时的文件系统。按下【F】键格式化为NTFS分区,按下【ESC】键可以选择不同的磁盘分区。这里强烈建议用户选择NTFS格式化此分区。 (7) 格式化磁盘分区后,...
单击商品信息的冻结按钮和解冻按钮,系统弹出的提示信息进行确认后即可实现冻结和解冻的操作。 1.2.3 订单管理 单击【订单管理】按钮,界面右侧自动显示相应的订单列表。该界面可以对订单信息进行系统管理。 单击...
6.2.4 DHTML弹出窗口 6.2.5 可检索的图像和图形文本 6.3 搜索引擎友好的HTML 6.3.1 HTML结构化单元 6.3.2 内容突出和表格 6.3.3 帧 6.3.4 使用表单 6.4 使用自定义标记语言来生成搜索引擎友好的HTML 6.5 ...
②在弹出对话框里改变乐谱的前景与背景图片 说明:可以将喜欢的小图片拷贝到Textures/Background 和Textures/Foreground,然后在程序 中选择相应项,就可以看到自已所需要的前景背景。为了刷新效率考虑,所用前背景...
* 个别用户的图片另存为对话框无法弹出. * 在 Google+ 页面点击 "Start a Hangout" 后, 弹出 C++ Runtime 错误. * 点击 Facebook 连接提示登录. [主框架] * 解决部分系统中浏览器无法启动的问题. * 非自动登录...
6.2.4 DHTML弹出窗口 6.2.5 可检索的图像和图形文本 6.3 搜索引擎友好的HTML 6.3.1 HTML结构化单元 6.3.2 内容突出和表格 6.3.3 帧 6.3.4 使用表单 6.4 使用自定义标记语言来生成搜索引擎友好的HTML 6.5 Flash和AJAX...
优化 后台业务弹出框位置;优化 职位置顶排序问题;优化 分站地区级数问题;优化 后台菜单;优化 会员日志;优化 企业会员中心微信招聘页面复制分享链接;优化 地区选择提示大类不能为空的问题;优化 地区改为无限级...