接着上篇 微信小程序-阅读小程序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节后尽量吧最新的也放上来。

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

  1. 游戏陪玩源码开发，仿某看书app首页Banner轮播+背景渐变

    在游戏陪玩源码开发时,会设计到很多UI界面设计,其中首页Banner轮播就很重要,最近发现一个比较有意思的效果图,于是想自己操作实践下.效果图如下: 作者实现的效果: 1. 游戏陪玩源码开发,仿某看书 ...

  2. AxureRP实战（三）Banner轮播图交互（进阶篇）

    前一篇<AxureRP实战(二)Banner轮播图交互(基础篇)>用淘宝的首页banner案例讲解了如何运用动态面板实现banner轮播图的切换,有了基本交互功能.但是,交互效果还有些欠缺 ...

  3. Mint-UI 移动首页开发 - header导航、banner轮播图

    Mint-UI 移动首页style排版问题:header导航.banner轮播图.footer底部版权··· ··· 资源预览: 中文 2.x官方文档(含演示地址): 文档首页 中文 2.x官方文档( ...

  4. 谷粒学院-首页数据显示-banner轮播图微服务搭建

    新建banner轮播图微服务 1.在service模块下创建子模块service_cms 2.配置application.properties # 服务端口 server.port=8004 # 服务 ...

  5. php轮播代码生成器,最简单的Banner轮播左右切换效果代码及实现思路（附带源码）...

    Banner轮播左右切换效果代码及实现思路,支持左右切换图片,支持点击选择对应的图片.实现思路通过定时器去自动选图和点击触发事件去选择图片.而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画 ...

  6. 【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )

    文章目录 一.flutter_swiper 插件 二.Swiper 组件使用 三.完整代码示例 四.相关资源 一.flutter_swiper 插件 到 https://pub.dev/package ...

  7. axure 图片切换图片的交互_Axure教程：首页图片轮播

    图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...

  8. html中制作banner,css banner轮播图怎么做？

    css banner轮播图怎么做?下面本篇文章给大家简单介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 初步了解动画效果吧.轮播图我一直以为靠jquery插件完成的,突然发 ...

  9. android 轮换实现动画,怎么在Android中实现一个首页无限轮播功能

    怎么在Android中实现一个首页无限轮播功能 发布时间:2021-04-12 16:22:49 来源:亿速云 阅读:74 作者:Leah 这期内容当中小编将会给大家带来有关怎么在Android中实现 ...

最新文章

  1. 执行前端测试的必要性
  2. Linux 用echo输出带特效的字体
  3. 用Netscaler的Variable和Assignment来实现计数控制
  4. hbase 单机连接hadoop_随手搭hadoop+hbase（mac单机）
  5. 武汉工程大学计算机学院吴云韬,吴兴隆-武汉工程大学计算机科学与工程学院...
  6. hihoCoder挑战赛16 A—— 王胖浩与三角形
  7. HttpStatusCode
  8. 深度学习技术在机器阅读理解应用的研究进展
  9. SpringSecurity SecurityContextHolderSecurityContext
  10. 微胖女孩穿什么样的衣服好看？
  11. C++ 类使用规范建议
  12. 李宏毅自然语言处理——问答任务
  13. python数值分为3种类型_Python数值类型
  14. HFSS器件导入Altium 教程
  15. 小程序获取视频缩略图
  16. 【WLAN】WLAN室内无线信道模型分析及matlab仿真
  17. DDD（领域驱动设计）概述
  18. 拯救节日邮件！专属这个节假季的EDM营销方案
  19. html 水平柱形图,CSS实现柱形图效果的代码示例
  20. 2023年【安徽省安全员C证】免费试题及安徽省安全员C证证考试

热门文章

  1. 美国一男子起诉苹果：称 iPhone 6 电池存在缺陷导致爆炸
  2. java通过CellStyle设置单元格背景颜色
  3. 618商战大片谢幕，销量冠军竟然有两个？
  4. 微信爬取自己的朋友头像
  5. windows模拟微信小程序_微信小程序的开发环境搭建（Windows版本）
  6. 花开不败——复旦中文系女生的高三笔记
  7. c语言创建文件存放,C语言文件操作
  8. 键盘VK键值表---完整
  9. 芯片市场低迷 SK海力士Q1利润大跌69%
  10. mac系统python配置