欢迎进入广州凡科互联网科技有限公司网站
全国服务热线
4000-399-000
联系我们
小程序大将来—微信小程序开发中,如何实现跑
时间: 2021-04-07 12:00 浏览次数:

跑马灯具体实际效果比较广泛,一般做电子器件商务接待类的手机微信微信小程序,全是选用,因而编号君今天刻意写逐一一篇文章,来教一下大家,如何去进行跑马灯具体实际效果,下面是编号君进行的具体实际效果,可以最先看一下!

制作方式十分简易,先方上编号,后面会对编号详细讲解


一、wxml网页页面的进行


view >   view >     view >       image src= {{adUrl}} >     /view
  /view
/view


网页页面有效合理布局十分简易,一个底端状况容器,加上一个广播节目综艺节目相片和相符合的跑马灯文字


二、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;
}



样式就这类,这儿编号君要带着大家回顾一下为前案例实例教程里讲解的内容


文字竖直垂直居中css样式要如何设置?
只务必将特点height与line-height设置成一样高度便可以

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 记时器如何运用?

这一方法是手机上手机微信手机微信微信小程序的api,马上运用便可以,和一切一切正常的定时执行实行器一样,setInterval务必传入两个关键主要参数,一个是回调函数涵数的方法,此外一个是每过量长期推行一次,在此项目中,大伙儿用的是字段名名关键主要参数interval,值设置为20


2. settimeout和setinterval()这两个都是腾讯提供的API,他们有什么区别吗?

settimeout隔逐一一段时间推行涵数且推行一次,场景便是大家可能希望一个每天每日任务隔逐一一段时间后再推行

etinterval()涵数是每过逐一一段时间便推行,就是会一直循环系统系统软件推行,倘若想停止的话可让用clearinterval


3. 跑马灯进行基本概念

计算跑马灯文字长度

每过逐一一段时间,移动一点间隔,导致移动

第三步:当清除显示信息屏,更改跑马灯的间隔为显示信息屏总宽,接着即可以再度循环系统系统软件第一步具体实际操作了

根据编号君说的这两步,阅读文章者可以去逐一比照编号,方法涵数runMarquee里面的编号逻辑性性就是推行以上三步,在此编号君都不过多描述了


以上就是跑马灯具体实际效果的所有流程,基本概念也不是无法,一个记时器,轻轻地松松即可以进行




Copyright © 广州凡科互联网科技有限公司 版权所有 粤ICP备10235580号
全国服务电话:4000-399-000   传真:021-45545458
公司地址:广州市海珠区工业大道北67号凤凰创意园