小程式——scroll-view 頁面不滾動與隱藏導航條
阿新 • • 發佈:2019-01-27
1、隱藏導航條,只要在該頁面的 wxss 頁中加入以下程式碼就可以
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
2、頁面不滾動的解決辦法1、原因:我所碰到的 2 次頁面不滾動都是因為 scroll-view 的寬度不對。
scroll-view 的寬度應該是你設定的滾動區域的寬度,而實際上很容易就變成內部內容所撐開的全部寬度,在此,給 scroll-view 的父級 view 設定成你需要的可視區域的寬度,scroll-view 寬度設定 100%,這樣問題就解決了。
2、示例程式碼:
<!-- wxml --> <view style="width:280px"> <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-left="{{scrollLeft}}"> <view id="green" class="scroll-view-item_H bc_green"></view> <view id="red" class="scroll-view-item_H bc_red"></view> <view id="yellow" class="scroll-view-item_H bc_yellow"></view> <view id="blue" class="scroll-view-item_H bc_blue"></view> </scroll-view> </view> /* wxss */ .scroll-view_H{ white-space: nowrap; } .scroll-view-item_H{ display: inline-block; width: 200px; height: 100px; } .bc_green{ background-color: green; } .bc_red{ background-color: red; } .bc_yellow{ background-color: yellow; } .bc_blue{ background-color: blue; }
結果: