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


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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
Oct 23 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
小程序实现多列选择器
Feb 15 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
React中使用Vditor自定义图片详解
Dec 25 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
解决vue-loader加载不上的问题
2020/10/21 Javascript
js实现随机点名
2021/01/19 Javascript
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python实现常见的回文字符串算法
2018/11/14 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
ipython和python区别详解
2019/06/26 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
小孩百日宴答谢词
2014/01/15 职场文书
无故旷工检讨书
2014/01/26 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书