数字滚动

vue-count-to

https://www.cnblogs.com/xiaolucky/p/12599671.html

code

import countTo from ‘vue-count-to’
components:{
VueCountTo: countTo
},
class=”datacount2 g-ib”
ref=”vueCount2”
:startVal=”countConfig.startVal”
:endVal=”pageData.dangerTotalCount”
:duration=”countConfig.duration”
:separator=”‘’”
:autoplay=”false” />
countConfig: {
duration: 2600,
startVal: 0
},
this.$nextTick(this.$refs.vueCount2.start())
// 数字滚动
handleVueCount () {
this.countConfig.startVal = 100
clearInterval(this.timer)
this.timer = setInterval(() =>_ this.$refs.vueCount2.start(), 1.5e4)
},

轮播

vue-seamless-scroll

纵向滚动轮播
https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default

code

import scroll from ‘vue-seamless-scroll’
Vue.use(scroll)
class=”broad_list_box g-clear-scroll”
:data=”pageList”
:class-option=”optionSingleHeightTime”>

v-for=”(item, index) in pageList” :key=”index”>
{{item.dangerType}}
{{item.area}}
{{item.status}}
{{item.time2}}


computed: {
optionSingleHeightTime() {
return {
singleHeight: 53,
waitTime: 1500
}
}
},

element轮播

https://element.eleme.cn/#/zh-CN/component/carousel

vant轮播

https://vant-contrib.gitee.io/vant/#/zh-CN/swipe

swiper

https://swiperjs.com/vue/
高版本swiper在低版本ie会有兼容问题影响样式

手写

code

.chartsposi1 {
_transform: translateX(0);
}
.chartsposi2 {
_transform: translateX(-1174px);
transition: all 2s ease;
}
this.tansfX = ‘chartsposi2’
setTimeout(() =>_ this.tansfX = ‘charts_posi1’, 2000)