1. 程式人生 > >解決mint-ui元件spinner和indicator在華為自帶瀏覽器上不旋轉、動畫失效問題

解決mint-ui元件spinner和indicator在華為自帶瀏覽器上不旋轉、動畫失效問題

在寫完mint-ui的vue專案,打包後,去檢查css檔案的時候會發現,css樣式裡面的所有-webkit-animation都沒有了,所以在一些不相容animation屬性的瀏覽器上動畫就會不起效果。這個是由於optimize-css-assets-webpack-plugin這個外掛的問題。

解決方案:

1.找到webpack.prod.conf.js,註釋掉以下程式碼:

// new OptimizeCSSPlugin({ // cssProcessorOptions: config.build.productionSourceMap // ? { safe: true, map: { inline: false } }
// : { safe: true } // }),

2.由於這段程式碼是實現css壓縮的,註釋掉css檔案就不會壓縮,所以需要處理一下,還要讓css檔案壓縮

在utils.js中新增minimize:true 

const cssLoader = { loader: 'css-loader', options: { sourceMap: options.sourceMap,minimize:true } }

處理完這些,重新打包專案上線,在華為自帶瀏覽器上就能看到spinner元件的動畫效果。

目前我的處理方法是這樣的,而且有效,如果你按照這個方法處理無效,可以留言或者加QQ一起探討。

QQ:1150239832

相關推薦

解決mint-ui元件spinnerindicator瀏覽器旋轉動畫失效問題

在寫完mint-ui的vue專案,打包後,去檢查css檔案的時候會發現,css樣式裡面的所有-webkit-animation都沒有了,所以在一些不相容animation屬性的瀏覽器上動畫就會不起效果。這個是由於optimize-css-assets-webpack-plug

瀏覽器虛擬導航欄導致頁面顯示問題解決辦法

