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


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代码格式化和语法着色V2
Oct 14 Javascript
Javascript验证方法大全
Sep 21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
js实现纯前端压缩图片
Nov 16 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函数解决SQL injection
2006/12/09 PHP
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php遍历CSV类实例
2015/04/14 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Laravel事件监听器用法实例分析
2019/03/12 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
python实现分页效果
2017/10/25 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
解决python flask中config配置管理的问题
2019/07/26 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python 画条形图(柱状图)实例
2020/04/24 Python
使用Html5中的cavas画一面国旗
2019/09/25 HTML / CSS
信息管理员岗位职责
2013/12/01 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
导游词之长城八达岭
2019/09/24 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
一文搞懂python异常处理、模块与包
2021/06/26 Python
i7 6700处理器相当于i5几代
2022/04/19 数码科技
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python