資訊專欄INFORMATION COLUMN
摘要：首頁的彈窗和天氣效果都挺好，最近琢磨了一下用來仿造出這樣的效果，主要是彈窗控件這塊，也考慮了一下窗口的復(fù)用，下面展示一下做好后的效果，注樣式只是隨便調(diào)了一下，畢竟沒有那么多時(shí)間去弄樣式分析思路制作思路首先是左邊鼠標(biāo)放到頭像上顯示出窗口并且?guī)?/p>
QQ首頁的彈窗和天氣效果都挺好，最近琢磨了一下用electron來仿造出這樣的效果，主要是彈窗控件這塊，也考慮了一下窗口的復(fù)用，下面展示一下做好后的效果，注：樣式只是隨便調(diào)了一下，畢竟沒有那么多時(shí)間去弄樣式
制作思路首先是左邊鼠標(biāo)放到頭像上顯示出窗口并且?guī)в袆?dòng)畫效果，鼠標(biāo)在兩個(gè)窗口之間來回移動(dòng)窗口會(huì)跟隨移動(dòng)并且切換內(nèi)容，不難發(fā)現(xiàn)此時(shí)移動(dòng)的時(shí)候是復(fù)用的一個(gè)窗口，這樣可以減少創(chuàng)建窗口的開銷，天氣那里窗口反轉(zhuǎn)用個(gè)路由動(dòng)畫就可以了
解決方案解決方案直接寫代碼吧，這里使用了electron-vue和electron-vue-windows兩個(gè)插件，如果不了解具體可以看這里electron-vue-windows，思路是通過reuse這個(gè)屬性就可以直接讓窗口復(fù)用，當(dāng)調(diào)用closeWin()的時(shí)候?qū)嶋H上是吧窗口隱藏掉了，這樣就減少了創(chuàng)建窗口的開銷，窗口打開時(shí)的動(dòng)畫一個(gè)效果就搞定了，但是窗口已經(jīng)打開只能通過移動(dòng)動(dòng)畫來達(dá)到移動(dòng)的效果，就是animation，所以我們要加一個(gè)判斷如果窗口已經(jīng)打開就移動(dòng)沒有打開的話就創(chuàng)建，代碼如下：
openLeft (e, index) {
clearTimeout(this.timeTap)
let width = 300
// 獲取當(dāng)前窗口的寬高，用于定位子窗口位置
let fatherBounds = this.$Win.win.getBounds()
// 判斷右邊是否過界（計(jì)算出子窗口的坐標(biāo)點(diǎn)）
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) {
// 如果存在跳轉(zhuǎn)路由，并重新發(fā)送數(shù)據(jù)
this.$Win.routerPush({
router: "/infoWindow/" + index,
win: win,
data: {name: index}
})
win.show()
// 動(dòng)畫過度到新位置
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 // 動(dòng)畫時(shí)間
},
data: {name: index},
reuse: true,
reload: true,
vibrancy: true
},
x: x,
y: y,
alwaysOnTop: true,
skipTaskbar: true
})
win.show()
}
}
另外一個(gè)天氣窗口，注意qq的天氣窗口是可以旋轉(zhuǎn)的，所以此時(shí)是不能用背景模糊的窗口來做，只能使用透明窗口，那么反轉(zhuǎn)的效果也很容易，直接寫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()
}
窗口反轉(zhuǎn)的代碼如果不懂可以看這里
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108563.html
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
摘要：項(xiàng)目地址暫時(shí)只實(shí)現(xiàn)了基本功能加了一點(diǎn)微小的效果主要適配瀏覽器對和做了一點(diǎn)微小的適配現(xiàn)在已經(jīng)包括了打包平臺(tái)的功能了源碼地址項(xiàng)目預(yù)覽項(xiàng)目描述前端部分整體加載進(jìn)度懶加載模塊的加載中提示實(shí)現(xiàn)了滑塊增量分頁新曲等使用了做單頁應(yīng)用使用了處理路由使用了管 項(xiàng)目地址 暫時(shí)只實(shí)現(xiàn)了基本功能 加了一點(diǎn)微?小的效果 主要適配pc瀏覽器 對android 和ios 做了一點(diǎn)微?小的適配 現(xiàn)在已經(jīng)包括了ele...
閱讀 1297·2021-09-02 13:36
閱讀 2758·2019-08-30 15:44
閱讀 3006·2019-08-29 15:04
閱讀 3231·2019-08-26 13:40
閱讀 3699·2019-08-26 13:37
閱讀 1216·2019-08-26 12:22
閱讀 1063·2019-08-26 11:36
閱讀 1246·2019-08-26 10:41
