原创 React hooks組件中,定義的方法取不到新的state值的坑

項目中使用postal訂閱方法時,使用react hooks useEffect去監聽方法時,發現取到的state一直是舊的值,然後重寫了例子。 假設有個需求,父組件修改顏色,父組件會把該顏色傳到子組件,子組件每次點擊會打印當前

原创 微信小程序,使用scroll-view實現下拉加載更多(下一頁)源碼

maker一下使用scroll-view實現下拉加載更多(下一頁),比較粗糙,如下圖。 由於數據是死數據,只能加載一次(如圖)。 源碼下載:http://download.csdn.net/download/dknightl/9

原创 微信小程序頁面使內容充滿整個屏幕(高度、寬度100%),並使內容水平和豎直都居中

很多時候,我們會希望將內容充滿整個屏幕(高度、寬度100%),如下圖 代碼如下 wxml頁面代碼 <view class="empty_tip "> <image class="" src="../.

原创 Microsoft Edge中的底部border bug,鼠標懸浮上去的時候下邊框消失問題

在stackoverflow找到了解決方案 原文鏈接 原因: 如果高度或寬度是動態的並且沒有四捨五入的像素大小就會出現問題 解決 1.設置 margin-bottom: -1px; 2.設置border-bottom: 2p

原创 針對IE和edge瀏覽器的css樣式寫法

只在ie瀏覽器下生效 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { //針對ie div { padding-bottom: 1

原创 佈局

1. 九宮格佈局 可以通過float、定位佈局去實現,用戶可以根據自己需要去佈局,每個格子的默認寬高均爲1,,每個格子僅可以放置一個字段。 const GridInfo = { layout: [3, 3],//行列 c

原创 React 阻止事件冒泡、stopPropagation和stopImmediatePropagation分析,解決stopPropagation沒有阻止冒泡問題

前言 做項目過程中, 發現了一個問題,onClik阻止冒泡事件並沒有生效,僅僅只是阻止outClick,我的需求是隻觸發"inner dom click",(PS:不想知道過程的可以直接跳過看最後的結論) 下面代碼的輸出是(代碼鏈

原创 IE中輸入框綁定input事件觸發解析(input事件初始化自動執行問題解決)

在React項目中碰到了個問題,輸入框綁定了input事件,在IE中初始化會自動執行,剛開始以爲是只要有placeholder就會導致問題,後面網上搜了一輪,自己手擼了一下,總結了導致綁定的input事件自動執行的原因 1.輸入

原创 CSS3 transform對普通元素z-index、positon和overflow的影響,

transform對普通元素的影響是個巨坑,自己親身體驗的總共有三點 提升元素的垂直地位,也就是z-index會變大 改變元素的定位屬性,fixed變成absolute,absolute變成relative 使絕對定位(abs

原创 手擼兩端固定,中間隨內容自動撐高的H5代碼,達到一定高度中間內容出現滾動條

工作上遇到的,感覺比較實用,記錄一下 沒超過最大高度不會有滾動條 內容超過出現滾動條 /* css代碼 */ .box{ display: flex; flex-directi

原创 適用於前端JS中文排序的方法(localeCompare)

localeCompare方法返回一個數字來指示一個參考字符串是否在排序順序前面或之後或與給定字符串相同。 referenceStr.localeCompare(compareString[, locales[, options

原创 JS拖拽時禁止點擊事件的三種方法

做項目的時候碰到一個問題,表格列頭點擊排序,但是拖動列排序的時候也會觸發表頭的單擊事件,找了一圈,大致都是兩種思路,但是原理都一樣。 就是js點擊事件和拖拽事件都會執行mousedown(鼠標按下)和mouseup(鼠標釋放)兩個事

原创 鼠標懸停改變滾動條樣式(高度、寬度、顏色)

接到UE需求,需要對界面滾動條進行修改,主要是鼠標懸停改變顏色和大小,心裏想着是比較簡單的(萬惡的IE肯定不在考慮範圍內),誰知道愣是搞了半天才完成ORZ,直接上源碼和實現圖吧。 css代碼 ::-webkit-sc

原创 html表格table設置 border-collapse: collapse後,表格寬度大於父容器寬度的處理

先上結論:1. table-layout: fixed 2.在表格的第一行設置一個隱藏的 設置的寬度是650,瀏覽器顯示卻是653,你需要在表格table標籤設置一個屬性table-layout: fixed,接着你會發現第一行單元

原创 js禁止右鍵

禁止右鍵菜單一搜就有了,下面代碼是禁止右鍵事件,可以根據event的which或者bottun進行判斷禁止 $('#11').mousedown(function(e){ if(3 == e.which){// or e.bo