前一段时间写了一个微信小程序的项目，其中就有引导页面这一功能模块，接下来给大家说一下这一块的怎么实现的以及一个思路吧！
一、引导页
下给大家康康效果图是啥样舍的呢！！
其实就是和轮播图差不多，就是当用户滑动到最后一页的时候显示跳转页面就完事了。
二、代码分析
第一步：先找到小程序目录下面的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="/UploadFiles/2021-04-02/{{item.picUrl}}">
注释：
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
微信小程序引导页,小程序引导页
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。