成品直播源码推荐,uniapp多行滚动通知

成品直播源码推荐,uniapp多行滚动通知

代码:template部分

1
<template><br>    <view class="content"><br>        <swiper class="swiper" <br>        vertical <br>        circular <br>        autoplay <br>        interval="2000" <br>    // 重点 display-multiple-items 设置显示多少条数据<br>        display-multiple-items='3'><br>            <swiper-item><br>                <view class="box"><br>                    <view>多行滚动111</view><br>                    <view>></view><br>                </view><br>            </swiper-item><br>            <swiper-item><br>                <view class="box"><br>                    <view>多行滚动222</view><br>                    <view>></view><br>                </view><br>            </swiper-item><br>            <swiper-item><br>                <view class="box"><br>                    <view>多行滚动333</view><br>                    <view>></view><br>                </view><br>            </swiper-item><br>            <swiper-item><br>                <view class="box"><br>                    <view>多行滚动444</view><br>                    <view>></view><br>                </view><br>            </swiper-item><br>        </swiper><br>    </view><br></template><br> <br><script><br>    export default {<br>        data() {<br>            return {<br>                title: 'Hello'<br>            }<br>        },<br>        onLoad() {<br> <br>        },<br>        methods: {<br> <br>        }<br>    }<br></script><br> <br><style><br>    .swiper{<br>        width: 500rpx;<br>        /* 高度跟自己需要的子元素更改,我这里是显示3个,每个50rpx 所以是150rpx */<br>        height: 150rpx;<br>        <br>        margin: 50rpx auto;<br>    }<br>    .box{<br>        font-size: 20rpx;<br>        height: 50rpx;<br>        box-sizing: border-box;<br>        display: flex;<br>        justify-content: space-between;<br>        align-items: center;<br>        padding: 0 10rpx;<br>    }<br></style>

​ 以上就是成品直播源码推荐,uniapp多行滚动通知, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(169)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示