uniapp 纵向滚动公告

以纵向滚动公告为例，默认显示两条数据
template

<template>
    <view class="notice_bg">
        <image class="icon" :src="noticeImg"></image>
        <view class="line"></view>
        <swiper autoplay="true" display-multiple-items="2" vertical="true" circular interval="2000" class="bar-swiper">
            <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item">
                <view class="circle"></view>
                <view class="item_box" @tap="click(item.id)">
                    {{ item.articleTitle }}
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

script

<script>
    export default{
        data(){
            return {
                  noticeImg:''，//左侧图片
                  list:[
                          {
                           articleTitle: "文章标题001",
                            id: "36"
                          },
                          {
                           articleTitle: "文章标题002",
                            id: "37"
                          },
                         {
                           articleTitle: "文章标题003",
                            id: "38"
                          },
                          {
                           articleTitle: "文章标题004",
                            id: "39"
                          },
                        ]
            }
        },
        methods:{
            // 点击通告栏
            click(id) {
                console.log(id,'======>id')
            }
        }
    }
</script>

css

<style scoped lang="scss">
    .notice_bg{
        margin: 32rpx;
        background-color: #FFFFFF;
        border-radius: 8rpx;
        padding: 16rpx 20rpx;
        display: flex;
        align-items: center;
        .icon{
            width: 74rpx;
            height: 72rpx;
        }
        .line{
            margin: 0 16rpx 0 20rpx;
            background-color: #F4F4F4;
            width: 2rpx;
            height: 68rpx;
        }
        .bar-swiper{
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 0.5);
            height: 80rpx;
            display: flex;
            align-items: center;
            flex: 1;
            margin-left: 12rpx;
        }
        .swiper-item {
            display: flex;
            align-items: center;
            overflow: hidden;
        }
        .circle{
            min-width: 10rpx;
            width: 10rpx;
            height: 10rpx;
            border-radius: 50%;
            background-color: rgba(34, 34, 34, 0.5);
            margin-right: 10rpx;
        }
        .item_box{
            word-break: break-all;  /* break-all(允许在单词内换行。) */
            text-overflow: ellipsis;  /* 超出部分省略号 */
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 1; /** 显示的行数 **/
        }
    }
</style>