通過js識別華為瀏覽器 對dom做特殊處理 const ua = navigator.userAgent; if (

瀏覽器虛擬導航欄導致頁面按鈕響應錯位問題

華為自帶瀏覽器,我遇到的是華為華為 nove 3e,自帶瀏覽器,見圖 問題描述: 在vue專案中,進入個人中心頁面(如圖1),然後進入其他頁面-會員開通(如圖2),然後上滑該頁面,使頭部導航欄上縮隱藏,底部虛擬導航欄也隱藏(如圖3),然後再返回個人中心,這樣就會出現個人

解決h5人民幣符號在等個別手機顯示

今天同事做h5商城,執行在華為的測試機上發現¥符號沒有顯示,而在其他大多數手機上都能正常顯示,後來發現京東也有這個問題。 我首先想到的是客戶機上沒有此字型導致,於是百度¥符號是屬於什麼字型(搜尋結果是很多字型都有該符號,那就隨便選擇一種安裝吧),安裝好這個字型後,在css中

h5開發解決低版本瀏覽器相容的問題

先說明一下場景,要求做一個h5貸款的表單提交,既能在app內使用也app外面使用,app使用版本高,自然不用太多考慮相容性問題,flex佈局隨意發揮,但在app外面使用的場景就複雜得多,市面上的主流機型huawei、vivo、oppo、ios、微信相容各種瀏覽器,uc、qq等

解決手機瀏覽器,用rem單位,內容超出螢幕寬度問題!(rem計算不準)

問題描述: 在H5手機頁面上,用rem單位佈局,配合js計算出一個根節點的font-size(原理是螢幕寬度乘以一個固定比例,如1/100),之後頁面中所有的px全都換算成了rem單位來寫,優點是能適

vue基於mint-ui元件loadmore實現拉載入更多,下拉重新整理功能

這個是模擬手機寫的簡單樣式,不要在意這些細節,為了撐滿容器每次載入十二   那就開始程式碼了  ==》 先安裝 mint-ui 在main.js中引入mint-ui的css樣式:  import 'mint-ui/lib/style.css' 在

Mint UI元件庫CheckList使用總結

在開發過程中,我們肯定遇到過這樣的問題,如下圖所示: 我選擇了兩個選項,但是v-model中繫結的陣列只有一個,解決這個問題如下程式碼 <template> <mt-checklist :title="多選標題" v-model="value" :opti

Mint UI元件庫DatetimePicker的用法

Mint ui 是什麼? 簡單來說,它就是基於 Vue.js 的移動端元件庫 在實際專案開發過程中,我們往往需要藉助一些元件來提高我們的開發效率,如pc端的Element、iView,移動端的Mint UI等。 下面看一下Mint UI 的DatetimePicker用法 &

Mint-UI元件 MessageBoxprompt 新增判斷條件

Mint-UI 的Message Box 是prompt型別時,可以新增正則判斷或者function判斷條件。具體可以檢視Mint-UI原始碼。 新增正則判斷條件: MessageBox({ $type:'prompt', title:'輸入驗證碼', message

使用scoped穿透方法實現修改vue中mint UI元件樣式

效果:程式碼:<div class="goods-swiper"> <mt-swipe :auto="5000" :show-indicators="true"> <mt-swipe-item v-for="(item,index)

Hyper-V 2016 系列教程11 太倉民政局 微軟 Hyper-V 虛擬化解決方案介紹 采用的是系列服務器

microsoft hyper-v 虛擬化 分享一個小型的Hyper-V 虛擬化解決方案介紹 采用的是華為系列服務器軟件清單簡介:Windows Server 2012 客戶可以利用Windows Server 2012 Hyper-V的虛擬化技術來降低成本以獲利。傳統的多個服務器角色可

正確生成浮點型的方法,解決sqlachemy Float浮點型的坑,生成float類型時,長度精度均0,導致查詢到結果!

依然 tab 圖片 control 選擇 分享 ice mod ble 問題描述 在使用flask_sqlachemy時,給price字段選擇了Float類型,數據庫用的mysql,生成數據庫表後,發現 from sqlalchemy import Float

element-ui 解析新增編輯。裡面點選按鈕的click事件為什麼要那樣寫?

  1.首先新增頁面我們把定義的新增要填的表單繫結的model值全部又寫了一遍,和上面data裡面定義的格式是一樣的,為什麼呢?是多此一舉嗎? 當然不是。因為每次點選彈窗新增的表單都必須是置空的。而我們從新寫了一遍定義時的資料相當於把他置空了。   2

正確生成浮點型的方法,解決sqlachemy Float浮點型的坑,生成float型別時,長度精度均0,導致查詢到結果!

問題描述 在使用flask_sqlachemy時,給price欄位選擇了Float型別,資料庫用的mysql,生成資料庫表後,發現   from sqlalchemy import Float,Column price = Column(Float,default=0.00) &

手機WebView長按能複製,記一次少見奇葩bug解決之旅

風起 接到反饋,說是之前一個老專案的詳情頁(html)長按不能複製了(華為mate9),uh…不記得需求裡有長按複製功能,不過現在原生webview是支援長按複製的,所以就是個預設需求了,那這個bug是要改的。 拿手邊的華為和小米試了一下,的確不能複製,然後到模擬器上跑了下,uh…長

手機預設瀏覽器開啟應用寶連結直接啟動應用問題解決

問題描述 現在做的App有提示更新功能,點選去更新會跳轉到應用寶的相關下載頁面。 遇到一個問題是,華為手機點選去更新,用預設瀏覽器打開了連結,但這時瀏覽器會自動又啟動這個應用。 原因分析 出現這個問題主要是因為 1、開啟的連結是應用寶的中的更新應用

調整QuickReport控制元件介面提示資訊中文

關鍵字:delphi QuickReport 中文 提示資訊 介面         QuickReport提供的預設列印預覽視窗是英文介面的,如果開發的中文軟體中帶有這種英文資訊,對客戶不免造成一定的不便,整體的介面風格也不統一,因此有必要將該英文介面調整為中文介面。   

建立一個自己的Vue UI元件庫,並將它釋出在npm

本文僅限於入門級,沒有成規模製作,希望能對你有所幫助。 因為在開發多個專案中可能會用到同一個元件,那麼我們通過複製貼上的形式更新,無異於是笨拙的,我們可以通過上傳到npm後,不斷迭代npm包來實現更新。 前期準備 初始化project 這裡我們使用vue-cli來初始化一個vue專案。 npm install

深圳房價連跌九個月 然而員工都狂呼買起房

安裝 新興產業 都在 然而 art 推送 十年 選擇 邏輯 導語:7月1日,市規土委發布6月房價數據顯示,6月房價為54492元/平方米,較5月微幅下滑。至此,市場需求逐步釋放,成交2953套一手住宅,為今年上半年的最高值。   關註我們每月深圳房價分析的推送的朋友就知道