微信小程序-欢迎界面
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
- 布局的实现
- 逻辑的实现
- 样式的实现
- 看效果
市面上大多数的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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
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' })},})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
4.看效果
微信小程序-欢迎界面相关推荐
- 微信小程序开发登录界面mysql_微信小程序 欢迎界面开发的实例详解
微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局 ...
- 微信小程序初始界面设置密码
如何在微信小程序初始界面输入密码,看到网上给出了很多方法,较为常见的是如何输入一个六位密码.这里介绍一种觉得比较可行的方法,具体实现如下: 最终效果: 代码实现: wxml: <input cl ...
- php欢迎界面代码,分享微信小程序欢迎界面开发的实例代码
这篇文章主要分享微信小程序欢迎界面开发的实例代码的相关资料,这里实现欢迎界面的简单实例和实现代码及实现效果图,需要的朋友可以参考下 微信小程序 欢迎界面 市面上大多数的app都会有一个欢迎界面,下面将 ...
- 微信小程序之界面交互API07
微信小程序之界面交互API07 关于界面交互,在官方文档上提供了API来 wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)! 显示消息提示框 参数 Obj ...
- 视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
- 微信小程序开发界面介绍
这里是引用 主要是简单的介绍一下微信小程序开发界面的各个文件 先看下这个图片 这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
- 2、微信小程序开发界面
2.微信小程序开发界面 针对于上节需要补充的点 在新建微信小程序时,要注意区分微信公众号IP和微信小程序IP.我们在开发小程序的时候是要用微信小程序IP不然编译不了哈哈哈. 左边是模拟器的视图,右边是 ...
- 如何让小程序页面更顺滑_微信小程序|实现界面滑动切换
问题描述 在许多用户体验效果较好的微信小程序中,用户通过左右滑动界面也能实现页面的切换,方便了用户使用,那它们是如何实现的呢? 解决方案 图 1 标签页切换 在图1中,顶部的 3 个标签页标题用 ...
- 微信小程序 欢迎界面开发的实例详解
市面上大多数的app都会有一个欢迎界面,下面将演示如何通过微信小程序实现一个欢迎界面. 下面将会按照以下的顺序介绍: 布局的实现 逻辑的实现 样式的实现 1.布局的实现 整个布局使用swiper滑动视 ...
最新文章
- 学习笔记Spark(六)—— Spark SQL应用(1)—— Spark SQL简介、环境配置
- SSM整合(2): spring 与 mybatis 整合
- 转	Cocos2d-x3.0模版容器详解之三:cocos2d::Value
- C++中如何定义动态数组
- Kubernetes是容器化微服务的圣杯么?
- 多线程条件变量(pthread_cond_wait)用法
- Win11系统无法安装GPT分区的解决方法
- Spring AOP源码解析——专治你不会看源码的坏毛病!
- 项目组网技术方案实施要点
- hdu acm 1010
- 拥有PMP/ITIL/Prince2证书,你将享受这些国家福利
- 做了5年Android开发,混吃等死的日子才是我人生最辛苦的日子!
- html怎么使两张照片重叠,怎样把两张图片叠加在一起?
- C语言——今天星期几(详细注释)
- Go微服务架构实战 中篇:6. 微服务治理策略
- 多模态融合技术综述和应用
- echarts使用e_macarons方法
- MathType 6.9嵌入到Office(word)2016中
- PYTHON实现将一个文件夹下的名字满足条件的图片拷贝复制到另一个文件夹路径
- 没及格,我猜这套华为软件测试面试题没几个人能及格
热门文章
- 入职宇宙条之后,我知道了这些
- 【工具类-- posman导出的接口JSON 转为 jmx】
- windows c语言目录操作函数,C/C++: C语言目录操作
- linux笔记(6):东山哪吒D1H测试HDMI显示内置图片-命令行调试
- 使用servlet提供接口
- 第2章KNN算法笔记_函数classify0
- 信息论基础(信息量、熵、KL散度、交叉熵)
- nginx nobody
- 影音设备VCD解码板维修一些常识
- 【go】golang中置new()函数和make()函数的区别