scroll-view 顾名思义，滚动的视图，在使用上它非常的强大，比如滚动到顶部和底部的监听，滑动监听等，简单易用，二话不说，看效果图。

  先来看看scroll-view的官方介绍,讲得很清楚。

       我的实现步骤：

        1.试图层的实现，按照官方文档，绑定滚动事件，设置滚动方向，写一个for循环加载出js中的数据，上图中的数据我命名数组名称为menuList，就如此简洁的实现的一个滚动试图的布局代码。

         <view wx:for="{{menuList}}" wx:for-index="idx" wx:for-item="menuItem">特别对此代码介绍，wx:for="数组"，wx:for-index="索引",不写默认为index,wx-for-item="数组中的每一项名称",不写默认为item。

<!--home.wxml-->
<view class="page">
  <scroll-view class="body" scroll-y="true" style="height: 600px;" bindscrolltoupper="scrollToTop" bindscrolltolower="scrollToBottom">
    <view wx:for="{{menuList}}" wx:for-index="idx" wx:for-item="menuItem">
      <button class="item_buton" bindtap="menuItemOnClick" id="{{idx}}"> {{menuItem.name}} </button>
    </view>
  </scroll-view>
</view>

   2.控制层（JavaScript）的实现

     控制层中实现输入的录入（menuList），接着实现滚动监听方法的设置，仅进行toast提示，以及对于点击方法menuItemOnClick（）的跳转方法实现，简单的列表以及跳转就实现了。

//home.js
var util = require('../../../utils/util.js')
Page({
  data: {
    menuList: [
      {
        name: "GET&POST请求",
        url: '../request/request?title=网络请求'
      }, {
        name: "录音动画",
        url: "../voiceanimate/voiceanimate"
      }, {
        name: "拖拽 image",
        url: "../dragImage/dragImage"
      }, {
        name: "地图定位",
        url: "../mapView/mapView"
      }, {
        name: "图片自适应",
        url: "../autoImage/autoImage"
      }, {
        name: "下拉刷新，上拉加载更多",
        url: "../upDownReflsh/upDownReflsh"
      }, {
        name: "音乐播放器",
        url: "getMessage"
      }, {
        name: "本地图片上传",
        url: "getMessage"
      }, {
        name: "相机拍照",
        url: "getMessage"
      }, {
        name: "数据缓存",
        url: "getMessage"
      }, {
        name: "画布canvas",
        url: "getMessage"
      }, {
        name: "窗口顶部TabBar",
        url: "getMessage"
      }, {
        name: "视频播放器",
        url: "getMessage"
      }, {
        name: "侧边栏滑动",
        url: "getMessage"
      }, {
        name: "获取时间",
        url: "getMessage"
      }, {
        name: "动画 Animation",
        url: "getMessage"
      }, {
        name: "选择器",
        url: "getMessage"
      }, {
        name: "四舍五入",
        url: "getMessage"
      }, {
        name: "消息提示框",
        url: "getMessage"
      }, {
        name: " 尺寸单位",
        url: "getMessage"
      }, {
        name: "轮播图",
        url: "getMessage"
      }, {
        name: "微信漂流瓶",
        url: "getMessage"
      }, {
        name: "仿天猫超市抽奖",
        url: "getMessage"
      }, {
        name: "圆形菜单",
        url: "getMessage"
      }, {
        name: "自定义toast",
        url: "getMessage"
      }, {
        name: "五星评分",
        url: "getMessage"
      }, {
        name: "圆形菜单",
        url: "getMessage"
      }, {
        name: "扫一扫",
        url: "getMessage"
      }, {
        name: "倒计时",
        url: "getMessage"
      }
    ]
  },

  //滑动到顶端
  scrollToTop: function (e) {
    console.log(e);
    util.showToast("滑动到顶部");
  },
  //滑动到底部
  scrollToBottom: function (e) {
    console.log(e);
    util.showToast("滑动到底部");
  },


  menuItemOnClick: function (e) {
    console.log(e);
    var menuItem = this.data.menuList[parseInt(e.currentTarget.id)];
    if (menuItem.url) {
      wx.navigateTo({
        url: menuItem.url,
        success: function (res) {
          // success
        },
        fail: function () {
          // fail
          util.showToast("未正确配置路径");
        },

      })

    }

  }
})

   献上util的方法

function formatTime(date) {
  var year = date.getFullYear()
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()
  var second = date.getSeconds()


  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}

/**
 * 显示toast
 */
function showToast(name) {
  wx.showToast({
    title: name
  })
}
/** 
 * 获取屏幕宽高
 */
function getScreenInfo() {
  var screenInfo = {}

  wx.getSystemInfo({
    success: function (res) {
      // success
      screenInfo.width = res.windowWidth
      screenInfo.height = res.windowHeight

   console.log('屏幕宽: ' +  screenInfo.width)
    console.log('屏幕高: ' +  screenInfo.height)
    }
  })
  return screenInfo
}
/**
 * 自适应图片宽高
 */
function getAutoImage(e) {
  var imageSize = {};
  var originalWidth = e.detail.width;//图片原始宽  
  var originalHeight = e.detail.height;//图片原始高  
  var originalScale = originalHeight / originalWidth;//图片高宽比  
  console.log('原图宽: ' + originalWidth)
  console.log('原图高: ' + originalHeight)
  var screenInfo = getScreenInfo();
  var windowscale = screenInfo.height / screenInfo.width;//屏幕高宽比  
   console.log('图片高宽比: ' + originalScale)  
  console.log('屏幕高宽比: ' + windowscale)  
  if (originalScale < windowscale) {//图片高宽比小于屏幕高宽比  
    //图片缩放后的宽为屏幕宽  
    imageSize.imageWidth = screenInfo.width;
    imageSize.imageHeight = (screenInfo.width * originalHeight) / originalWidth;
  } else {//图片高宽比大于屏幕高宽比  
    //图片缩放后的高为屏幕高  
    imageSize.imageHeight = screenInfo.height;
    imageSize.imageWidth = (screenInfo.height * originalWidth) / originalHeight;
  }
  console.log('缩放后的宽: ' + imageSize.imageWidth)  
  console.log('缩放后的高: ' + imageSize.imageHeight)  
  return imageSize;  

}




module.exports = {
  formatTime: formatTime,
  showToast: showToast,
  getScreenInfo: getScreenInfo,
  getAutoImage: getAutoImage
}

在项目中往往要比这个复杂多，只要掌握其中的原理，就像数学公式一样，没有什么解决不了问题。