微信小程序垂直滚动效果显示通知消息（无限滚动）

 博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

  微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

 

一、前端界面

<view class="tipInfor">

    <view class="typeshowUI">


        <view style="display: flex;flex-direction: row;align-items: center;padding:5rpx;">

            <view class="newsInfor">

                <view>
                    <view style="font-size: 33rpx;color: #3489F2;font-weight: bold;width: 80rpx;">
                        最新
                    </view>
                    <view style="font-size: 33rpx;color: #3489F2;font-weight: bold;">
                        发布
                    </view>

                </view>

                <view class="shuxainlineView"></view>

            </view>


            <view style="margin-left:25rpx;display: flex;flex-direction: row;align-items: center;margin: 15rpx;text-overflow:ellipsis;">

                <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="3000" duration="{{duration}}" display-multiple-items='2' wx:key="{{index}}" data-index="{{index}}">
                    <block wx:for="{{lastNewsArr}}">
                        <swiper-item data-id="{{item.id}}" data-index="{{index}}" bindtap="bindchange" style="align-items: center;display: flex;flex-direction: row;">
                            <view style="display: flex;flex-direction: row;align-items: center;">
                                <view style="background: #3489F2;border-radius: 45rpx;width:15rpx;height: 15rpx;">
                                </view>

                                <view class="swiper_itemshow">
                                    {{item.InfoTile}}
                                </view>
                            </view>

                        </swiper-item>
                    </block>
                </swiper>
            </view>

        </view>



    </view>
</view>

二、js逻辑处理

 data: {

        current:0, 

        bannerData: [],

        indicatorDots: true,

        autoplayVideo: false,

        autoplay: true,        

        interval: 5000,        

        duration: 1000

       ],

                     

三、css样式代码

.swiper_container {

    height: 90rpx;
    align-items: center;
    display: flex;
    flex-direction: row;
    width: 70vw;

}

.typeshowUI {
    font-size: 28rpx;
    background-color: #fff;
    border-radius: 25rpx;
    overflow: hidden;

}


.tipInfor {
    background-color: white;
    border-radius: 25rpx;
    display: flex;
    flex-direction: column;
    margin: 25rpx;
    background-color: #fff;


}

三、留个脚印吧

大家要是感觉此篇文章有意义；那就给个关注、点赞，收藏吧；

🍅也可以关注文档末尾公众号🍅