在线直播源码，VUE 获奖名单滚动显示的两种方式

第一种：使用vue-seamless-scroll组件：

1、安装vue-seamless-scroll

1	`<br>npm install vue-seamless-scroll --save`

2、使用

2-1 全局配置

在main.js中，正常配置是：

1	`<br>import scroll from` `'vue-seamless-scroll'<br>Vue.use(scroll)`

在用到的页面文件中：

1	`<br><vue-seamless-scroll></vue-seamless-scroll>`

2-2 局部配置

在用到的页面文件中

1	`<br>import vueSeamlessScroll from` `'vue-seamless-scroll'`

调用

<br>                <vueSeamlessScroll :data="winningList" :class-option="classOption" class="scroll-content"><br>                    <div v-for="(item,index) in winningList" :key="index" style="height: 50px; display: flex;"><br>                        <div class="scroll-prize"><br>                            恭喜{{item.userName}}获得{{item.paizeName}}<br>                        </div><br>                    </div><br>                </vueSeamlessScroll><br>classOption<br>//classOption配置<br>        data() {<br>            return {<br>                winningList: [],<br>                classOption:{<br>                    singleHeight: 50,<br>                    waitTime: 1000,<br>                    step: 0.5,<br>                    limitMoveNum: 1,<br>                    hoverStop: false<br>                },<br>            }<br>        },

css:

<br>/*获奖名单*/<br>    .scroll-content {<br>        align-self: center;<br>        height: 50%;<br>        overflow: hidden;<br>    }<br>    .scroll-prize {<br>        position: relative;<br>        align-self: center;<br>        font-family: PingFangSC-Medium;<br>        font-size: 30px;<br>        margin:0px 20px 0px 0px;<br>        padding:0;<br>        /*height: 100%;*/<br>        text-align: left;<br>    }

第二种方式：使用vant的swipe组件

在用到的VUE文件中

<br>import Vue from 'vue';<br>import { Swipe, SwipeItem } from 'vant';<br> <br>Vue.use(Swipe);<br>Vue.use(SwipeItem);

使用：

<br><van-swipe class="scroll-content" vertical :show-indicators="false" :autoplay="3000" :duration="1000"><br>      <van-swipe-item v-for="(item,index) in winningList" :key="index" style="display: flex;"><br>          <div class="scroll-prize"><br>              恭喜{{item.userName}}获得{{item.paizeName}}<br>          </div><br>      </van-swipe-item><br></van-swipe>

整体代码：

<br><template><br>    <div><br>        <br>        <div class="lottery_total"><br>            <br>            <div class="winning_div"><br>                <div class="hCenter"><br>                    <img src="./../assets/images/lottery/icon_prize.png" class="winning_img"/><br>                </div><br><!--                <vueSeamlessScroll :data="winningList" :class-option="classOption" class="scroll-content">--><br><!--                    <div v-for="(item,index) in winningList" :key="index" style="height: 50px; display: flex;">--><br><!--                        <div class="scroll-prize">--><br><!--                            恭喜{{item.userName}}获得{{item.paizeName}}--><br><!--                        </div>--><br><!--                    </div>--><br><!--                </vueSeamlessScroll>--><br>                <van-swipe class="scroll-content" vertical :show-indicators="false" :autoplay="3000" :duration="1000"><br>                    <van-swipe-item v-for="(item,index) in winningList" :key="index" style="display: flex;"><br>                        <div class="scroll-prize"><br>                            恭喜{{item.userName}}获得{{item.paizeName}}<br>                        </div><br>                    </van-swipe-item><br>                </van-swipe><br>            </div><br>        </div><br>    </div><br></template><br> <br><script><br>     <br>    // import vueSeamlessScroll from 'vue-seamless-scroll'<br>    import Vue from 'vue';<br>    import { Swipe, SwipeItem } from 'vant';<br> <br>    Vue.use(Swipe);<br>    Vue.use(SwipeItem);<br>    export default {<br>        name: "NineLottery",<br>        components: {<br>            // vueSeamlessScroll<br>        },<br>        data() {<br>            return {<br>               <br>                winningList: [],<br>                classOption:{<br>                    singleHeight: 50,<br>                    waitTime: 1000,<br>                    step: 0.5,<br>                    limitMoveNum: 1,<br>                    hoverStop: false<br>                },<br>            }<br>        },<br>        created() {<br>            this.initUplusNine()<br>        },<br>        methods: {<br>            goBack () {<br>                this.$router.go(-1)<br>            },<br>            async initUplusNine() {<br>                this.getWinningList()<br>                <br>            },<br>            <br>            <br>            plusXing(str, frontLen, endLen,cha) {<br>                let len = frontLen + endLen;<br>                if (str.length <= len) {<br>                    return str<br>                }<br>                return str.substring(0, frontLen) + cha + str.substring(str.length - endLen);<br>            },<br>            async getWinningList () {<br>                let res = await RequestApi.getWinningList(this.uplusApi)<br>                console.log('getWinningList',res)<br>                if (res[0]) {<br>                    this.alertMsg('网络异常，请稍后再试')<br>                    return<br>                }<br>                let winningList = []<br>                let list = res[1].retData.data.result.data<br>                for(let i=0;i<list.length; i++) {<br>                    if (list[i].prizeType != 3) {<br>                        list[i].userName = this.plusXing(list[i].userName,2,2,'**')<br>                        winningList.push(list[i])<br>                    }<br>                }<br>                this.winningList = winningList<br>            },<br>        }<br>    }<br></script><br> <br><style scoped><br>   <br>    .men{<br>        position: fixed;<br>        width: 100vw;<br>        height: 100vh;<br>        z-index: 1;<br>        left: 0;<br>        top: 0;<br>    }<br>    .hCenter {<br>        display: flex;<br>        align-items: center;<br>        width: 300px;<br>    }<br>    .winning_div {<br>        margin: 24px;  border-radius: 20px; display: flex;<br>        width: 702px;<br>        height: 184px;<br>    }<br>    .winning_img {<br>        margin:0px 14px 0px 18px;<br>        width: 270px;<br>        height: 130px;<br>    }<br>    /*获奖名单*/<br>    .scroll-content {<br>        align-self: center;<br>        height: 50%;<br>        overflow: hidden;<br>    }<br>    .scroll-prize {<br>        position: relative;<br>        align-self: center;<br>        font-family: PingFangSC-Medium;<br>        font-size: 30px;<br>        margin:0px 20px 0px 0px;<br>        padding:0;<br>        /*height: 100%;*/<br>        text-align: left;<br>    }<br></style>