@TOC

1、去除頁面彈簧效果

• 關閉頁面滾動效果，頁面.json文件的disableScroll設置為true，用于禁止頁面滾動；
• 采用scroll-view組件；
• scroll-view組件需定高100vh或者用calc計算出高度；
• 使用scroll-view組件會產生滾動條，是否顯示滾動條show-scrollbar因項目而異，大部分情況不需要，所以使用scroll-view組件的時候需考慮這一點，如需清除，有兩個辦法：
  禁用show-scrollbar屬性，前提是使用enhanced，使用enhanced屬性在頁面有多個scroll-view組件或者長內容的時候會有卡頓現象，頁面性能會急劇下降！！！；
  通過設置父子元素的寬度差異來隱藏滾動條，這個方法比較靠譜；
• scroll-view組件內部默認會有彈簧效果，如需清除可以使用enhanced=true、bounces=false兩個屬性，這個點需注意；

代碼

json文件：

"disableScroll": true,

wxml文件：

<scroll-viewscroll-y="{{true}}"class="container"style="height: calc(100vh - {{navBarHeight}}px)"enhancedbounces="{{false}}"show-scrollbar="{{false}}">頁面內容 </scroll-view>

enhanced、bounces、show-scrollbar屬性及更多屬性參考官方文檔

1、單行和多行文本省略

單行

width: 200px; text-overflow: ellipisis; white-space: nowrap; overflow: hidden;

多行

display: -webkit-box：將對象作為彈性伸縮盒子模型顯示 ，實現多行文本的前提條件；
-webkit-line-clamp：該屬性 可以把 塊容器 中的內容限制為指定的行數，必填；
-webkit-box-orient：設置或檢索伸縮盒對象的子元素的排列方式 ，可選。

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;

未完待續。。。

總結

以上是生活随笔為你收集整理的微信小程序开发问题收集及解决方案——样式篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。