微信小程序的引導頁實現(xiàn)代碼

更新時間：2020年06月24日 09:47:19 作者：寂寞々先生

這篇文章主要介紹了微信小程序的引導頁實現(xiàn)代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前一段時間寫了一個微信小程序的項目，其中就有引導頁面這一功能模塊，接下來給大家說一下這一塊的怎么實現(xiàn)的以及一個思路吧！

在這里插入圖片描述

一、引導頁

下給大家康康效果圖是啥樣舍的呢??！

在這里插入圖片描述

其實就是和輪播圖差不多，就是當用戶滑動到最后一頁的時候顯示跳轉頁面就完事了。

二、代碼分析

第一步：先找到小程序目錄下面的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">
	<!-- 可以更據(jù)guidance.js 下標判斷到最后一頁顯示button按鈕點擊跳轉 -->
	<button bindtap="getIndex" wx:if="{{ swiperCurrent+1 == swiperMaxNumber }}">跳過</button>
	
</view>

注釋：

swiper：1、在小程序中只能當作滑塊視圖容器。
2、其中只可放置swiper-item組件，否則會導致未定義的行為。

bindchange：current 改變時會觸發(fā) 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({
	/**
	 * 頁面的初始數(shù)據(jù)
	 */
	data: {
		banners:[], // 輪播
		swiperCurrent: 0, // 引導頁的下標 0 
		swiperMaxNumber: 3 // 引導頁的下標 3
	},
	fike(e) {
		this.setData({
			swiperCurrent: e.detail.current
		});
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面加載
	 */
	onLoad: function (options) {
		var arr = [];
// 在這里進行數(shù)據(jù)請求 
		wxapi.banners().then( res => {
			res = res.data;
			res.forEach(item =>{
				if (item.type == 'app') {
					arr.push(item)
				}
			});
			// 把數(shù)據(jù)更新到頁面上
			this.setData({	
				banners:arr
				
			})
		})
	},
	getIndex() {
	// wx.switchTab():跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面，
	//這里的tabBar是底下的導航欄指定的頁面，
		wx.switchTab({
			url:"/pages/index/index"
		})
	},
})

accomplish

在這里插入圖片描述