网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

前端開發常見問題精選(三)

發布時間:2018-04-25 09:29 所屬欄目:小程序開發教程

一、如何禁止微信h5頁面默認下拉,并且同時頁面局部可滾動?

眾所周知,微信瀏覽器默認是可以上拉和下拉的,就像下面這樣:

然而,有時候我們需要禁止它,那該怎么做呢?

1. 禁止頁面的touchmove事件

document.addEventListener('touchmove',function(e){
    e.preventDefault();
});

該方法簡潔明了,但是問題來了,瀏覽器默認下拉是禁掉了,可頁面卻不能滑動了。因此,該方法只適用于在單屏內能夠顯示全內容的頁面。

2. 使用iScroll.js插件

該方法才是真正要提到的,既可以禁止瀏覽器默認下拉,也能同時讓頁面局部可滾動。

使用iScroll.js插件時需要注意一下幾點:

① 調用該插件的對象元素只能存在一個子元素,也就是說如果在滾動區域中存在多個子元素,需要使用一個元素來包裹它們。
② 調用該插件的對象元素樣式中最好不要設置外邊距,否則可能出現寬高計算不準確的情況。
③ 使用該插件的默認狀態下,滾動區域內的按鈕、鏈接等一切可點擊元素均失效,如需恢復正常點擊,可以配置options.click為true。

iScroll.js插件的具體用法可以參考:http://wiki.jikexueyuan.com/project/iscroll-5/。

二、Less中寫border-radius時用到 “/” 時該如何處理?

不知道大家現在寫CSS是怎么寫呢?是直接寫原生的CSS,還是使用像Sass或Less這樣的預編譯語言呢?

如果你是習慣使用Less,那么遇到border-radius中的 “/” 該如何處理呢?

大家可能都知道border-radius有很多種寫法,不知道的話可以看《你不知道的CSS3圓角》這篇文章,其中有比較詳細的介紹。然而,如果是在Less中直接寫 “/” 可不行,因為它會被認為是個除號而直接參與運算了。這時的解決方法就是使用 e(“/”) 來替代,比如像下面這樣:

//Less代碼
.box{ border-radius: 5px e("/") 10px;}
//編譯后的CSS代碼
.box{ border-radius: 5px / 10px;}

三、Less中如何寫循環?

Less中的循環其實就像是其他編程語言中通常意義上的遞歸調用,用法如下:

.loop(@n, @i:1) when (@i <= @n){    // 此處僅為函數定義
  .loop(@n,@i+1);
}
.loop(4);    // 此處為函數調用,代表循環4次

其中loop是方法名,可以由自己喜好定義,i 是循環因子,n 是循環次數。比如想要給列表元素有規律地依次設置不同大小,可以這樣寫:

//Less代碼
.loop(@n, @i:1) when (@i <= @n){    // 此處僅為函數定義
  li:nth-child(@{i}){     // 注意此處需用 {} 將 i 括起
      width: @i*100px;
      height: @i*100px;
  }
  .loop(@n,@i+1);
}
.loop(4);
//HTML代碼
       
  •  
  •    
  •  
  •    
  •  
  •    
  •  

這時四個 li 元素的寬高分別為 100、200、300和400。

四、如何將一個數組中的元素全部賦值給另外一個數組?

你可能會想,這還不簡單,將 a 數組直接賦值給 b 數組不就行了嗎? 就像下面這樣:

var a = [1,2,3];
var b = a;

實際上通過這種方式賦值只不過是將 a 數組所在地址賦值給了 b,如果 b 中元素改變其實也就改變了 a 元素,那么該如何保證賦值操作之后改變 b 而不會影響 a 呢?

其實這里就涉及到的深拷貝和淺拷貝的區別了。

簡單來說,淺拷貝其實就是簡單地對地址的賦值,上面例子就是淺拷貝。

而這里我們要說的是數組的深拷貝,也就是開辟一個新的存儲地址,然后將 a 數組中的所有元素存入該新地址中,最后將 b 指向該地址。

具體實現其實非常簡單:

b = [].concat(a);

我們知道,JS數組方法中的concat()是用于合并兩個數組的,返回的是一個新的數組。

以上是我在工作當中所遇到的一些問題總結,在此與大家共勉!



易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/23984.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×