微信小程序的引導(dǎo)頁實(shí)現(xiàn)代碼

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

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

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

在這里插入圖片描述

一、引導(dǎo)頁

下給大家康康效果圖是啥樣舍的呢?。?/p>

在這里插入圖片描述

其實(shí)就是和輪播圖差不多，就是當(dāng)用戶滑動到最后一頁的時(shí)候顯示跳轉(zhuǎn)頁面就完事了。

二、代碼分析

第一步：先找到小程序目錄下面的app.json然后在“pages”配置好頁面

{
	"pages": [
		"pages/guidance/guidance", // 配置引導(dǎo)頁面
		"pages/index/index", // 這是跳轉(zhuǎn)以后的Home頁面
	],
}

這是在小程序的pages的目錄里面就得到了

在這里插入圖片描述

第二步：接下來在guidance.json里面進(jìn)行小程序頁面header的配置

{
 "usingComponents": {},
 "navigationStyle": "custom"
}

注釋一下：
Navigation是小程序的頂部導(dǎo)航組件，當(dāng)頁面配置navigationStyle設(shè)置為custom的時(shí)候可
以使用此組件替代原生導(dǎo)航欄。

第三步：在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 下標(biāo)判斷到最后一頁顯示button按鈕點(diǎn)擊跳轉(zhuǎn) -->
	<button bindtap="getIndex" wx:if="{{ swiperCurrent+1 == swiperMaxNumber }}">跳過</button>
	
</view>

注釋：

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

bindchange：current 改變時(shí)會觸發(fā) change 事件，event.detail = {current, source}

indicator-dots：是否顯示面板指示點(diǎn)

indicator-active-color='#fff'：當(dāng)前選中的指示點(diǎn)顏色

swiper-item：

僅可放置在swiper組件中，寬高自動設(shè)置為100%。

屬性	類型	默認(rèn)值	必填	說明
item-id	string	否	該 swiper-item 的標(biāo)識符

微信官方文檔鏈接：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邏輯操作

// 這里是我當(dāng)時(shí)引入的封裝好的接口
const wxapi = require('../../api/urls.js');

// pages/guidance/guidance.js
Page({
	/**
	 * 頁面的初始數(shù)據(jù)
	 */
	data: {
		banners:[], // 輪播
		swiperCurrent: 0, // 引導(dǎo)頁的下標(biāo) 0 
		swiperMaxNumber: 3 // 引導(dǎo)頁的下標(biāo) 3
	},
	fike(e) {
		this.setData({
			swiperCurrent: e.detail.current
		});
	},
	/**
	 * 生命周期函數(shù)--監(jiān)聽頁面加載
	 */
	onLoad: function (options) {
		var arr = [];
// 在這里進(jìn)行數(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():跳轉(zhuǎn)到 tabBar 頁面，并關(guān)閉其他所有非 tabBar 頁面，
	//這里的tabBar是底下的導(dǎo)航欄指定的頁面，
		wx.switchTab({
			url:"/pages/index/index"
		})
	},
})

accomplish

在這里插入圖片描述