想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了

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

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

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

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

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

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

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

    

  

    

  

时间: 2025-01-10 18:43:33

想着模仿京东微信首页呢,banner滚动搞定了,写到了一半了的相关文章

微信小程序相关一、模仿京东静态登录页面

一.培训的第一天,基本上没有什么最新的东西,但是看到老师的代码收获的确实是不少. 1.1.首页代码很简洁,将共有的样式都提取的很好. 1.2.其次是每一个小块写样式的时候用到了好多子代选择器和后代选择器,这样看起来css的一个样式就写的很长,但是比之前我们只是单一的写一个样式,大大提高了IO请求,整体css渲染也变快了.因为当渲染css的时候是从右向左的,就是先确定后代,在往上寻找祖辈,直到找到相对应的样式.dom树从叶子节点往上全部扫描一遍,可想而知只写一个单一的样式,效率是多么的低. 1.3

京东商城首页

效果图: 首页源代码(如需页面其余源码请在下方评论留言): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东商城</title> <link rel="shortcut icon" href="favicon.ico"/> <link rel=

模仿京东顶部搜索条效果制作的一个小demo

最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 1 #define kScreenWidth [UIScreen mainScreen].bounds.size.width 2 #define kScreenHeight [UIScreen mainScreen].bounds.size.height 3 4 #import "mainViewController.h" 5 6 @interface mainViewController

2016最新京东商城首页静态模板下载

2016最新京东商城首页静态模板下载 预览 百度云盘下载

Android防微信首页左右滑动切换

大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰)o 页面上看到的三个页面是三个Fragment, 左右滑动使用viewpager,相信大家也都是这么再用,那么底部用的是什么技术呢,底部渐变其实就是重写了ImageView,以及在左右滑动时,改变了TextView的颜色值,是不是很简单...下面我们一步一步的来: 1.自定义ImageView:

Android例子源码模仿安卓微信、云播雷达扫描动画效果

本项目是一个模仿Android微信.云播雷达扫描动画效果的小例子,点击中间的黑色圆圈开始扫描动画,再次点击复位,需要这种效果的朋友可以自己下载看一下,因为是动画效果所以截的静态图有点变形,项目编译版本4.4.2默认编码GBK 源码包下载地址以及运行截图. [点击这里]

3.【原创】简单易用的banner滚动插件推荐

git地址:https://github.com/happyfreelife/terseBanner 最近在做一个网页demo,找寻一个简单易用的banner滚动插件,发现这个插件不错,支持移动端和pc端,而且使用起来特别简单易用.为防止后期可能会再次用到,故此做个标记,方便下次使用. 原文地址:https://www.cnblogs.com/Nick-Hu/p/11224998.html

7天搞定Node.js微信公众号开发

课程目录:第1章 前期准备让我们和老师一起做些准备工作,搭建好开发环境,了解微信号的分类和功能,最后写段代码实现加密认证逻辑.第2章 实战入门理解微信中票据的作用,利用微信中消息与回复的功能,编写一个简易的"回复机器人"效果.第3章 微信流程及技术串讲本章节会对课程中所需要的ES6中的新技术点进行一次串讲,包括Promise 如何使用,Generator 生成器,及 Koa 和 Express 中间件.第4章 实战进阶这一天的工作是将微信提供的重要接口,一个一个串下来,尤其是实现素材接

零java基础搞定微信Server

自从打通了微信client到BLE设备端的通道.我的工作就转移到了server端了.微信的BlueDemoServer是以java编写,而本尊仅仅懂得嵌入式,对JavaWeb一窍不通. 本尊贵为IOT的弄潮儿.下定决定要了结这件事. 索性就写一个系列的学习笔记,督促自己,名字叫"零java基础搞定微信Server",记录下我这样零java基础的人应该怎样应对web服务端. 我的计划是让系列中的文章结合BlueDemoServer进行分析,目的是尽快的掌握这个项目所需的基础技术.不在关系