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


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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
JQuery复制DOM节点的方法
Jun 11 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 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
Protoss建筑一览
2020/03/14 星际争霸
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
文字幻灯片
2006/06/26 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Javascript 解疑
2009/11/11 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JavaScript利用HTML DOM进行文档操作的方法
2016/03/28 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现读取并保存文件的类
2017/05/11 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
干部鉴定材料
2014/05/18 职场文书
书法大赛策划方案
2014/06/04 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
公司租车协议书
2015/01/29 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers