微信小程序的引导页实现代码


Posted in Javascript onJune 24, 2020

前一段时间写了一个微信小程序的项目,其中就有引导页面这一功能模块,接下来给大家说一下这一块的怎么实现的以及一个思路吧!

微信小程序的引导页实现代码

一、引导页

下给大家康康效果图是啥样舍的呢!!

微信小程序的引导页实现代码

其实就是和轮播图差不多,就是当用户滑动到最后一页的时候显示跳转页面就完事了。

二、代码分析

第一步:先找到小程序目录下面的app.json然后在“pages”配置好页面

{
	"pages": [
		"pages/guidance/guidance", // 配置引导页面
		"pages/index/index", // 这是跳转以后的Home页面
	],
}

这是在小程序的pages的目录里面就得到了

微信小程序的引导页实现代码

第二步:接下来在guidance.json里面进行小程序页面header的配置

{
 "usingComponents": {},
 "navigationStyle": "custom"
}

注释一下:
 Navigation是小程序的顶部导航组件,当页面配置navigationStyle设置为custom的时候可
 以使用此组件替代原生导航栏。

第三步: 在guidance.wxml里面写代码 在这里我就把轮播也给大家分享一下

<swiper class="banner_box" bindchange="fike" indicator-dots="{{true}}" indicator-active-color='#fff'>

 <swiper-item class="img_b" wx:for="{{ banners }}" wx:key="id">
 
 <image class="img_log" src="{{item.picUrl}}"></image>
 
 </swiper-item>
 
</swiper>
<!-- button按钮 -->
<view class="skip" bindtap="skip">
	<!-- 可以更据guidance.js 下标判断到最后一页显示button按钮点击跳转 -->
	<button bindtap="getIndex" wx:if="{{ swiperCurrent+1 == swiperMaxNumber }}">跳过</button>
	
</view>

注释:

 swiper:1、在小程序中只能当作滑块视图容器。
   2、其中只可放置swiper-item组件,否则会导致未定义的行为。   

 bindchange:current 改变时会触发 change 事件,event.detail = {current, source}  

 indicator-dots:是否显示面板指示点 

 indicator-active-color='#fff':当前选中的指示点颜色

 swiper-item:  

  仅可放置在swiper组件中,宽高自动设置为100%。

属性 类型 默认值 必填 说明
item-id string 该 swiper-item 的标识符

微信官方文档链接:https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

第四步:是不是改写样式了

.banner_box {
	width: 100%;
	height: 100vh;
	position: relative;
}
.img_b,.img_log {
	width: 100%;
	height: 100%;
}
.skip{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 86rpx;
}
button {
	width: 185rpx;
	height: 67rpx;
	font-size: 28rpx;
	line-height: 67rpx;
	background-color: #32CD32;
	color: #fff;
}

第五步: js逻辑操作

// 这里是我当时引入的封装好的接口
const wxapi = require('../../api/urls.js');

// pages/guidance/guidance.js
Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		banners:[], // 轮播
		swiperCurrent: 0, // 引导页的下标 0 
		swiperMaxNumber: 3 // 引导页的下标 3
	},
	fike(e) {
		this.setData({
			swiperCurrent: e.detail.current
		});
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		var arr = [];
// 在这里进行数据请求 
		wxapi.banners().then( res => {
			res = res.data;
			res.forEach(item =>{
				if (item.type == 'app') {
					arr.push(item)
				}
			});
			// 把数据更新到页面上
			this.setData({	
				banners:arr
				
			})
		})
	},
	getIndex() {
	// wx.switchTab():跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,
	//这里的tabBar是底下的导航栏指定的页面,
		wx.switchTab({
			url:"/pages/index/index"
		})
	},
})

accomplish

微信小程序的引导页实现代码

到此这篇关于微信小程序的引导页实现代码的文章就介绍到这了,更多相关微信小程序的引导页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
sencha ext js 6 快速入门(必看)
Jun 01 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 #Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 #Javascript
javascript实现前端成语点击验证优化
Jun 24 #Javascript
vue各种事件监听实例(小结)
Jun 24 #Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 #Javascript
javascript实现前端成语点击验证
Jun 24 #Javascript
vue单文件组件无法获取$refs的问题
Jun 24 #Javascript
You might like
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
Zend Framework开发入门经典教程
2016/03/23 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
html下载本地
2006/06/19 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
JavaScript 不支持 indexof 该如何解决
2016/03/30 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
水污染治理工程专业自荐信
2014/06/21 职场文书
上课迟到检讨书
2015/05/06 职场文书
生日祝酒词大全
2015/08/10 职场文书
小组口号霸气押韵
2015/12/24 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS