小程序實現跑馬燈效果
本文實例為大傢分享瞭小程序實現跑馬燈效果的具體代碼,供大傢參考,具體內容如下
先看效果圖
實現步驟:
index.wxml文件
<!-- 跑馬燈效果 --> <view class="example"> <view class="marquee_box"> <view class="marquee_text" style="{{orientation}}:{{marqueeDistance}}px;font-size: {{size}}px;"> <image src="{{adUrl}}" class='ad-image' />{{text}} </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; }
js文件
// pages/home/home.js var app = getApp() Page({ data: { //跑馬燈 text: '618淘甄貨,一個可以省錢的購物平臺', marqueePace: 1,//滾動速度 marqueeDistance: 0,//初始滾動距離 size: 14, orientation: 'left',//滾動方向 intervals: 20, // 時間間隔 adUrl: '../../images/detail/like.jpeg' }, 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.intervals); } })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。