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


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 25 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
vue 实现根据data中的属性值来设置不同的样式
Aug 04 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获得url参数中具有&amp;的值的方法
2014/03/05 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
JavaScript数组的5种迭代方法
2017/09/29 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
理解Python中的With语句
2015/02/02 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python之时间和日期使用小结
2019/02/14 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
结构和类有什么异同
2012/07/16 面试题
财务部出纳岗位职责
2013/12/22 职场文书
好家长事迹材料
2014/01/23 职场文书
社团文化节策划书
2014/02/01 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
药品开票员岗位职责
2015/04/15 职场文书
2016党员党课心得体会
2016/01/07 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
pytorch 6 batch_train 批训练操作
2021/05/28 Python