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

前端之家收集整理的这篇文章主要介绍了仿京东小程序首页banner切换效果源码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

下面说一下项目

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

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

 
 
 
 
 {{item.text}}
 
 
 
 

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

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

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

后台数据的格式见如下:

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

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

   

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

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

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

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

猜你在找的微信小程序相关文章