@TOC

1、去除頁面彈簧效果

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

代碼

json文件：

"disableScroll": true,

wxml文件：

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

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

1、單行和多行文本省略

單行

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

多行

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

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

未完待續(xù)。。。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。