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


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 相关文章推荐
javscript对象原型的一些看法
Sep 19 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
js添加事件的通用方法推荐
May 15 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
javascript中的面向对象
Mar 30 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
js canvas实现俄罗斯方块
Oct 11 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 MemCached 高级缓存应用代码
2010/08/05 PHP
php实现encode64编码类实例
2015/03/24 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php文件操作相关类实例
2015/06/18 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jQuery 方法大全方便学习参考
2010/02/25 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
还不懂递归?读完这篇文章保证你会懂
2018/07/29 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
Vue实现图片轮播组件思路及实例解析
2020/05/11 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python查找相似单词的方法
2015/03/05 Python
python中split方法用法分析
2015/04/17 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
python opencv读mp4视频的实例
2018/12/07 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
仓库主管的岗位职责
2013/12/04 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
赔偿协议书范本
2014/09/12 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
中秋联欢会主持词
2015/07/04 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
php png失真的原因及解决办法
2021/11/17 PHP
vue使用watch监听属性变化
2022/04/30 Vue.js