1、使用colorui制作小程序滚动广告栏

我们可以使用colorui组件开发小程序，能够很容易的写出广告栏。

<template>
    <view>
        <view class="cu-bar margin-top">
            <view class="action">
                <text class="announce text-white">公告</text>
            </view>
            <view class="action">
                <swiper :autoplay="true" :interval="3000" :duration="1000" vertical="true" circular="true" class="swiper-item">
    <!-- 这里的vertical="true"是上下滚动，不设置则为左右 circular="true"表示的是循环滚动，无缝连接-->
                        <swiper-item v-for="item in msg" class="swiper-item">
                            {{item}}
                        </swiper-item>
                </swiper>
            </view>
        </view>
    </view>
</template>
<script>
    export default{
        data(){
            return {
                msg:["广告1广告1广告1广告1广告1广告1广告1","广告2广告2广告2广告2告2广告2广告2广告2","广告3广告3广告3广告3广告3广告3广告3","广告4广告4广告4广告4广告4广告4广告4","广告5广告5广告5广告5广告5广告5广告5","广告6广告6广告6广告6广告6广告6广告6"],
            }
        }
    }
</script>
<style>
    .announce{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 70rpx;
        height: 50rpx;
        border-radius: 15rpx;   
        background-color: #f26529;
        transform: skewX(-20deg);
    }
    .swiper-item{
        margin-left: 20rpx;
        width: 600rpx;
        height: 50rpx;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }
</style>

广告中的内容就会自动播放。