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

微信小程序欢迎界面

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

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

布局的实现

逻辑的实现

样式的实现

1.布局的实现

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

立即体验

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;

}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

更多微信小程序欢迎界面开发的实例详解相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！

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

微信小程序云开发增删改查、按条件查询、排序方法实例详解。
前言身为一个后端程序员却一直对微信小程序云开发很感兴趣,自己也用云开发写了三个开源项目了,主要是不需要配置服务器,减少服务器的花费,钱省下来用来买猪肘子啃不香嘛,不过云开发的数据库是nosql类型, ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
php微信小程序物流进度推送,微信小程序消息推送php服务器验证实例详解
微信小程序消息推送php服务器验证实例详解设置页面("设置">>"开发设置"): 1.设置服务器域名注意http和https协议的不同. 2. ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
小程序怎么处理轮训ajax,微信小程序中使用Promise进行异步流程处理的实例详解...
微信小程序中使用Promise进行异步流程处理的实例详解我们知道,JavaScript是单进程执行的,同步操作会对程序的执行进行阻塞处理.比如在浏览器页面程序中,如果一段同步的代码需要执行很长时间( ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
微信小程序php返回数组,微信小程序数组（增，删，改，查）等操作实例详解...
微信小程序数组(增,删,改,查)等操作最近在做一个小程序的demo.由于不向后台请求数据,所以就涉及到对本地数据的操作,也遇到了一些坑,本文就以数组的增删改查为例,给新手分享一些经验. 首先这是原 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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