分享乙個微信小程式中css實用簡單技巧

2021-12-29 21:35:53 字數 662 閱讀 4223

1:用純css建立乙個三角形的原理把上、左、右三條邊隱藏掉(顏色設為 transparent)

.demo 2:設定最高高度..超過後可以滑動

max-height: 550rpx;

overflow-y: scroll;3: text-overflow 當屬性規定當文字溢位包含元素時發生的事情

clip: 修剪文字

ellipsis : 用省略號來代表被修剪的文字

string: 使用給定的字串來代表被修剪的文字

重點是三個同時使用:text-overflow:ellipsis; white-space:nowrap; overflow:hidden;4:overflow: hidden當強制不換行的時候,使用overflow:hidden隱藏超過介面的部分

5: margin-bottom失效

margin-bottom是下方的外邊距,並不能讓元素向下方移動,margin-top作為上邊距,把元素「推」了下去。

希望圖示距離下方30px,那麼可以在ul上設定 position:absolute, bottom:30px ,(這一句我沒有加同樣實現了效果)另外父元素position:relative6:強制不換行

white-space:nowrap;

自動換行

div強制英文單詞斷行

div

微信小程式小技巧分享

1.滾動載入資料方式 在滾動分頁載入資料的時候,通常做法是定義乙個資料arr,下滑觸發載入更改請求介面獲取分頁資料arr2,然後將arr2合併到arr,重新setdata到arr。這樣的操作方式是每次都全量覆蓋,當資料量過大時,會造成渲染載入卡頓問題。arr陣列結構為 舊方法 page 上拉觸底方法...

App分享微信小程式

2.在info.list檔案中新增url schemes。4.分享小程式 wxminiprogramobject wxminiobject wxminiprogramobject object wxminiobject.webpageurl 相容低版本的網頁鏈結 wxminiobject.usern...

微信小程式 分享功能

入口方法 一,小程式右上角自帶的分享功能 以下 例項寫在export default 裡面 右上角分享功能 res fail function res title 為 的標題 path 為 的路徑 這個路徑是對方如果點選你分享的內容跳轉回小程式時,在小程式中顯示的頁面的路徑,很明顯後面傳遞的引數是此...