原创 js實現返回上一頁(頁面刷新與不刷新)

返回上一頁不刷新: a標籤 <a href="javascript :;" onclick="javascript:history.back(-1)">返回上一頁</a> 按鈕 <input type="button" na

原创 彈性佈局flex實現移動端“頭尾固定,中間區域滑動”效果

頭尾固定,中間區域可以滑動效果是移動端最常見的效果,以京東頁面爲例。以前開發時常用的方法是用固定佈局position:fixed;實現,但是該方法在ios上或者其他機型上會出現問題。現在,可以用flex方法快速實現該佈局。

原创 移動端H5頁面上傳圖片或上傳圖片

在做移動端頁面開發的時候,經常會遇到需要上傳圖片。比如頭像上傳,發表動態上傳多張圖片。 一、多張圖片上傳 html <div class="addimg" style="display: flex; flex-flow:r

原创 怎麼讓背景圖片鋪滿整個頁面

方法一、background背景圖片設置 html, body { width: 100%; height: 100%; background: url(../images/bg.png) no-repeat; backg

原创 vue-cli3+工具中,配置路徑別名(vue.config.js)

vue-cli 2.x 版本創建項目時,我們可以在 build 文件夾下找到 webpack.base.conf.js 文件,在裏面修改 resolve.alias 即可。 resolve: { extensions:

原创 手機端如何根據設計圖尺寸快速開發

兩種常用的解決方案 1、通過動態設置 viewport的 width 和 initial-scale 2、通過動態設置跟元素Html的font-size 即 rem解決方案 方法一 meta viewport meta

原创 vuecli3+工具中,封裝tabbar組件(底部導航欄)

如圖,封裝tabbar組件(其他項目中可複用) 開發過程: 1、TabBar 和 TabBarItem 組件封裝 2、給TabBarItem傳入active圖片 3、TabBarItem 和 路由(router)結合 4、Tab

原创 移動端禁止/取消長按進行復制粘貼的操作

項目中長按刪除、長按添加關注等功能是很常見的。但是手機端長按默認是會在周邊隨便選中文字彈出自帶的複製粘貼的操作,所以我們需要禁止掉移動端長按進行復制粘貼的操作。(可以防止內容被複制) *{ -webkit-touch-cal

原创 網頁中滾動條的設置和修改

一、通過css設置滾動條 在所有瀏覽器,滾動條可定製性最強的當屬webkit內核的瀏覽器了。因爲源代碼開放的原因,市面上基於webkit內核的瀏覽器也是很難窮舉完。例如有:Google Chrome、Opera(opera最近宣佈使用we

原创 Bootstrap4常用類

一、shrink-to-fit=no <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 這行代碼的作用可

原创 水果匯

一、讀詞頁 知識點:從數組中隨機選取一個元素,上一個,下一個,發音讀詞(英語) 有道單詞發音接口 http://dict.youdao.com/dictvoice?audio= http://dict.youdao.com/d

原创 html片段拼接

方法一: function dialog1(title, msg, btn1, callback) { var dialog1; dialog1 = ' <div class="weui_dialog_confi

原创 @media媒體查詢判斷iPhone各版本

/*iPhone5和iPhone SE*/ @media only screen and (device-width : 320px) and (device-height : 568px) and

原创 常用的前端動畫庫,讓你的交互更加酷炫

一、Animate.css 一款強大的預設css3動畫庫 強大的跨平臺的預設css3動畫庫,內置了很多典型的css3動畫,兼容性好使用方便。 官網:http://www.animate.net.cn/ 二、aos.js-超讚頁面滾

原创 jQuery綁定動態元素的點擊事件無效

之前就一直受這個問題的困擾,在寫ajax加載數據的時候發現,後面追加進來的demo節點元素,失去了之前的點擊事件。爲什麼點擊事件失效,我們該怎麼去解決呢?那麼,我們通過下面的示例簡單說明。 示例如下: <div> <ul