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


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 相关文章推荐
文本链接逐个出现的js脚本
Dec 12 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
Dec 18 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
javascript编写简易计算器
May 06 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 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
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
有针对性的求职自荐信
2013/11/14 职场文书
交通安全寄语大全
2014/04/08 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
物流管理专业求职信
2014/05/29 职场文书
反邪教标语
2014/06/23 职场文书
同志主要表现材料
2014/08/21 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014年环卫工作总结
2014/11/22 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
企业文化学习心得体会
2016/01/21 职场文书
《普罗米修斯》教学反思
2016/02/22 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers