scroll-view

---

可滾動(dòng)視圖區(qū)域。

成都創(chuàng)新互聯(lián)公司成立于2013年，先為察布查爾錫伯等服務(wù)建站，察布查爾錫伯等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為察布查爾錫伯企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

屬性名	類型	默認(rèn)值	說明
scroll-x	Boolean	false	允許橫向滾動(dòng)
scroll-y	Boolean	false	允許縱向滾動(dòng)
upper-threshold	Number	50	距頂部/左邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltoupper 事件
lower-threshold	Number	50	距底部/右邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltolower 事件
scroll-top	Number		設(shè)置豎向滾動(dòng)條位置
scroll-left	Number		設(shè)置橫向滾動(dòng)條位置
scroll-into-view	String		值應(yīng)為某子元素id（id不能以數(shù)字開頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素
scroll-with-animation	Boolean	false	在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡
enable-back-to-top	Boolean	false	iOS點(diǎn)擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時(shí)，滾動(dòng)條返回頂部，只支持豎向
bindscrolltoupper	EventHandle		滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件
bindscrolltolower	EventHandle		滾動(dòng)到底部/右邊，會(huì)觸發(fā) scrolltolower 事件
bindscroll	EventHandle		滾動(dòng)時(shí)觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過 WXSS 設(shè)置 height。

示例代碼：

  vertical scroll
  
    
    
    
    
  

  
    click me to scroll into view 
    click me to scroll
  


  horizontal scroll
  
    
    
    
    
  

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
  data: {
    toView: 'red',
    scrollTop: 100
  },
  upper: function(e) {
    console.log(e)
  },
  lower: function(e) {
    console.log(e)
  },
  scroll: function(e) {
    console.log(e)
  },
  tap: function(e) {
    for (var i = 0; i < order.length; ++i) {
      if (order[i] === this.data.toView) {
        this.setData({
          toView: order[i + 1]
        })
        break
      }
    }
  },
  tapMove: function(e) {
    this.setData({
      scrollTop: this.data.scrollTop + 10
    })
  }
})

Bug & Tip

1. tip: 請(qǐng)勿在scroll-view中使用textarea、map、canvas、video組件
2. tip: scroll-into-view的優(yōu)先級(jí)高于scroll-top
3. tip: 在滾動(dòng)scroll-view時(shí)會(huì)阻止頁(yè)面回彈，所以在scroll-view中滾動(dòng)，是無法觸發(fā)onPullDownRefresh
4. tip: 若要使用下拉刷新，請(qǐng)使用頁(yè)面的滾動(dòng)，而不是scroll-view，這樣也能通過點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部

新聞標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序視圖容器scroll-view
當(dāng)前URL：http://uogjgqi.cn/article/dpgpipd.html