{"id":17571259,"url":"https://github.com/netpi/dbvr","last_synced_at":"2025-03-29T14:45:29.992Z","repository":{"id":83303181,"uuid":"88496082","full_name":"netpi/dbvr","owner":"netpi","description":null,"archived":false,"fork":false,"pushed_at":"2017-04-19T09:21:57.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-04T15:48:32.452Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/netpi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-17T10:04:56.000Z","updated_at":"2017-04-17T10:06:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"36261fbc-1448-4699-8e28-0a54bb7df806","html_url":"https://github.com/netpi/dbvr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fdbvr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fdbvr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fdbvr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/netpi%2Fdbvr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/netpi","download_url":"https://codeload.github.com/netpi/dbvr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246200296,"owners_count":20739563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-21T18:23:18.142Z","updated_at":"2025-03-29T14:45:29.948Z","avatar_url":"https://github.com/netpi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 多乐VR 实现\n\n线上演示地址1  http://dlvr.netpi.me/all\n\n线上演示地址2(https) https://dlvr.now.sh\n\n![](https://olxvlcccu.qnssl.com/blog/jiov3.jpg?imageslim)\n\n---\n\n### 技术选型\n\n`vue`  `vuex` \n\n`bulma` 作为UI框架\n\n[Swiper](https://github.com/nolimits4web/Swiper) 来做图片滑动轮播\n\n`animate.css` 来实现动画效果 (弹性滑动 / 淡入淡出)\n\n`vue-router` 实现浏览器 history 模式\n\n\n## 主要实现思路\n\n#### 1：首屏上半部分的广告轮播，可以左右滑动广告 和 自动轮播。\n\n利用 [Swiper](https://github.com/nolimits4web/Swiper) 实现\n\n\n#### 2: 中部的几个图标点进去，各自展示各自的内容，在打开的页面上，可以返回。\n\n* 利用vue-router 实现history模式\n\n* 利用正则表达式判断页面深度 `if(pathdeep\u003c=1) return =\u003e目录导航` `else =\u003e 导航部分替换成 回退导航`\n\n  ```javascript\n  // 判断页面深度部分\n  pathDeep(){\n    const patharr =  this.$route.path.match(/(\\/[^/]+)/g)||[]\n    return patharr.length\n  }\n  ```\n\n\n#### 3: 内容点进去 是各个不同的频道，这些频道可以轮播效果。\n\n `zepto` + `vue-router` **实现页面滑动轮播, 具体实现如下**\n\n- 利用`vue-router`获取到 `path`\n- `zepto` 监听滑动事件\n- 判断下次跳转目标 利用 `router.replace(location)` 实现更换地址\n\n\u003e 部分代码\n\n```javascript\n$(\"#wrap\").on('swipeRight',function(){      \n  nextTo(path,'right')\n})\n$(\"#wrap\").on('swipeLeft',function(){\n  nextTo(path,'left')\n})\n\nfunction nextTo(pathname,direction=\"left\") {\n  const arr = [\"/all\",\"/cartoon\",\"/game\",\"/movie\",\"/try\",\"/scenery\"]\n  let index = arr.findIndex(item =\u003e item == pathname)\n  let nextIndex = 0\n  console.log('pathname',pathname)\n  if(direction === 'left'){\n    nextIndex = index == arr.length-1\n    ? 0\n    : index+1\n  }\n  if(direction === 'right'){\n    nextIndex = index === 0\n    ? arr.length-1\n    : index-1\n  }\n  router.replace(arr[nextIndex])\n}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetpi%2Fdbvr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnetpi%2Fdbvr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnetpi%2Fdbvr/lists"}