uniapp的项目，scss和js实现跑马灯

曾经终败给现在 2022-10-07 11:45 894阅读 0赞

`页面组件`

<view class="innovate">
    	<view class="l">
    		<image class="noticeTwo" src="" mode="aspectFit"></image>
    	</view>
    	<view class="top" id="innovate">
    		<view class="con" :style="{transform:'translateX('+lampX+'px)'}">
    			<text class="item" v-for="(item,index) in innovate" :key="index">{
       {item}}</text>
    		</view>
    	</view>
    </view>

`data`

lampX: 0, //跑马灯文字位置
    innovate: [
    		'①xxxxx,
    		'②xxxxx',
    		'③xxxxx',
    		'④xxxxx',
    		'⑤xxxxx',
    		'⑥xxxxx',
    		'⑦xxxxx'
    	],//跑马灯文案

`js`

lampFun() {
    	let lampX = 0;
    	let width = 0;
    	let query = uni.createSelectorQuery().in(this);
    	query.select('#innovate').boundingClientRect(data => {
    		width = data.width;
    	}).exec()
    	var inner = this.innovate;
    	let interval = setInterval(() => {
    		if (this.lampX >= width / 2) {
    			this.innovate = this.innovate.concat(inner);
    		} else if (this.lampX >= width) {
    			this.lampX = 0
    			this.innovate = this.innovate.slice(0, 7);
    		}
    		this.lampX--;
    	}, 60)
    },

`scss`

.innovate{
      height: 65rpx;
      line-height: 65rpx;
      font-size: 24rpx;
      color: #666;
      background: #f6f6f6;
      position: relative;
      .l{
        position: absolute;
        top: 0;
        left: 20rpx;
        img{
          display: inline-block;
          vertical-align: middle
        }
        .notice{
          width: 35rpx;
        }
        .noticeTwo{
          width: 115rpx;
    		height: 65rpx;
        }
      }
      .top{
        overflow: hidden;
        word-break:keep-all;
        white-space:nowrap;  
        margin-left: 150rpx;
        .item{
          padding: 0 15rpx;
          transition:  all .4s;
        }
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，894人围观）

还没有评论，来说两句吧...

相关阅读

相关围着长方形的跑马灯

效果如图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRhbi5ibG9nLmNzZG

╰+哭是因爲堅強的太久メ/ 2023年06月25日 07:49/ 0 赞/ 32 阅读

相关 html 跑马灯

废话不多说，直接代码copy进去运行就知道了 <!DOCTYPE html> <html> <head> <meta charse

约定不等于承诺〃/ 2023年06月11日 12:26/ 0 赞/ 72 阅读

相关跑马灯

vue 跑马灯思路：将字符串的第一个字符取出，再将剩下的所有字符取出，重新拼接字符串，将第一个字符放在最后，设置计时器。代码如下： <!DOCTYPE h

Bertha 。/ 2022年12月01日 15:53/ 0 赞/ 288 阅读

相关 uniapp的项目，scss和js实现跑马灯

`页面组件` <view class="innovate"> <view class="l"> <image class="noticeTwo"

曾经终败给现在/ 2022年10月07日 11:45/ 0 赞/ 895 阅读

相关安卓跑马灯的效果

直接在布局里写代码就好了 <TextView android:id="@+id/menu\_desc" android:

深碍√TFBOYSˉ_/ 2022年09月18日 07:49/ 0 赞/ 246 阅读

相关使用TextView实现跑马灯的效果

单个跑马灯效果： <TextView android:id="@+id/button1" android:ellips

ゞ浴缸里的玫瑰/ 2022年07月24日 05:09/ 0 赞/ 230 阅读

相关跑马灯

[https://github.com/search?l=Java&q=%E8%B7%91%E9%A9%AC%E7%81%AF&type=Repositories&utf8=%

谁践踏了优雅/ 2022年06月05日 09:27/ 0 赞/ 296 阅读

相关 vue.js 实现跑马灯的效果

要求：点击“动起来”按钮实现跑马灯的效果（即字符自动滚动），点击“不要动”按钮实现跑马灯停止。 html源码： <div id="go"> <bu

谁践踏了优雅/ 2022年02月28日 13:34/ 0 赞/ 350 阅读

相关 js实现图片无缝循环跑马灯

html 代码 <div class="myls-out-div" style="overflow: hidden;"> <ul id=

亦凉/ 2021年11月05日 23:46/ 0 赞/ 531 阅读

相关 js title跑马灯

<html> <head> <meta charset="utf-8"> <title id="a">一二三四五六</title>

小灰灰/ 2021年07月24日 23:12/ 0 赞/ 509 阅读