java 走马灯程序_微信小程序实现简单跑马灯效果
跑马灯效果比较常见,一般做电商类的小程序,都会用到,所以代码君今天特地写一篇文章,来教一下大家,如何去实现跑马灯效果,下面是代码君实现的效果,可以先看一下!
跑马灯效果的制作
制作方式很简单,先方上代码,后面会对代码详细讲解
一、wxml界面的实现
{{text}}
界面布局很简单,一个底部背景容器,加入一个广播图片和对应的跑马灯文字
二、wxss样式
.example {
display: block;
width: 100%;
height: 70rpx;
background-color: #f2f2f2;
line-height: 70rpx;
}
.marquee_box {
width: 100%;
position: relative;
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 0;
display: flex;
flex-direction: row;
}
.ad-image {
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
margin-top: 15rpx;
}
样式就这些,这里代码君要带着大家回顾一下以前教程里讲解的内容
1.文字居中css样式要如何设置?
只需要将属性height与line-height设置成一样高度即可
2.display属性
none:此元素不会被显示
block:两个元素自动换行
inline:两个元素靠在一起
inherit:继承父类
flex:多栏多列
三、xxx.js
Page({
data: {
text: '51淘甄貨,一个可以省钱的购物平台',
marqueePace: 1,//滚动速度
marqueeDistance: 0,//初始滚动距离
size: 14,
orientation: 'left',//滚动方向
interval: 20, // 时间间隔
adUrl: '../../images/ic_home_msg.png',
},
onShow: function () {
// 页面显示
var that = this;
var length = that.data.text.length * that.data.size;//文字长度
var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕宽度
that.setData({
length: length,
windowWidth: windowWidth,
});
that.runMarquee();// 水平一行字滚动完了再按照原来的方向滚动
},
runMarquee: function () {
var that = this;
var interval = setInterval(function () {
//文字一直移动到末端
if (-that.data.marqueeDistance < that.data.length) {
that.setData({
marqueeDistance: that.data.marqueeDistance - that.data.marqueePace,
});
} else {
clearInterval(interval);
that.setData({
marqueeDistance: that.data.windowWidth
});
that.runMarquee();
}
}, that.data.interval);
}
})
js里面需要讲解的比较多
1.setInterval 计时器如何使用?
setInterval(function(){
console.log("interval")
},1000)
这个方法是微信小程序的api,直接使用即可,和正常的定时器一样,setInterval需要传入两个参数,一个是回调的方法,另一个是每隔多久执行一次,在此项目中,我们用的是字段参数interval,值设置为20
2.settimeout和setinterval()这两个都是腾讯提供的API,他们有什么区别吗?
settimeout隔一段时间执行函数且执行一次,场景是我们可能希望一个任务隔一段时间后再执行
etinterval()函数是每隔一段时间便执行,就是会一直循环执行,如果想停止的话可以使用clearinterval
3.跑马灯实现原理
第一步:计算跑马灯文字长度
第二步:每隔一段时间,移动一点距离,产生移动
第三步:当移出屏幕,重置跑马灯的距离为屏幕宽度,然后就可以继续循环第一步操作了
根据代码君说的这几步,读者可以去一一对照代码,方法函数runMarquee里面的代码逻辑就是执行以上三步,在此代码君就不过多解释了
总结
以上就是跑马灯效果的整个流程,原理也不是很难,一个计时器,轻松就可以实现。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
java 走马灯程序_微信小程序实现简单跑马灯效果相关推荐
- 微信公众账号后台怎么解除小程序_微信小程序解除绑定 微信小程序怎么授权...
该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...
- 简单分享怎么开发自己的微信小程序_微信小程序快速制作步骤
小程序开发除了专业人士会自己开发之外,就是外包开发和模板搭建这两种方法. 外包小程序开发需要持续不断地与外包团队沟通,投入的精力也不少,总体价格不低,基本在万元左右, 最适合新手的还是小程序模板搭建啦 ...
- java实现音频播放小程序_微信小程序实现音频文件播放进度的实例代码
问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进 ...
- JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告
本文实例为大家分享了微信小程序实现首页弹出广告的具体代码,供大家参考,具体内容如下 这个微信小程序首页广告demo 仅供有需要的参考 .wxml this is ad //事件 catchtouchm ...
- java反编译微信小程序_微信小程序反编译的实现
首先声明:本文章仅供学习之用,不可它用. 一.前言 看到人家上线的小程序的效果,纯靠推测,部分效果在绞尽脑汁后能做出大致的实现,但是有些细节,费劲全力都没能做出来.很想一窥源码?查看究竟?看看大厂的前 ...
- php mysql特殊符号过滤微信小程序_微信小程序数据过滤(filter)方法
因为微信小程序的wxml和js的内部实现机制是分开编译的.所以在wxml是没办法调用js的函数的.这会导致WXML缺少一个我们常用的功能,那就是没有办法在视图层对数据做一些特殊处理.比如我们从后端获取 ...
- windows模拟微信小程序_微信小程序的开发环境搭建(Windows版本)
前言: 小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播:是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是并行的体系.2017年1 ...
- 同时存多个变量缓存 微信小程序_微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解...
微信小程序 缓存 关于本地缓存 1.wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage( ...
- 列表对象转数组 微信小程序_微信小程序——无限递归的层次列表
--上礼拜踩的坑 1.关于为什么不直接操作DOM对象? 因为微信小程序里没有document对象. 2.为什么坑了这多时间? 因为之前看了个过期的帖子,完美避开了解决方案. 下面进入正文,需求是在微信 ...
- webview 个人小程序_微信小程序新增Webview它是什么东西?
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
最新文章
- SharePoint 学习笔记(一)
- WeChat小程序授权机制踩坑请求头中设置cookie保持session
- Better Video Better Audio 的时代已经过去了吗?
- How is XT9 old transaction launched in GRE 210
- vue中如何使用vi-for限制遍历的条数?只查询前三条、查询4-6条怎么实现?
- mysql动态sql是什么,mysql中动态sql的一次实际应用
- channelsftp 上传文件为空_SpringBoot文件上传下载篇(九)
- 数据库备份checksum选项你会用么?
- java 拦截器实现接口调用频率限制
- Matlab图像识别/检索系列(8)—开源工具介绍之vlfeat
- Android直连MySQL数据库
- matlab如何设置自变量,matlab中如何指定一个函数的自变量
- H5页面调起地图导航
- 10.9 顾z校内互坑题
- Facebook第三方登录切换账号的问题
- 人工智能期末复习:聚类(详细笔记)
- mysql 日期减10分钟_获取当前时间减去10分钟的话SQL语句怎么写
- python基础课程设计项目_Python+MySQL开发医院网上预约系统(课程设计)一
- 【财富空间】人品,是最好的底牌
- 怎么禁止wps2012 自动升级到wps2013
热门文章
- SQL注入时order by 后面加数字的作用
- php session fixation,session fixation攻击
- ODrive0.5.1程序分析#4 闭环控制程序(run_closed_loop_control_loop)
- Android Framework实战开发-binder通信常见(oneway,in,out,inout)元素介绍及binder双向通信的实现
- 60.windbg----as、$u0(固定别名、自定义别名)
- OSChina 周四乱弹 ——程序员下班后8小时干嘛?啪啪啪
- 中国移动“梧桐杯”大数据应用创新大赛智慧金融初赛TOP1开源
- jQuery实现 手风琴图片切换效果( 超简单)
- python怎么转义_python怎么转义
- 永磁同步电机的矢量控制策略(八)一一一仿真模型搭建与源代码