netpi/dbvr

多乐VR 实现

线上演示地址1 http://dlvr.netpi.me/all

线上演示地址2(https) https://dlvr.now.sh

---

技术选型

vue vuex

bulma 作为UI框架

Swiper 来做图片滑动轮播

animate.css 来实现动画效果 (弹性滑动 / 淡入淡出)

vue-router 实现浏览器 history 模式

主要实现思路

1：首屏上半部分的广告轮播，可以左右滑动广告 和 自动轮播。

利用 Swiper 实现

2: 中部的几个图标点进去，各自展示各自的内容，在打开的页面上，可以返回。

• 利用vue-router 实现history模式

• 利用正则表达式判断页面深度 if(pathdeep<=1) return =>目录导航 else => 导航部分替换成 回退导航

  // 判断页面深度部分
  pathDeep(){
    const patharr =  this.$route.path.match(/(\/[^/]+)/g)||[]
    return patharr.length
  }

3: 内容点进去 是各个不同的频道，这些频道可以轮播效果。

zepto + vue-router 实现页面滑动轮播, 具体实现如下

• 利用vue-router获取到 path
• zepto 监听滑动事件
• 判断下次跳转目标 利用 router.replace(location) 实现更换地址

部分代码

$("#wrap").on('swipeRight',function(){      
  nextTo(path,'right')
})
$("#wrap").on('swipeLeft',function(){
  nextTo(path,'left')
})

function nextTo(pathname,direction="left") {
  const arr = ["/all","/cartoon","/game","/movie","/try","/scenery"]
  let index = arr.findIndex(item => item == pathname)
  let nextIndex = 0
  console.log('pathname',pathname)
  if(direction === 'left'){
    nextIndex = index == arr.length-1
    ? 0
    : index+1
  }
  if(direction === 'right'){
    nextIndex = index === 0
    ? arr.length-1
    : index-1
  }
  router.replace(arr[nextIndex])
}