第一种: 使用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>