在线直播源码，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.datafor(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 获奖名单滚动显示的两种方式，更多内容欢迎关注之后的文章

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

VUE 获奖名单滚动显示的两种方式
第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seamless-scroll --save 2.使用 2- ...
android asynctask源码分析,Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)...
本文实例讲述了Android通过Handler与AsyncTask两种方式动态更新ListView的方法.分享给大家供大家参考,具体如下: 有时候我们需要修改已经生成的列表,添加或者修改数据,noti ...
在线直播源码,滚动文字
在线直播源码,直播间滚动文字实现的相关代码 #include<iostream> #include<windows.h> using namespace std; void g ...
通过vue实现在线直播源码的直播点赞
我们可以发现,在线直播源码的直播间中,在右下角会有给主播点赞的按钮,点赞越多,对主播来说好处越多,那么在线直播源码是怎么实现点赞功能的呢? 实现在线直播源码观众的点赞功能. 功能描述:最后一次点赞三秒 ...
在线直播源码评论弹幕是如何“练”成的？
在线直播源码评论弹幕是如何"练"成的? 提起弹幕(dànmù),大家都会想到「视频弹幕」.视频弹幕是指网友们在观看视频的同时参与评论,即所谓"即时反馈", 评论 ...
如何评判在线直播源码优劣?视频直播软件开发经验之谈
直播经过这些年的不断发展,使用者逐渐增加,在视频直播软件开发行业从业者的不断努力下,在线直播源码变得越来越完善,甚至已有了一些开发窍门的积累和判断视频直播软件优劣性的指标,本篇文章就来讲讲,该如何评判 ...
如何实现在线直播源码的美颜功能——接入美颜SDK
美颜是在线直播源码很重要的一部分功能,为了保证美颜质量并降低开发时间,在线直播源码会接入第三方美颜SDK,实现系统的美颜功能,接下来就介绍一下,在线直播源码是怎么接入美颜SDK的. SDK接入流程 1 ...
在线直播源码是如何实现短信验证码登录的
在线直播源码都有登录页面,登录时输入正确的验证码才可以登录,废话不多说,今天就用javascript和异步,来实现在线直播源码自动生成图片验证码的功能. 首先我们要插入一个一般处理程序(也就是ashx ...
在线直播源码中直播间内大转盘功能的实现
年前,云豹在线直播源码更新时,我们为其添加了"大转盘功能",该功能在直播间中,可实现"付费转动转盘获得礼物"的功能,那么该功能是如何实现的呢? 用户在使用该功能 ...

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

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

最新文章

热门文章