ucbug軟件站:安全、綠色、放心的專業(yè)下載站!首頁|最近更新|專題集合|標簽云|站內(nèi)導航|加入收藏

怎么能讓小程序的view-scroll高度到100% 視圖滾動效果怎么設置

時間:2018-07-04 18:33:17來源:未知人氣:0

怎么讓小程序view-scroll高度100%?在開發(fā)小程序里面,視圖滾動效果無疑是一個問題,那么如何能讓小程序的view-scroll高度到100%呢?下面就來跟小編一起了解一下?!?.關于scroll-view∵scroll-view是?...

怎么讓小程序view-scroll高度100%?在開發(fā)小程序里面,視圖滾動效果無疑是一個問題,那么如何能讓小程序的view-scroll高度到100%呢?下面就來跟小編一起了解一下。

  1.關于scroll-view

  scroll-view是小程序用來控制可滾動視圖區(qū)域的組件。

  通過設置scroll-x ="true" 或 scroll-y="true" 來分別控制橫向滾動或縱向滾動;這里需要注意的一點:

  使用豎向滾動時,需要給一個固定高度,通過 WXSS 設置 height

  2.使用scroll-view來實現(xiàn)一個介紹頁長圖的完整滾動顯示

  本以為是一個簡單的需求,沒想到也會采坑;

  第一版實現(xiàn)思路及代碼如下:

  通過wx.getSystemInfoSync()獲取設備高度,然后通過內(nèi)聯(lián)樣式去給scroll-view組件height賦值

怎么能讓小程序的view-scroll高度到100% 視圖滾動效果怎么設置

怎么能讓小程序的view-scroll高度到100% 視圖滾動效果怎么設置

怎么能讓小程序的view-scroll高度到100% 視圖滾動效果怎么設置

  測試結果:

  圖片在ios上不能顯示完整,偶爾也會先不能滾動的情況

  認真查找很久原因,發(fā)現(xiàn)是因為沒有給scroll-view設置 overflow: auto;

怎么能讓小程序的view-scroll高度到100% 視圖滾動效果怎么設置

  測試結果:

  正常顯示

  總結:在使用scroll-view實現(xiàn)豎直滾動的時候,要設置下overflow: auto;這樣才能正常顯示

  以上就是小編為大家找的小程序view-scroll視圖滾動效果設置方法,希望能幫助到大家。

標簽小程序