頁面組件

<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 = 0this.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;}} }

總結

以上是生活随笔為你收集整理的uniapp的项目，scss和js实现跑马灯的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。