麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁(yè) > 課堂 > 小程序 > 正文

微信小程序?qū)崿F(xiàn)跑馬燈效果

2020-03-21 16:07:14
字體:
來(lái)源:轉(zhuǎn)載
供稿:網(wǎng)友

網(wǎng)上很多實(shí)現(xiàn)跑馬燈的文章,但是很多發(fā)現(xiàn)都是不行的,之一就是文字寬度居然是通過(guò)字符數(shù)*文字size計(jì)算,明顯是不準(zhǔn)確的計(jì)算方式。我看了下,發(fā)現(xiàn)可以通過(guò)計(jì)算控件寬度來(lái)精確計(jì)算文字寬度,這樣實(shí)現(xiàn)的跑馬燈是比較完善的。

效果如下:

微信小程序,跑馬燈

實(shí)現(xiàn)代碼如下:

wxml:

<view class="rollCon"> <view class='box'>  <view class='text'style='left:{{offsetLeft}}px' >{{text}}</view></view></view>

wxss:

.rollCon { position: fixed; top: 0; left: 0; width: 100%; height: 60rpx; z-index: 100; background: #fde8c7; font-size: 20rpx; line-height: 60rpx;}.box { width: 100%; position: relative;}.text { white-space: nowrap; position: absolute; top: 0; font-size: 24px;}

js:

Page({ /**  * 頁(yè)面的初始數(shù)據(jù)  */ data: {  interval: null,  text: '995年JavaScript誕生時(shí)如早一年',  pace: 1.2, //滾動(dòng)速度  interval: 20, //時(shí)間間隔  size: 24, //字體大小in px  length: 0, //字體寬度  offsetLeft: 0, //  windowWidth: 0, }, //根據(jù)viewId查詢view的寬度 queryViewWidth: function(viewId) {  //創(chuàng)建節(jié)點(diǎn)選擇器  return new Promise(function(resolve) {   var query = wx.createSelectorQuery();   var that = this;   query.select('.' + viewId).boundingClientRect(function(rect) {    resolve(rect.width);   }).exec();  }); }, //停止跑馬燈 stopMarquee: function() {  var that = this;  //清除舊的定時(shí)器  if (that.data != null) {   clearInterval(that.interval);  } }, //執(zhí)行跑馬燈動(dòng)畫 excuseAnimation: function() {  var that = this;  if (that.data.length > that.data.windowWidth) {   //設(shè)置循環(huán)   let interval = setInterval(function() {    if (that.data.offsetLeft <= 0) {     if (that.data.offsetLeft >= -that.data.length) {      that.setData({       offsetLeft: that.data.offsetLeft - that.data.pace,      })     } else {      that.setData({       offsetLeft: that.data.windowWidth,      })     }    } else {     that.setData({      offsetLeft: that.data.offsetLeft - that.data.pace,     })    }   }, that.data.interval);  } }, //開(kāi)始跑馬燈 startMarquee: function() {  var that = this;  that.stopMarquee();  //初始化數(shù)據(jù)  that.data.windowWidth = wx.getSystemInfoSync().windowWidth;  that.queryViewWidth('text').then(function(resolve) {   that.data.length = resolve;   console.log(that.data.length + "/" + that.data.windowWidth);   that.excuseAnimation();  }); } })

源碼下載:跑馬燈效果

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。


發(fā)表評(píng)論 共有條評(píng)論
用戶名: 密碼:
驗(yàn)證碼: 匿名發(fā)表
主站蜘蛛池模板: 欧美精品久久久久久久多人混战 | 久久久久北条麻妃免费看 | 久久国产精品久久久久久电车 | 午夜精品成人 | 超碰97人人艹 | h视频在线观看免费 | 717影院理论午夜伦八戒秦先生 | 国产无限资源在线观看 | 精品一区二区三区免费看 | 亚洲网站免费看 | 九九热久久免费视频 | 日本免费中文字幕 | 久久国产亚洲精品 | 美女黄网站免费观看 | 国产最新网站 | 悠悠成人资源亚洲一区二区 | teensexhd| 成人毛片100部 | 91精品国产乱码久久久久久久久 | 露脸各种姿势啪啪的清纯美女 | 色婷婷a v | 久久免费视频7 | 午夜视 | 成人在线免费视频播放 | 欧美成视频在线观看 | 蜜桃一本色道久久综合亚洲精品冫 | 亚洲日本欧美 | 视频一区二区精品 | 久久精品亚洲欧美日韩精品中文字幕 | 黄色毛片视频在线观看 | 国产麻豆交换夫妇 | 免费观看黄色影片 | 海外中文字幕在线观看 | 毛片毛片免费看 | 色网站在线免费观看 | 蜜桃网站在线观看 | 成人午夜精品久久久久久久蜜臀 | 久久久久免费精品 | 婷婷亚洲一区二区三区 | 天天草天天干天天 | 成人一区二区在线观看视频 |