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

市面上大多数的app都会有一个欢迎界面，下面将演示如何通过微信小程序实现一个欢迎界面。

下面将会按照以下的顺序介绍：

布局的实现
逻辑的实现
样式的实现

1.布局的实现

整个布局使用swiper滑动视图实现，滑动视图的每一个item通过一个block块包裹，块中包裹的是滑动视图的每一个item， item中包含image图片和button按钮

wxml如下：

   <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" })// url用双引号},})

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.效果如下：

原文链接：http://blog.csdn.net/u012987546/article/details/53034082

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

微信小程序开发登录界面mysql_微信小程序欢迎界面开发的实例详解
微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现逻辑的实现样式的实现 1.布局的实现整个布局 ...
php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下微信小程序欢迎界面市面上大多数的app都会有一个欢迎界面,下面将 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序和百度的语音识别接口详解
介绍因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享. 技术关键字微微信小程序百度语音接口 nodejs,express fluent-ffmegp 环境 ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...
微信小程序自定义组件子传父详解（多图）
微信小程序自定义组件子传父详解前言: 刚开始为了测试父传子,所以把页面的数组放在了父组件中 1. 然而子组件中绑定的自定义点击事件依然放在子组件的js文件中 2. 所以就会出现我们点击页面的文字能改 ...
微信小程序使用腾讯地图SDK详解及实现步骤
信小程序使用腾讯地图SDK详解及实现步骤微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1.申请 ...
微信小程序订阅信息之Java实现详解
在微信小程序中进行了某种操作后,推送消息告知用户的操作结果.或者微信端办公流程提交给下一个人审批后,得到审批通过或是驳回修改的命令 - 使用场景具体如下图,可用在签到.提醒.通知.警告.催办等方面: ...

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

1.布局的实现

2.逻辑的实现

3.样式的实现

4.效果如下：

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

最新文章

热门文章

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

1.布局的实现

2.逻辑的实现

3.样式的实现

4.效果如下：

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

最新文章

热门文章

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

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