自己造的一个 vue 轮播图, 支持全屏, 无限滚动, 功能有待完善
敬上代码, 抛砖引玉
- <template>
- <div class="swiper-wrap" ref="swiperWrap" :style='`height: ${config.height}px;`'>
- <div class="handle-direction">
- <span class="prve" @click="prve"><</span>
- <span class="next" @click="next">></span>
- </div>
- <div class="showView" :style='`width: ${config.width}px; height: ${config.height}px;`'>
- <ul ref="list" class="list" :style='`left: -${left}px; transition: none`'>
- <li v-for="(item, i) in swiperList" :style='`width: ${config.width}px; height: ${config.height}px;`' :key="i">{{item}}</li>
- </ul>
- </div>
- </div>
- </template>
- <script>
- export default {
- data () {
- return {
- config: {
- height: 667,
- width: 1920,
- current: 1,
- transitionTime: 1,
- delay: 0
- },
- list: [1, 2, 3, 4]
- }
- },
- computed: {
- left () {
- return this.config.width * this.config.current
- },
- swiperList () {
- let swiperList = [this.list[this.list.length-1], ...this.list, this.list[0]]
- return swiperList
- }
- },
- mounted () {
- const $this = this
- this.resetWidth()
- Windows.addEventListener('resize', () => {
- $this.resetWidth()
- })
- },
- methods: {
- resetWidth () {
- const width = this.$refs.swiperWrap.clientWidth
- this.config.width = width
- this.config.height = width / 1920 * 667
- },
- prve () {
- if (new Date().valueOf() - this.config.delay <= this.config.transitionTime * 1000) {
- return
- }
- this.config.delay = new Date().valueOf()
- this.animation(false)
- },
- next () {
- if (new Date().valueOf() - this.config.delay <= this.config.transitionTime * 1000) {
- return
- }
- this.config.delay = new Date().valueOf()
- this.animation(true)
- },
- animation (isNext) {
- const $this = this
- const length = this.list.length
- let timer = null
- let $ul = this.$refs.list
- $ul.style.transition = `left ${this.config.transitionTime}s`
- isNext ? this.config.current ++ : this.config.current --
- clearTimeout(timer)
- if (this.config.current> length) {
- timer = setTimeout(() => {
- $ul.style.transition = 'none'
- $this.config.current = 1
- clearTimeout(timer)
- }, 1050);
- timer = setTimeout(() => {
- $ul.style.transition = `left ${this.config.transitionTime}s`
- clearTimeout(timer)
- }, 1100);
- }
- if (this.config.current <1) {
- timer = setTimeout(() => {
- $ul.style.transition = 'none'
- $this.config.current = length
- clearTimeout(timer)
- }, 1050);
- timer = setTimeout(() => {
- $ul.style.transition = `left ${this.config.transitionTime}s`
- clearTimeout(timer)
- }, 1100);
- }
- }
- }
- }
- </script>
- <style lang="stylus" scoped>
- .swiper-wrap
- position relative
- &:hover
- .handle-direction
- transition opacity 0.3s
- opacity 1
- .handle-direction
- opacity 0
- span
- display inline-block
- cursor pointer
- border-radius 3px
- width 20px
- height 20px
- line-height 20px
- background rgba(150, 150, 150, 0.2)
- z-index 2
- position absolute
- top 50%
- margin-top -10px
- .prve
- left 20px
- .next
- right 20px
- .showView, .list
- position absolute
- top 0
- left 0
- .showView
- overflow hidden
- .list
- width 100000%
- text-align left
- li
- text-align center
- display inline-block
- &:nth-child(1)
- background #eee
- &:nth-child(2)
- background #bbb
- &:nth-child(3)
- background #ccc
- &:nth-child(4)
- background #ddd
- &:nth-child(5)
- background #eee
- &:nth-child(6)
- background #bbb
- </style>
来源: http://www.bubuko.com/infodetail-2788843.html