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


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 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
js css样式操作代码(批量操作)
Oct 09 Javascript
JavaScript 学习笔记一些小技巧
Mar 28 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
js实现3d悬浮效果
Feb 16 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
详解微信小程序中组件通讯
Oct 30 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
Aug 06 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
一个ftp类(ini.php)
2006/10/09 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
JScript中的&quot;this&quot;关键字使用方式补充材料
2007/03/08 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
javascript的BOM汇总
2015/07/16 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[00:34]DOTA2上海特级锦标赛 VG战队宣传片
2016/03/04 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python的Django框架可适配的各种数据库介绍
2015/07/15 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python实现上下班抢个顺风单脚本
2018/02/07 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Form表单及django的form表单的补充
2019/07/25 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Django choices下拉列表绑定实例
2020/03/13 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
护理专业毕业生推荐信
2013/10/31 职场文书
高中军训感言1000字
2014/03/01 职场文书
团日活动总结怎么写
2014/06/25 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python