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


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
详解Angular2响应式表单
Jun 14 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
vue 自定义组件添加原生事件
Apr 21 Vue.js
微信小程序仿抖音短视频切换效果的实例代码
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+mysqli事务控制实现银行转账实例
2015/01/29 PHP
PHP网络操作函数汇总
2015/05/18 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
面向对象的javascript(笔记)
2009/10/06 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
从0开始学Vue
2016/10/27 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python函数的5种参数详解
2017/02/24 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
python 如何读、写、解析CSV文件
2021/03/03 Python
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
2012/12/31 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
电子商务专员岗位职责
2013/12/11 职场文书
教师群众路线心得体会
2014/11/04 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
新年寄语2016
2015/08/17 职场文书
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript