微信小程序 欢迎界面开发的实例详解


Posted in Javascript onNovember 30, 2016

微信小程序 欢迎界面

市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面。

下面将会按照以下的顺序介绍:

布局的实现

逻辑的实现

样式的实现

1.布局的实现

整个布局使用swiper滑动视图实现,滑动视图的每一个item通过一个block块包裹,块中包裹的是滑动视图的每一个item, item中包含image图片和button按钮

<swiper indicator-dots="true">
    <block wx:for="{{imgs}}" wx:for-index="index">
     <swiper-item class="swiper-items" >
      <image class="swiper-image" src="{{item}}"></image>
      <button class="button-img" bindtap="start" wx:if="{{index == imgs.length - 1}}" >立即体验</button>
     </swiper-item>
    </block>
  </swiper>

2.逻辑的实现

在data中准备了一个imgs数组,数组中存放了3个图片的地址,这里还有一个start函数,该函数用来监听界面上button的点击事件。

wx.navigateTo这个api的作用就是实现界面的跳转并有返回的按钮,url是用来指定跳转的界面

Page({
    data:{
      imgs:[
        "http://img.kaiyanapp.com/5edbf92b929f9174e3b69500df52ee21.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/f2c497cb520d8360ef2980ecd0efdee7.jpeg?imageMogr2/quality/60",
        "http://img.kaiyanapp.com/64f96635ddc425e3be237b5f70374d87.jpeg?imageMogr2/quality/60",
      ],

      img:"http://img.kaiyanapp.com/7ff70fb62f596267ea863e1acb4fa484.jpeg",
    },

    start(){
       wx.navigateTo({
        url: '../home/home'
      })
      // wx.redirectTo({ url: '../index/index' })
    },


   })

3.样式的实现

swiper样式是定义滑动控件的样式:滑动控件的位置为绝对布局,宽和高为占满整个屏幕

.swiper-image样式是定义image图片的样式:宽和高为占满整个屏幕,透明度为0.9

.button-img样式是定义button按钮的样式:位置为绝对布局,离底部90px,透明度为0.6,..

swiper {
   /*这个是绝对布局*/
   position: absolute;
   height: 100%;
   width: 100%;
  }


  .swiper-image {
   height: 100%;
   width: 100%;
   /*透明度*/
   opacity:0.9;
  }


  .button-img{  
    /*这个是绝对布局*/
    position: relative;
    bottom: 90px;
    height: 40px;
    width: 120px;
    opacity:0.6;
  }

4.看效果

微信小程序 欢迎界面开发的实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js获取视频时长代码
Apr 10 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
微信小程序 配置文件详细介绍
Dec 14 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
vue-cli webpack 引入swiper的操作方法
Sep 15 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 #Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 #Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 #Javascript
You might like
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python3 元组tuple入门基础
2020/02/09 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
老师给学生的表扬信
2014/01/17 职场文书
银行办公室岗位职责
2014/03/10 职场文书
护理目标管理责任书
2014/07/25 职场文书
邓小平理论心得体会
2014/09/09 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
北京故宫导游词
2015/01/31 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers