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


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精华代码集
Jan 24 Javascript
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
javascript中递归的两种写法
Jan 17 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
微信小程序反编译的实现
Dec 10 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 SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP 裁剪图片
2021/03/09 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
python中append实例用法总结
2019/07/30 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python中count函数简单的实例讲解
2020/02/06 Python
Python随机数函数代码实例解析
2020/02/09 Python
python开发入门——列表生成式
2020/09/03 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
购买原创艺术品:Zatista
2019/11/09 全球购物
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
EJB面试题
2015/07/28 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
在职人员函授期间自我评价分享
2013/11/08 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
优秀团员事迹材料
2014/12/25 职场文书
社区党务工作总结2015
2015/05/19 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis