国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 課堂 > 小程序 > 正文

微信小程序實現文字從右向左無限滾動

2020-03-21 16:04:07
字體:
來源:轉載
供稿:網友

本文實例為大家分享了微信小程序實現文字無限滾動的具體代碼,供大家參考,具體內容如下

微信小程序,文字,滾動

布局頁面wxml

<scroll-view class="container"> <view class="scrolltxt">  <view class="marquee_box">   <view class="marquee_text" style="transform: translateX(-{{marqueeDistance}}px)">    <text>{{text}}</text>    <text style="margin-right:{{marquee_margin}}px;"></text>    <text style="margin-right:{{marquee_margin}}px;">{{text}}</text>       </view>  </view> </view></scroll-view>

樣式頁面 wxss

.container {height: 100%;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}.scrolltxt{padding:0 20rpx;background:#f8f8f8;}.marquee_box {position:relative;color:#333;height:90rpx;display:block;overflow:hidden;} .marquee_text {white-space: nowrap;position:absolute;top:0;font-size:14px;height:90rpx;line-height:90rpx;}

小程序 js頁面

Page({ /**  * 頁面的初始數據  * Linyufan.com  */ data: {  text: "這是一條測試公告,看看效果怎么樣,2019年3月23日",  marqueePace: 1,//滾動速度  marqueeDistance: 0,//初始滾動距離  marquee_margin: 30,  size:14,  interval: 20 // 時間間隔 },  /**  * 生命周期函數--監聽頁面加載  */ onLoad: function (options) {  }, onShow: function () {  var that = this;  var length = that.data.text.length * that.data.size;//文字長度  var windowWidth = wx.getSystemInfoSync().windowWidth;// 屏幕寬度  //console.log(length,windowWidth);  that.setData({   length: length,   windowWidth: windowWidth  });  that.scrolltxt();// 第一個字消失后立即從右邊出現 },  scrolltxt: function () {  var that = this;  var length = that.data.length;//滾動文字的寬度  var windowWidth = that.data.windowWidth;//屏幕寬度  if (length > windowWidth){   var interval = setInterval(function () {    var maxscrollwidth = length + that.data.marquee_margin;//滾動的最大寬度,文字寬度+間距,如果需要一行文字滾完后再顯示第二行可以修改marquee_margin值等于windowWidth即可    var crentleft = that.data.marqueeDistance;    if (crentleft < maxscrollwidth) {//判斷是否滾動到最大寬度     that.setData({      marqueeDistance: crentleft + that.data.marqueePace     })    }    else {     //console.log("替換");     that.setData({      marqueeDistance: 0 // 直接重新滾動     });     clearInterval(interval);     that.scrolltxt();    }   }, that.data.interval);  }  else{   that.setData({ marquee_margin:"1000"});//只顯示一條不滾動右邊間距加大,防止重復顯示  }  }})

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VEVB武林網。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 黑水县| 老河口市| 菏泽市| 崇明县| 山阴县| 涡阳县| 深泽县| 礼泉县| 亚东县| 汶上县| 札达县| 六盘水市| 汝阳县| 水城县| 玛纳斯县| 措勤县| 建水县| 普兰县| 金乡县| 运城市| 阿尔山市| 中阳县| 田阳县| 大埔县| 南漳县| 商城县| 石柱| 韶山市| 巨鹿县| 古浪县| 鄄城县| 始兴县| 昭苏县| 奈曼旗| 茶陵县| 沂南县| 岱山县| 横山县| 元朗区| 江津市| 遂昌县|