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

首页banner动画实现

京东新闻上下动画实现

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

  

  上线的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',
}]
},

  

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

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

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

  

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

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

  最后,让大家可以找打微信程序开发的组织,感谢博客园平台!

  如果大家想讨论或则找微信开发的资料,有兴趣可以添加微信小程序(应用号)qq群:390289365

另外,微信小程序开发社区微信小程序社区 网站已经于16年09月25日上线啦,链接地址:www.cwechat.org.欢迎大家访问学习交流微信小程序开发。

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

    

  

    

  

微信小程序demo2的更多相关文章

  1. 微信小程序如何获取屏幕宽度

    微信小程序如何获取屏幕宽度 方法1: imageLoad: function () { this.setData({ imageWidth: wx.getSystemInfoSync().window ...

  2. 微信小程序开发--页面之间的跳转

    一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...

  3. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  4. 微信小程序体验(2):驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  5. 微信小程序(微信应用号)组件讲解

    这篇文章主要讲解微信小程序的组件. 首先,讲解新建项目.现在有句话:招聘三天以上微信小程序开发,这个估计只能去挖微信的工程师了.技术新,既然讲解,那我们就从开始建项目讲解. 打开微信web开发者工具, ...

  6. 神技!微信小程序(应用号)抢先入门教程(附最新案例DEMO-豆瓣电影)持续更新

    微信小程序 Demo(豆瓣电影) 由于时间的关系,没有办法写一个完整的说明,后续配合一些视频资料,请持续关注 官方文档:https://mp.weixin.qq.com/debug/wxadoc/de ...

  7. 通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众 ...

  8. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  9. 来自于微信小程序的一封简讯

    9月21晚间,微信向部分公众号发出公众平台-微信应用号(小程序)的内测邀请,向来较为低调的微信在这一晚没人再忽视它了. 来自个人博客:Damonare的个人博客 一夜之间火了的微信应用号你真的知道吗? ...

随机推荐

  1. 【C#代码实战】群蚁算法理论与实践全攻略——旅行商等路径优化问题的新方法

    若干年前读研的时候,学院有一个教授,专门做群蚁算法的,很厉害,偶尔了解了一点点.感觉也是生物智能的一个体现,和遗传算法.神经网络有异曲同工之妙.只不过当时没有实际需求学习,所以没去研究.最近有一个这样 ...

  2. 13、零配置Struts2开发

    Convention 插件 从 Struts 2.1 开始, Struts 可以使用 Convention 插件来支持零配置: Convention 插件完全抛弃配置信息, 不仅不需要使用 strut ...

  3. CRL快速开发框架系列教程十三(嵌套查询)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  4. ASP.NET Core CORS 简单使用

    CORS 全称"跨域资源共享"(Cross-origin resource sharing). 跨域就是不同域之间进行数据访问,比如 a.sample.com 访问 b.sampl ...

  5. Python(九) Python 操作 MySQL 之 pysql 与 SQLAchemy

    本文针对 Python 操作 MySQL 主要使用的两种方式讲解: 原生模块 pymsql ORM框架 SQLAchemy 本章内容: pymsql 执行 sql 增\删\改\查 语句 pymsql ...

  6. grep 查找bash脚本中的注释代码

    出于安全性的考虑,不建议在bash脚本中注释掉不使用的代码.也就是说如果某段代码不使用了,那么应该删除掉,而不是简单地注释掉.假如你突然意识到这一点,而以前并没有遵从这个原则,现在需要找出脚本中的注释 ...

  7. 08讲browse命令的使用技巧

    .浏览所有parts ,使用技巧 .浏览所有 nets,使用技巧 在上图中选择nets .浏览所有 offpage connector,使用技巧 如上 .浏览所有 DRC makers,使用技巧 5. ...

  8. shell之sort命令

    1 sort的工作原理 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次按ASCII码值进行比较,最后将他们按升序输出. [rocrocket@rocrocket progr ...

  9. ucos实时操作系统学习笔记——任务间通信(信号量)

    ucos实时操作系统的任务间通信有好多种,本人主要学习了sem, mutex, queue, messagebox这四种.系统内核代码中,这几种任务间通信机制的实现机制相似,接下来记录一下本人对核心代 ...

  10. iOS开发系列--音频播放、录音、视频播放、拍照、视频录制

    --iOS多媒体 概览 随着移动互联网的发展,如今的手机早已不是打电话.发短信那么简单了,播放音乐.视频.录音.拍照等都是很常用的功能.在iOS中对于多媒体的支持是非常强大的,无论是音视频播放.录制, ...