微信小程序开发（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显示

<!--滚动内容区域-->

  <scroll-view scroll-x="true" style="width:100%;height:110px;" bindscroll="EventHandle">
    <view class="newsPic">
    <block wx:for="{{news}}">     注意：循环要写在block中
      <view class="news">
        <view class="picList">
          <image src="{{item.imgUrl}}" style="height:70px;width:80px;"></image>
        </view>
        <view class="newsTitle">{{item.title}}</view>
        </view>
        </block>
      </view>  

  </scroll-view>

（3）newspage.wxss中定义样式

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