c语言游戏里的滚动公告如何实现,小程序两种滚动公告栏的实现方法_亦心_前端开发者...

先上效果图：

横向滚动栏实现：

网上的几种方案或多或少都有一些问题：

1.setData定时器更新text view的margin-left方法，由于setData的毫秒延时，动画播放起来一卡一卡；

2.纯

横向滚动代码如下所示

// wxml

{{text}}

更多应用>

// wxss

.notice {

display: flex;

align-content: center;

justify-content: space-between;

padding: 10rpx 25rpx;

background: #f1f1f1;

}

.left {

display: flex;

align-items: center;

}

.voice {

margin-right: 5rpx;

margin-top: 2rpx;

color: #fa6016;

}

.left-box {

position: relative;

display: flex;

align-items: center;

}

.left-text {

position: absolute;

left: 0;

width: 40rpx;

height: 100%;

background: linear-gradient(to left,rgba(241,241,241,0),rgba(241,241,241,1));

z-index: 99;

}

.right-text {

position: absolute;

right: -1rpx;

width: 40rpx;

height: 100%;

background: linear-gradient(to left,rgba(241,241,241,1),rgba(241,241,241,0));

z-index: 99;

}

.content-box {

overflow: hidden;

width: 350rpx;

}

.content-text {

color: #5e5e5e;

white-space: nowrap;

font-size: 28rpx;

}

.right {

display: flex;

align-items: center;

}

.app {

height: 48rpx;

}

.more {

margin-left: 5rpx;

color: #aaa;

font-size: 32rpx;

}

//

sipwer滚动方式代码如下所示

swiper默认为横向滚动，vertical为true，则纵向滚动

// wxml

公告：

{{item.title}}

// wxss

/* 公告start */

.swiper-notice {

font-size: 28rpx;

color: #fa6016;

}

.swiper-container {

margin-left: 10rpx;

width: 400rpx;

height: 100%;

}

.swiper-item {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 100%;

font-size: 28rpx;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

letter-spacing: 2rpx;

}

/* 公告end */

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持前端开发者。