小程序数组数据自定义跑马灯组件
marquee【跑马灯组件定义】
marquee.wxml
<scroll-view class="container">
<view class="scrolltxt">
<view class="marquee_box" wx:if="{
{isSrcollbar!==null}}">
<view class="marquee_text" style="transform: translateX(-{
{
marqueeDistance}}px);font-size:{
{
fontSize}}px"
wx:if="{
{isSrcollbar}}">
<text style="margin-left:{
{
marquee_margin}}px"></text>
<block wx:for="{
{dataList}}" wx:key="index">
<text style="margin-left:{
{
index>0?marquee_item_margin:0}}px">{
{item}}</text>
</block>
</view>
<view wx:else class="marquee_text" style="width: 100%;text-align: center;font-size:{
{
fontSize}}px">
<block wx:for="{
{dataList}}" wx:key="index">
<text style="margin-left:{
{
index>0?marquee_item_margin:0}}px;">{
{item}}</text>
</block>
</view>
</view>
</view>
</scroll-view>
marquee.wxss
.container {
display: flex;
position: fixed;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
}
.scrolltxt {
padding: 0 20rpx;
}
.marquee_box {
position: relative;
color: rgb(252, 42, 42);
height: 50rpx;
display: block;
overflow: hidden;
}
.marquee_text {
white-space: nowrap;
position: absolute;
top: 0;
height: 50rpx;
line-height: 50rpx;
}
marquee.js
// compoments/marquee/marquee.js
Component({
/**
* 组件的属性列表
*/
properties: {
//数据列表
dataArr: {
type: Array,
value: []
},
//滚动速度，默认1
marqueePace: {
type: Number,
value: 1
},
//滚动条每次出现时距离左边位置，默认屏幕宽度
marqueeMargin: {
type: Number,
value: null
},
//多条数据间每条数据间隔距离，默认30
marqueeItemMargin: {
type: Number,
value: null
},
fontSize: {
type: Number,
value: 14
}
},
/**
* 组件的初始数据
*/
data: {
//滚动数据
dataList: [],
//初始滚动距离
marqueeDistance: 0,
//播放结束间距后
marquee_margin: 30,
//每条数据间距
marquee_item_margin: 30,
//定时器
interval: '',
//是否滚动
isSrcollbar: null
},
/**
* 组件的方法列表
*/
methods: {
/**
* 滚动字幕
*/
scrolltxt: function () {
var that = this;
//滚动文字的宽度
var length = that.data.length;
//屏幕宽度
var windowWidth = that.data.windowWidth;
//定时器获取
var interval = this.data.interval
//初始位置
var marquee_margin = this.data.marquee_margin;
//检查文字宽度是否大于屏幕宽度，大于才进行滚动
if (length > windowWidth) {
this.setData({
isSrcollbar: true
})
//定时器
interval = setInterval(function () {
//滚动的最大宽度，文字宽度+滚动条初始位置
var maxscrollwidth = length + marquee_margin;
//当前滚动位置
var currentPosition = that.data.marqueeDistance;
//判断是否滚动到最大宽度
if (currentPosition < maxscrollwidth) {
//设置下次滚动位置
that.setData({
marqueeDistance: currentPosition + that.data.marqueePace
})
} else {
// 直接重新滚动
that.setData({
marqueeDistance: 0
});
//清除旧的定时器
clearInterval(interval);
that.scrolltxt();
}
}, 20);
}
else {
//设置不滚动
that.setData({
isSrcollbar: false });
}
that.setData({
interval: interval
})
},
init() {
var that = this;
//清除旧的定时器
clearInterval(that.data.interval)
let marqueeItemMargin = that.data.marqueeItemMargin;
this.setData({
marquee_item_margin: marqueeItemMargin === null ? 30 : marqueeItemMargin
})
//数据列表
let dataList = this.data.dataList;
//总长度
var length = 0;
for (var data of dataList) {
//文字长度
length += data.length * that.data.fontSize;
}
//间隔长度
if (dataList.length > 1) {
length += (dataList.length - 1) * that.data.marquee_item_margin;
}
// 屏幕宽度
var windowWidth = wx.getSystemInfoSync().windowWidth;
that.setData({
length: length,
windowWidth: windowWidth,
});
//设置每次滚动条出现的初始位置
let marqueeMargin = this.data.marqueeMargin;
this.setData({
marquee_margin: marqueeMargin === null ? windowWidth : marqueeMargin
})
//执行滚动条函数
that.scrolltxt();
}
},
/**
* 组件所在页面声明周期
*/
pageLifetimes: {
hide: function () {
//屏幕隐藏时，清空滚动字幕定时器
clearInterval(this.data.interval);
},
show: function (e) {
this.init();
},
},
observers: {
dataArr: function (dataArr) {
console.log(dataArr);
if (!dataArr.length) {
return
}
this.setData({
dataList: dataArr,
});
this.init();
}
}
})
marquee.json
{
"component": true,
"usingComponents": {
}
}
组件的使用
页面json引入
"usingComponents": {
"marquee": "../../compoments/marquee/marquee"
},
引入路径为页面也组件位置相对路径
页面数据定义
页面js data中定义数组数据，如：
marquee: {
dataArr: ['~~~~', "哈哈哈哈哈", '呵呵呵呵', "啦啦啦", "来了来了来看"]
}
页面中使用
<marquee dataArr="{
{marquee.dataArr}}" marqueePace="{
{1}}" marqueeItemMargin="{
{100}}" marqueeMargin="{
{100}}" fontSize="{
{20}}"></marquee>
效果
