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


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实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
详解如何在angular2中获取节点
Nov 23 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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常用技巧总结(附函数代码)
2012/02/04 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
js常用函数 不错
2006/09/08 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
js实现旋转木马效果
2017/03/17 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
对layui数据表格动态cols(字段)动态变化详解
2019/10/25 Javascript
Python常用正则表达式符号浅析
2014/08/13 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python可视化text()函数使用详解
2020/02/11 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
关于迟到的检讨书
2014/01/26 职场文书
七一讲话心得体会
2014/09/05 职场文书
教师自荐信范文
2015/03/06 职场文书
认识实习感想
2015/08/10 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang