您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“uniapp開發(fā)H5打包微信小程序樣式失效如何解決”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“uniapp開發(fā)H5打包微信小程序樣式失效如何解決”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
樣式不生效的原因:u-view框架組件自帶的class優(yōu)先級高于開發(fā)者自定義的優(yōu)先級,所以顯示的是組件的默認(rèn)樣式(網(wǎng)上有說是樣式隔離)。解決辦法就是提高自定義樣式的優(yōu)先級,使用自定義的樣式去覆蓋默認(rèn)樣式。
在H5上,u–input的樣式是可以完美展示的,但是到了微信小程序上,樣式完全失效了。經(jīng)過一番摸索,找到了最終的解決方法。
把樣式失效的 u–input 改成 u-input。
在u-input的自定義樣式之前添加默認(rèn)樣式的class名,u-input__content,而且要使用深度渲染,寫成::v-deep.u-input__content
。這樣H5中的樣式就可以完全應(yīng)用到微信小程序上了(前后插槽的樣式也完美應(yīng)用),示例代碼如下。
::v-deep.u-input__content, .row-input { height: 70rpx; width: calc(100vw - 150rpx - 120rpx); background-color: #FEFCF8; border-radius: 8rpx; font-size: 24rpx; font-weight: 500; color: #999999; line-height: 24rpx; margin-top: 30rpx; //前插槽樣式 .prefix { padding: 0 20rpx; image { width: 30rpx; height: 30rpx; } } //后插槽樣式 .suffix { padding: 0 20rpx; image { width: 30rpx; height: 30rpx; } .picture-code { width: 100rpx; height: 48rpx; } } } .placeholder { //占位提示文字的樣式 font-size: 24rpx; font-weight: 500; color: #999999; line-height: 24rpx; } }
補充:組件的默認(rèn)樣式的class名如何獲取。
在u-list的自定義樣式的class之前添加 默認(rèn)樣式的class u-list。就可以解決樣式失效的問題。
對于列表頂部被導(dǎo)航欄遮擋,則需要添加一個view進行包裹,通過調(diào)節(jié)外層view的margin來進行調(diào)節(jié)。
示例代碼如下:
.store-section, .u-list { //添加默認(rèn)樣式的class u-list background-color: #F7F1E8; border-radius: 40rpx 40rpx 0px 0px; padding: 20rpx 0rpx; }
H5上可以使用 ****標(biāo)簽設(shè)置相應(yīng)的背景色作為底部安全區(qū)域,但是微信小程序失效了。
微信小程序上應(yīng)該使用一個 ****來替換。標(biāo)簽的樣式如下:
.safe-bottom { background-color: #F4EBDF; height: var(--safe-area-inset-bottom); }
圖片不顯示,主要就是路徑不對。
自定義組件的圖片路徑: /static/detail/personal-store-logo.png。
page里組件的路徑: @/static/home/have-a-goods.jpeg。
圖片路徑的問題,也不一定就像上方那樣,自己去嘗試修改就好了,以圖片顯示為準(zhǔn)。
遇到u-view里的u-icon不顯示的情況,一般就是u-icon外面多包了一層組件,把多包的組件去掉u-icon就可以正常顯示了。
對于u-cell-group樣式失效的問題,嘗試過使用覆蓋樣式的問題,但是不生效。最終的解決之道是在u-cell-group外面包了一層view。把u-cell-group的樣式放到view上。示例代碼如下:
<view class="group-background"> <u-cell-group> <u-cell title="檢測更新" :titleStyle="cellTitleStyle" size="large" :isLink="true" @click="checkUpdate()"> </u-cell> <u-cell title="隱私政策" :titleStyle="cellTitleStyle" size="large" :isLink="true" @click="privacyAgreement()"> </u-cell> </u-cell-group> </view>
.group-background { width: 100%; background-color: #FEFCF8; margin-top: 40rpx; }
讀到這里,這篇“uniapp開發(fā)H5打包微信小程序樣式失效如何解決”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。