仿京东首页banner轮播、新闻上下滚动动画实现代码

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

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

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

下面说一下项目

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

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

<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。将数据循环展示出来。

　　 后台数据的格式见如下：

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‘’的，后台代码如下：

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 );
}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!