页面交互效果

236 阅读1分钟

偷懒式

  • 展示更多 arr.list 前10个 el.show = true 后 el.show = false

打字机效果

  • 一个字一个字添加
  • 添加蒙层 一个字一个字移开
oTyping: {
    t0: {
        desc: '标题XXX<b>XXX</b>X<b>XXX</b>',
        title: '',
        arr: ['标', '题', 'X', 'X', 'X',
            '<b>X</b>', '<b>X</b>', '<b>X</b>', 'X', '<b>X</b>', '<b>X</b>', '<b>X</b>'
        ]
    },
    t1:{.......},
    t2:{.......}
},
mounted() {
    this.typing()
},

typing() {
   clearInterval(this.typingTimer)
   this.oTyping.t0.title = this.oTyping.t1.title = this.oTyping.t2.title = ''
   const index = `t${this.currStep}`, arr = this.oTyping[index].arr, len = arr.length
   let ret = '', i = 0
   this.typingTimer = setInterval(() => {
       ret += arr[i]
       this.oTyping[index].title = `${ret}${i == len - 1 ? '' : '_'}`
       i++
       i == len && clearInterval(this.typingTimer)
   }, 44)
},