小程序模板網(wǎng)

連勝--小程序中滾動條的使用,wx.pageScrollTo和<scroll-view>的對比 ...

發(fā)布時間:2018-04-26 11:53 所屬欄目:小程序開發(fā)教程

前言:近期小程序項目中用到了滾動條功能,官方文檔中提供兩種方式。即wx.pageScrollTo滾動到page頁面的指定位置,組件可以設(shè)置scroll-top或者scroll-left的值,今天探討一下使用哪種方式更合適。

 

 

1、wx.pageScrollTo

官方文檔地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/scroll.html

示例代碼:

wx.pageScrollTo({
  scrollTop: 0
})

 

使用此方式,你需要知道以下幾點:

1、小程序基礎(chǔ)庫1.4.0之前不支持此方法,這點兒比較坑

2、小程序中雙擊頂部的textbar,會默認回到頂部

3、能夠觸發(fā)page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、當(dāng)頁面中有使用position:fixed布局時,彈出鍵盤時,fixed布局部分會閃屏

 

2、

小程序中另一種實現(xiàn)滾動條的方式,是使用scroll-view組件。官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

 

詳細的參數(shù),請仔細查看官方文檔~

 

示例代碼:

class="scroll-view" scroll-y style="height: 500px;" scroll-top="{{scrollTop}}">
  id="green" class="bc_green">
  id="red"  class="bc_red">
  id="yellow" class="bc_yellow">
  id="blue" class="bc_blue">

 

使scroll-view組件方式,你需要知道以下幾點:

1、縱向滾動(scroll-y)時,必須設(shè)置height值,并且不能使用css中的calc來計算,scroll-top值才會生效

2、小程序中雙擊頂部的textbar,無法回到頂部

3、無法觸發(fā)page的上拉(ReachBottom)和下拉(PullDownRefresh)事件

4、當(dāng)頁面中position:fixed布局不受影響


本文地址:http://m.u-renovate.com/wxmini/doc/course/24097.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×