小程序上下滚动公告

小程序上下滚动公告

HTML

<swiper class=“swiper_container” vertical=“true” autoplay=“true” circular=“true” interval=“2000”>
    <block wx:for=“{{msgList}}”>
        <navigator url=“/pages/index/index?title={{item.url}}” open-type=“navigate”>
            <swiper-item>
                <view class=“swiper_item”>{{item.title}}</view>
            </swiper-item>
        </navigator>
    </block>
</swiper>

TS

onLoad: function (e) {
    this.setData({
    msgList: [
        { url: “url”, title: “公告：多地首套房贷利率上浮 热点城市渐迎零折扣时代” },
        { url: “url”, title: “公告：悦如公寓三周年生日趴邀你免费吃喝欢唱” },
        { url: “url”, title: “公告：你想和一群有志青年一起过生日嘛？” }]
    });
},

CSS

/ 公告 /
.swiper_container {
    height: 55rpx;
    width: 80vw;
}

.swiper_item {
    font-size: 25rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 2px;
}