小程序学习之路四：scroll-view的使用

感言：18年11月开始了学习之路一，结果写到了才开始学习就停滞了半年，这可不行，毅力是IT界的基础，延续一年半前继续开始

上一篇我们讲到了入门学习，接下来来讲讲scroll-view的使用，我作为一名新手，更多的作用是记录自己学习过程中遇到的问题，无法深入讲解，请多多包含，如有错误的位置，也希望大家能帮我解答，感谢，同时也希望能帮助到一些新手。

直接先上代码

	
	    {{item.name}}
	

一点点讲解，首先class=demolist，这个demolist代表着这个scroll-view，我是Android开发，所以也可以这么理解，这个class就带变是Android里面的控件id，第二个scroll-y=true代表纵向滑动，下面的view控件代表这这个列表的子item，wx:for=‘{{datas}}’这个代表这个scroll-view的数据，因为是开始学习，还没动态，所以这个就是个死数据，在你的对应js文件里面的data里面加载出来的，key=index这个代表每个条目的索引，也就是下标,data-item={{item}}这个代表每个子item条目，在Android里面就是每个条目的bean实体，还有一种写法就是你可以直接写你datas里面的每个字段。例如data-id={{item.id}}，这个里面有个问题就是，如果你直接写字段了，就意味着你写了这个字段你在js里面就只能引用这个字段，所以一般建议直接整个item，bindtab=itemclick这个代表条目点击事件；然后view内层的text控件代表每个条目里面加载一个文本view，这个文本显示内容就是你datas里面的name字段内容

上面内容有点多，但是应该还是比较详细了的，希望大家能理解得到，接下来我再上我的js代码

首先是data里面的datas数据

data: {
    datas: [
      { id: 1, name: '点击事件' },
      { id: 2, name: '条目点击事件' },
      { id: 3, name: '页面跳转' },
      { id: 4, name: '按钮样式处理' },
      { id: 5, name: '自定义吐司' },
      { id: 6, name: '显示提示框dialog' },
      { id: 7, name: '网络请求数据' },
      { id: 20, name: '拓展' }
    ]

  }

然后是点击事件

itemClick: function (e) {
    switch (e.currentTarget.dataset.item.id) {
      case 1:
        console.log('1')
        break;
      case 2:
        wx.showToast({
          title: e.currentTarget.dataset.item.name
        })
        break;
      case 3:
        wx.navigateTo({
          url: './demo-list/newpage/newpage'
        })
        break;
      case 4:
        break;
      case 5:
        wx.showToast({
          // title: e.currentTarget.dataset.item.name + '拼接id=' + e.currentTarget.dataset.item.id
          title: "这是一个超长文本吐司"
        })
        break;
      case 6:
        break;
      case 7:
        wx.showToast({
          title: e.currentTarget.dataset.item.name
        })
        break;
    }
  }

点击事件里面通过e.currentTarget.dataset.item可以获取到当前item

至于这个e是什么，我们用log打印出来看看，直接用console.log(e)

能看到里面一些属性，内容。

好了，关于这个scroll-view的使用就讲解到这里了

另外关于这个有个微信自带bug的，可以去我的范番外篇查看，我这里就不讲了，一般问题都会在番外篇进行讲解

scroll-view无法滚动