微信小程序 滚动公告实现【上下，左右皆可】

搜索了一堆小程序公告实现都不完善，要么卡顿，要么实现复杂，关键一点是很多都过度处理了。所以我用了个小技巧，用swiper实现。

wxml如下：

    公告：

    

        

            

                {{item.title}}

            

        

    

wxss如下：

/* 公告start */

.swiper-wrap{

    display: flex;    

    justify-content: center;

    align-items: center;

}

.swiper-left{

    flex-basis: 15%;

}

.swiper-right{

    flex-basis: 85%;

    height: 50rpx;

    line-height: 50rpx;

}

/* 公告end */

javascript如下：

Page({

    data: {

        msgList: [

            {

                id: 1,

                url: 'a123',

                title: '【评分标准】页可以查看不同年龄段的评分标准，通过首页选择对应的性别、类别和年龄。',

            },

            {

                id: 2,

                url: 'a589',

                title: '【单项成绩】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。',

            },

            {

                id: 3,

                url: 'a1231231',

                title: '【总结】页包含了详细的单项打分情况及成绩雷达图，直观地看出自己的弱项和强项。',

            },

        ],

        indicatorDots: true,

        vertical: false,

        autoplay: false,

        interval: 2000,

        duration: 500

    }

})

效果如下：