脚本之家

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

上一篇
仿京东小程序首页banner切换效果源码
下一篇
微信小程序源码!阅读小程序demo源码

想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞了好长时间。也好,那就国庆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 );
}

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

以上就是仿京东首页banner轮播、新闻上下滚动动画实现代码的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

仿京东首页banner轮播、新闻上下滚动动画实现代码 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
仿京东小程序首页banner切换效果源码
下一篇
微信小程序源码!阅读小程序demo源码

您可能感兴趣的小程序源码教程

小程序源码

从0开始一步一步用Laravel5.2集成原生微信支付

目前微信支付集成到框架里面有太多的坑了,项目中刚好遇到一个,把经验和重要的坑写出来,一步一步从0开始,大家有什么不会的可以留言。1.首先,我们要去官方下载人家做好的DEMO,链接是https://pay.weixin.qq.com/w

小程序源码

微信小程序知乎日报完整版源码

小程序刚刚出来不就就火爆了整个前端圈,咱也不干落后的研究了一下,网上找了个”知乎日报API接口“做了个小项目练手,基本上还算完整的实现了整个项目,欢迎starfork,由于小程序对HTML的不支持,详情页做了些简单的过滤

小程序源码

仿QQ微信小程序!我趟过的微信小程序开发坑

我们都知道微信小程序第一天发布内测版,并没有公开官方开发文档和开发工具,但是这阻止不了技术人的好奇心,通过破解以及先安装旧版本再用新版本覆盖安装一系列流程,即可体验微信小程序的魅力,当时为了使更少的人

小程序源码

微信小程序!火车票查询源码

写在最前面微信小程序自九月份推出内测资格以来,经历了舆论热潮到现在看似冷清,但并不意味着大家不那么关注或者不关注了。我想不管是否有内测资格,只要是感兴趣的开发者已经进入潜心耕耘产品的阶段了,至少是静下

小程序源码

从零开始写个一个豆瓣电影小程序

微信小程序内测至今也有20天左右,也有很多人作出了很多不错的DEMO并发布到github了。前几日看见了豆瓣电影这个demo,感觉很不错,也跟着做了一个,作为复习巩固文档API用。

小程序源码

微信小程序之ES6与事项助手源码

由于官方IDE更新到了0.11.112301版本,移除了对Promise的支持,造成事项助手不能正常运行,解决此问题,在项目中引入第三方兼容库Bluebird支持Promise,代码已经整合到项目代码中。好久没有写关于微信小程序的随笔了

小程序源码

微信小程序之知乎日报源码

上一次的《微信小程序之小豆瓣图书》制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识。而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多。在我编写这个DEMO之前,