https://github.com/netpi/dbvr

https://github.com/netpi/dbvr

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/netpi/dbvr
• Owner: netpi
• Created: 2017-04-17T10:04:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-19T09:21:57.000Z (about 8 years ago)
• Last Synced: 2025-02-04T15:48:32.452Z (3 months ago)
• Language: JavaScript
• Size: 72.3 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 多乐VR 实现

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

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

![](https://olxvlcccu.qnssl.com/blog/jiov3.jpg?imageslim)

---

### 技术选型

`vue`  `vuex` 

`bulma` 作为UI框架

[Swiper](https://github.com/nolimits4web/Swiper) 来做图片滑动轮播

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

`vue-router` 实现浏览器 history 模式

## 主要实现思路

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

利用 [Swiper](https://github.com/nolimits4web/Swiper) 实现

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

* 利用vue-router 实现history模式

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

  ```javascript

  // 判断页面深度部分

  pathDeep(){

    const patharr =  this.$route.path.match(/(\/[^/]+)/g)||[]

    return patharr.length

  }

  ```

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

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

- 利用`vue-router`获取到 `path`

- `zepto` 监听滑动事件

- 判断下次跳转目标 利用 `router.replace(location)` 实现更换地址

> 部分代码

```javascript

$("#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])

}

```