仿京东小程序首页banner切换效果源码

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

下面说一下项目

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

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

rush:html;toolbar:false">
 
 
 
 
 {{item.text}}
 
 
 
 

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

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

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

后台数据的格式见如下：

rush:xml;toolbar:false">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',
 }]
 },

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

ps:跳转分两种，一种是页面内部跳转，另外一种是页面见跳转。页面见跳转是有限制的，5层。

   

然后就是京东头条了，这个也是动态展示的，这里采用的动画展示。这一点还是js的原生方法，不得不说，以后js要一统天下？

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

= ( ( that.data.headlines.length / line ) ) * height )
current = 0;
}, timeout );
}

其他的没什么说的了，再给拿掉，后面的页面就不在这写全。