用electron仿qq首页

Bmob 发布于2019-08-26 12:22 / 1026人阅读

摘要：首页的弹窗和天气效果都挺好，最近琢磨了一下用来仿造出这样的效果，主要是弹窗控件这块，也考虑了一下窗口的复用，下面展示一下做好后的效果，注样式只是随便调了一下，毕竟没有那么多时间去弄样式分析思路制作思路首先是左边鼠标放到头像上显示出窗口并且带

QQ首页的弹窗和天气效果都挺好，最近琢磨了一下用electron来仿造出这样的效果，主要是弹窗控件这块，也考虑了一下窗口的复用，下面展示一下做好后的效果，注：样式只是随便调了一下，毕竟没有那么多时间去弄样式

分析思路

制作思路首先是左边鼠标放到头像上显示出窗口并且带有动画效果，鼠标在两个窗口之间来回移动窗口会跟随移动并且切换内容，不难发现此时移动的时候是复用的一个窗口，这样可以减少创建窗口的开销，天气那里窗口反转用个路由动画就可以了

解决方案

解决方案直接写代码吧，这里使用了electron-vue和electron-vue-windows两个插件，如果不了解具体可以看这里electron-vue-windows，思路是通过reuse这个属性就可以直接让窗口复用，当调用closeWin()的时候实际上是吧窗口隐藏掉了，这样就减少了创建窗口的开销，窗口打开时的动画一个效果就搞定了，但是窗口已经打开只能通过移动动画来达到移动的效果，就是animation，所以我们要加一个判断如果窗口已经打开就移动没有打开的话就创建，代码如下：

openLeft (e, index) {
  clearTimeout(this.timeTap)
  let width = 300
  // 获取当前窗口的宽高，用于定位子窗口位置
  let fatherBounds = this.$Win.win.getBounds()
  // 判断右边是否过界（计算出子窗口的坐标点）
  let leftWidth = e.screenX - e.offsetX - width - 15
  let x = leftWidth < 0 ? leftWidth + width + fatherBounds.width : leftWidth
  let y = e.screenY - e.offsetY
  // 查询子窗口是否存在
  let win = this.$Win.getWinByName("leftname")
  if (win) {
    // 如果存在跳转路由，并重新发送数据
    this.$Win.routerPush({
      router: "/infoWindow/" + index,
      win: win,
      data: {name: index}
    })
    win.show()
    // 动画过度到新位置
    this.$Win.animation({
      win: win,
      time: 200,
      to: {
        x: x,
        y: y
      }
    })
  } else {
    this.$store.dispatch("changeTransition", "default")
    // 不存在子窗口就新建窗口
    win = this.$Win.createWin({
      width: 300,
      height: 200,
      windowConfig: {
        router: "/infoWindow/" + index,
        name: "leftname",
        customAnimation: {
          fromPosition: {x: x, y: y - 50},
          time: 300 // 动画时间
        },
        data: {name: index},
        reuse: true,
        reload: true,
        vibrancy: true
      },
      x: x,
      y: y,
      alwaysOnTop: true,
      skipTaskbar: true
    })
    win.show()
  }
}

另外一个天气窗口，注意qq的天气窗口是可以旋转的，所以此时是不能用背景模糊的窗口来做，只能使用透明窗口，那么反转的效果也很容易，直接写css就行了，代码如下：

showwindow () {
  let fatherBounds = this.$Win.win.getBounds()
  // 判断右边是否过界
  let leftWidth = window.screen.width - fatherBounds.width - fatherBounds.x - 300
  let x = leftWidth >= 0 ? fatherBounds.width + fatherBounds.x : fatherBounds.x - 300
  let y = fatherBounds.y
  let win = this.$Win.createWin({
    width: 300,
    height: 200,
    x: x,
    y: y,
    windowConfig: {
      router: "/cloudWindow",
      vibrancy: false,
      name: "cloud",
      animation: "fromBottom"
    }
  })
  win.show()
}

窗口反转的代码如果不懂可以看这里

idc机房托管专线服务仿微软首页仿腾讯迷你首页仿360首页效果仿qq头像截取

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108563.html

Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

leap_frog 2019-08-29 12:42 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

graf 2019-08-20 17:03 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

LittleLiByte 2019-08-05 11:23 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

摘要：项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管项目地址暂时只实现了基本功能加了一点微?小的效果主要适配pc浏览器对android 和ios 做了一点微?小的适配现在已经包括了ele...

melody_lql 2019-08-01 16:57 评论0 收藏0
滑动 - 收藏集 - 掘金

摘要：分析提到侧滑删除，一个经典的例子就是玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源，估计有一段历史了。列表左右滑动开源组件掘金是一款用于为上的排布提供左滑右滑操作的库。 Android 仿 YouTube 拖拽视频效果的实现 - Android - 掘金Android仿YouTube拖拽视频效果的实现 youtube-like-drag-video-view 代码已经开源到GitH...

ShevaKuilin 2019-06-25 11:22 评论0 收藏0