模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

接着上篇 微信小程序-阅读小程序demo写：http://www.cnblogs.com/muyixiaoguang/p/5917986.html

      首页banner动画实现

      京东新闻上下动画实现

     

      想着模仿京东首页呢，结果也没赶得及写完，轮播图让我搞了好长时间。也好，那就国庆8天好好的写一下，这里写了一半，先放着。先介绍一下这一半的内容。

      还是老规矩，先放个图吧，虽然才一点点了

 

　　

 

　　上线的banner大图和京东头条都是可以滚动的，抄写微信小程序社区官方qq群：390289365里 Nigel''写的。

　　

　　下面说一下项目

　　这次我把项目的资源文件全部放到resources文件夹里了，图片放到images里，这样后期可能有视频、语音文件，都可以放在resources文件下对应的文件目录下面。

 

　　

 

　　先说banner大图，这里是一个轮播，采用的是swiper组件实现，

 

1 2 3 4 5 6 7 8 9 10 11 12 13

< swiper  style="height:180px" indicator-dots="{{indicatorDots}}"           autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">           < block  wx:for="{{swiperData}}">                                  < swiper-item  class="swiper-item">                   < navigator  url="{{item.url}}">                       < image  src="{{item.img}}"/>                       < text >{{item.text}}</ text >                       </ navigator >                   </ swiper-item >                          </ block >   </ swiper >

　　

       后台数据从数据绑定，这完全基本是从Nigel‘’大神那里粘贴的，哈哈。惭愧，共享下，大神的github源码：https://github.com/xuyiazl/wx-demo地址

　　 大家可以看到，可以设置动画的轮播间隔时间：interval，duration ，播放类型autoplay等。

　　 要播放的数据从后台绑定，前台视图渲染，用的还是我们上篇提到的wx-for。将数据循环展示出来。

　　 后台数据的格式见如下：

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

data: {     swiperData: [{         img: '/resources/images/b1.jpg' ,         text: '小家电国庆风暴' ,         url: '/pages/layout/result?title=navigate1'     },{         img: '/resources/images/b2.jpg' ,         text: '360路由器，1000半价' ,         url: '/pages/layout/result?title=navigate2'     },{         img: '/resources/images/b3.jpg' ,         text: '跨店四减一' ,         url: '/pages/layout/result?title=navigate3'     }],     indicatorDots:  false ,     autoplay:  true ,     interval: 3000,     duration: 1000,       list1: [],     list2:[],     navlist:[{         url: 'result?title=导航2' ,         icon: '/resources/images/n1.png' ,         text: '京东生鲜'     },{         url: 'result?title=导航2' ,         icon: '/resources/images/n2.png' ,         text: '全球购'     },{         url: 'result?title=导航3' ,         icon: '/resources/images/n3.png' ,         text: '领券'     },{         url: 'result?title=导航4' ,         icon: '/resources/images/n4.png' ,         text: '全球购'     }],     headlines: [ {             text:  '有几个亿的项目你要不要考虑下' ,             url:  '/pages/layout/result?title=navigate1'             }, {                 text:  '我在给你说采蘑菇的事情' ,                 url:  '/pages/layout/result?title=navigate2'             }, {                 text:  '每个女生都需要一条美丽的裙子' ,                 url:  '/pages/layout/result?title=navigate3'             }, {                 text:  '吃旺旺雪饼运气变旺' ,                 url:  '/pages/layout/result?title=navigate1' ,             }, {                 text:  '京东电器低价来袭' ,                 url:  '/pages/layout/result?title=navigate2' ,             }, {                 text:  '三只松鼠，让零食嗨起来' ,                 url:  '/pages/layout/result?title=navigate3' ,             }]   },

　　

      接下来的三个导航图标就不介绍了，直接拉个代码吧，没什么介绍的。

       

　　 然后就是京东头条了，这个也是动态展示的，这里采用的动画展示

　　

　　绑定view的animation，后台js程序实例化animation方法，这还是Nigel‘’的，后台代码如下：

　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14

headlineAnimation:  function ( timeout ) {          //京东头条的滚动          var  that =  this ;          var  current = 0;          var  line = 2; //每次翻滚的行          var  height = 24 * line; //设置每次翻滚的高度，无法获取适配的高度，得固定          setInterval(  function () {              that.animation.translate( 0, -current * height ).step()              that.setData( { animation: that.animation. export () })              current++;              if ( current * height >= ( ( that.data.headlines.length / line ) ) * height )                  current = 0;          }, timeout ); }

　　其他的没什么说的了，国庆回去尽量好好把页面写全。

　  上面的源码呢，也先放上来:http://www.cwechat.org/thread-29-1-1.html节后尽量吧最新的也放上来。