微信小程序例子——快速掌握滚动视图（scroll-view）

1、效果展示

2、关键代码

scroll_view.js文件

  Page({
    data:{
      // text:"这是一个页面"
    },
    onLoad:function(options){
      // 页面初始化 options为页面跳转所带来的参数
    },
    onReady:function(){
      // 页面渲染完成
    },
    onShow:function(){
      // 页面显示
    },
    onHide:function(){
      // 页面隐藏
    },
    onUnload:function(){
      // 页面关闭
    }
  })

scroll_view.json文件

{
    "navigationBarTitleText":"scroll_view"
}

scroll_view.wxml文件

垂直滚动line1line2line3line4line5line6line7line8line9line10line11line12水平滚动1111111111111111111111111111111111111111111111111111111111

scroll_view.wxss文件

.title{
    height: 30px;
    text-align: center;
}
.scroll_view_vertical{
    height: 50%;
    margin-bottom: 20px;
    background-color: ghostwhite;
}
.scroll_view_horizotal{
    height: 50px;
    background-color: whitesmoke;
}
.item{
    height: 50px;
}

3、源代码获取方式

【百度云】链接：http://pan.baidu.com/s/1bAYY2E 密码：5meu