線上直播原始碼，VUE 獲獎名單滾動顯示的兩種方式

線上直播原始碼，VUE 獲獎名單滾動顯示的兩種方式

第一種： 使用vue-seamless-scroll元件：

1、安裝vue-seamless-scroll

npm install vue-seamless-scroll --save

2、使用

2-1 全域性配置

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

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

在用到的頁面檔案中：

<vue-seamless-scroll></vue-seamless-scroll>

2-2 區域性配置

在用到的頁面檔案中

import vueSeamlessScroll from 'vue-seamless-scroll'

呼叫

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

css:

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

第二種方式：使用vant的swipe元件

在用到的VUE檔案中

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

使用：

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

整體程式碼：

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

以上就是線上直播原始碼，VUE 獲獎名單滾動顯示的兩種方式， 更多內容歡迎關注之後的文章