微信小程序-实现公告自动滚动效果

<!-- 公告 -->
<view class='notice'>
    <view class='notice-contain'>
        <icon type="search" size="14" color="#f00"></icon>
        <swiper class="tab-right" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'>
            <view class="right-item">
                <view wx:for="{{msgList}}" wx:key="index">
                    <swiper-item>
                        <view class='content-item'>
                            <view class="swiper-item text-red text-bold">{{item.title}}</view>
                        </view>
                    </swiper-item>
                </view>
            </view>
        </swiper>
    </view>
</view>

msgList: [{
    title: "1234567890~"
}, {
    title: "qwertyuiop~"
}]

/* 公告栏 */
.notice {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-top: 10rpx */
}

.notice-contain {
    /* box-shadow: 0px 1px 1px 1px rgba(202, 199, 199, 0.993); */
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    width: 700rpx;
    height: 82rpx;
    border-radius: 16rpx;
    justify-content: center;
    align-items: center;
}

.text-red {
    color: red;
}

.tab-right {
    height: 55rpx;
    width: 85%;
    line-height: 55rpx;
    padding-left: 30rpx;
}

.swiper-item {
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* letter-spacing: 2px; */
}

 

转发原文：https://cloud.tencent.com/developer/article/2301707