原创 socketio express配置
1、安裝 cnpm install socket.io --save 2、服務器端配置 (1)在express創建好應用後 var server = require('http').Server(app); (
2020-06-30 10:25:22
2
原创 滾動條加載後滑動到內容底部,且隨內容增加而自動滑動
componentDidMount() { // 初始顯示列表 window.scrollTo(0, document.body.scrollHeight) } componentDidUpdate ()
2020-06-30 10:25:22
原创 用戶聊天消息處理(消息分組、未讀消息、已讀清除等)
每條消息都要設置一個是否已讀的屬性 消息分組: 後臺返回和當前用戶相關的所有消息,根據當前用戶和不同用戶直接的聊天標識, 返回對應的分組消息列表 未讀消息: 後臺返回所有的消息後,根據和不同用戶的聊天標識,獲取相應的聊
2020-06-30 10:25:21
原创 react context解決多層組件傳參
能夠更方便的在多層組件中傳遞參數 1、創建上下文對象,並設定初始值 const xx=React.createContext(參數); 2、改變context的初始值 <xx.Provider value ={值}>
2020-06-30 10:25:21
11
原创 css動畫 卡片翻轉顯示不同內容
做法: 兩個div重疊,元素設置背面不可見屬性,剛開始將第二個div繞y軸翻轉180度不可見 當鼠標放上父元素時,讓兩個子元素都旋轉,設置第一個子元素繞y軸翻轉180度不可見,讓第二個子元素繞y軸翻轉回0度可見 代碼示例:
2020-06-30 10:25:21
原创 css動畫 形變、運動、3d詳解
transform變化: 以' '空格分隔,可以一次寫多個變化 同個元素多個transform,其他transform不會保留之前的效果,需要重寫 移動: translateX(npx); translateY(np
2020-06-30 10:25:21
原创 css 柵格系統
父元素容器設置柵格: 內部子元素會按順序從左往右依次排列在柵格內 聲明柵格容器 display: grid; 父元素得有高寬 display:inline-grid; 行內柵格 繪製每格 方式一(
2020-06-30 10:25:21
原创 css動畫 繪製3d立體按鈕
做法: 在設置好平面div後,利用其前後僞類,定位到左邊和下邊, 分別設置左邊向上傾斜,下面像左傾斜,最後設置整個平面傾斜增加立體感 代碼示例: <!DOCTYPE html> <html> <head> <meta
2020-06-30 10:25:21
3
原创 css動畫 翻開摺疊生日賀卡
做法: 平面div,設置前後僞類分別覆蓋一半大小,設置前面的僞類旋轉點爲最左邊的線,旋轉角度爲負值向外 設置後面的僞類旋轉點爲最右邊的線,旋轉角度爲正值向內 設置最外層元素transform-style: preserve-
2020-06-30 10:25:21
1
原创 css動畫 點置紅心放大變色效果
做法: 兩個星重疊,觸發時,讓第一個星放大變色,然後透明度爲0，同時設置第二個星爲原來大小且爲紅色 代碼示例: 效果圖:
2020-06-30 10:25:21
原创 css動畫 傾斜設置按鈕背景填滿
代碼示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="./ind
2020-06-30 10:25:21
原创 ReactHook CallbackHook
用於改善回調函數,當依賴項更新時纔會重新渲染返回新的函數 否則會一直使用緩存的舊函數 1、引入 import React, {Component,useContext } from 'react'; 2、定義 const
2020-06-30 10:25:21
原创 移動端切屏動畫-切換頁面展開時上個頁面漸變消失當前頁面出現
做法: a標籤+target僞類,a標籤的id綁定頁面元素的id,初始元素在屏幕外, 使用target僞類當點擊超鏈接時添加移動樣式,並會顯示對應target元素的內容 代碼示例: <!DOCTYPE html> <html
2020-06-30 10:25:21
原创 css 屬性簡寫
字體: font:權重 風格 大小/行高 字體 font:bolder italic 45px/1.5em '黑體'; 行高和大小是通過'/'寫在一起的 背景: background:url(圖片路徑) 圖片模式 寬 高
2020-06-30 10:25:20
原创 ReactHook RefHook
除了可以進行ref操作以外,還能進行數據存儲的操作 1、引入 import React, { Component,useRef } from 'react'; 2、使用ref const xx=useRef(任意內容
2020-06-30 10:25:19