创新互联小程序教程：微信小程序视图容器scroll-view

scroll-view

可滚动视图区域。

成都创新互联公司成立于2013年，先为察布查尔锡伯等服务建站，察布查尔锡伯等地企业，进行企业商务咨询服务。为察布查尔锡伯企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 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: 请勿在scroll-view中使用textarea、map、canvas、video组件
2. tip: scroll-into-view的优先级高于scroll-top
3. tip: 在滚动scroll-view时会阻止页面回弹，所以在scroll-view中滚动，是无法触发onPullDownRefresh
4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是scroll-view，这样也能通过点击顶部状态栏回到页面顶部

当前题目：创新互联小程序教程：微信小程序视图容器scroll-view
浏览路径：http://www.shufengxianlan.com/qtweb/news4/210054.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联