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


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 字符编码规则
May 04 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
Jan 12 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
JS作用域闭包、预解释和this关键字综合实例解析
Dec 16 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 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保存信息到当前Session的方法
2015/03/16 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
jquery 经典动画菜单效果代码
2010/01/26 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
javascript中的闭包概念与用法实践分析
2019/07/26 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
基于Python的OCR实现示例
2020/04/03 Python
python爬虫可以爬什么
2020/06/16 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
家长评语大全
2014/01/22 职场文书
2013年军训通讯稿
2014/02/05 职场文书
写自荐信的注意事项
2014/03/09 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
公司年会主持词范文!
2019/05/07 职场文书
导游词之潮音寺
2019/09/26 职场文书