微信小程序开发（5）-新闻页之滚动制作（scroll-view)组件的使用

如图，绿色边框框起来的部分为滑动新闻部分，其主要使用了scroll-view组件

四步

（1）newspage.js中定义数据

news: [{title:'这个夏天出游',imgUrl:'/images/01.png'},
          {title:'组团去旅游',imgUrl:'/images/02.png'},
          {title:'旅游去',imgUrl:'/images/03.png'},
          {title: '这个夏天出游', imgUrl: '/images/01.png' },
          { title: '组团去旅游', imgUrl: '/images/02.png' },
          { title: '旅游去', imgUrl: '/images/03.png' }
          ],

（2）newspage.wxml显示

  bindscroll="EventHandle">
   
        注意：循环要写在block中
     
       
         
       
        {{item.title}}
       
       
       

 

（3）newspage.wxss中定义样式

（4）newspage.js中定义事件处理函数