做服务最好的
www.dafabet建设公司
当前位置:首页 > 建站资讯 > 手机微信www.dafabet

微信小程序如何使用swiper制作类似APP引导页

发表日期:2018-02-24 15:01:59作者来源:dafabet娱乐场网络浏览次数:308 标签: 微信小程序    

大家使用过的APP,如果是安装后第一次打开,百分之八十都有引导页,主要是几张图片切换,介绍APP的用途和特色。而微信小程序相对比较简单,则比较少出现这种引导页,但是如果你的小程序相对比较复杂,就需要制作一个类似APP引导页,里面放几张图片介绍如何使用小程序。那么具体如何制作呢?

制作要点有以下几点:

1、判断用户是否第一次打开小程序,只有当第一次打开才自动跳转到引导页;
2、使用微信小程序组件swiper切换展示图片;
3、需要有一个“立即体验”的按钮调回主界面。

操作步骤如下:

1、增加页面

在app.json里增加一个引导页界面 "pages/index/guide"

2、guide.wxml代码如下

<swiper class="guide_swiper" indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" mode='aspectFit' class="slide-image" />
</swiper-item>
</block>
</swiper>
<view class="next_btn" bindtap='goto_next'>
立即体验
</view>

3、guide.wxss如下

page{
background-color:#fff;
}
.guide_swiper{
width:100%;
height:100vh;
}
.slide-image{
margin:0 auto;
height:100vh;
width:100%;
}
.next_btn{
position:fixed;
z-index:1000;
bottom:60rpx;
width:210rpx;
height:60rpx;
line-height:60rpx;
left:270rpx;
font-size:30rpx;
text-align:center;
box-sizing:border-box;
background-color: #33b6ea;
opacity:0.7;
color:#fff;
border-radius:30rpx;
}

4、guide.js代码如下

Page({
data: {
imgUrls: [
'图片地址1',
'图片地址2',
'图片地址3',
'图片地址4',
'图片地址5'
],
indicatorDots: true,
autoplay: false,
interval: 5000,
duration: 300
},
goto_next:function(val) {
wx.redirectTo({
url: '/pages/index/index'
})
}
})


这样就做好了一个小程序的引导页。

小程序引导页

dafabet娱乐场网络专注于微信小程序定制开发,欢迎广大客户咨询。
如没特殊注明,文章均为dafabet娱乐场网络原创,转载请注明来自http://www.szfangwei.cn/news/4177.html

相关www.dafabet设计案例

相关推荐新闻

微信小程序模板消息推送详...

在如今科技发达的年代,大家每天都在接收大量的信息,如电话、短信...

日期:2018-02-24 浏览次数:169

手机端选择H5网页、微信小...

近几年智能手机飞速发展,对于www.dafabet建设行业而言,最大的变化莫过于“...

日期:2018-02-24 浏览次数:242

为什么微信小程序会受到个...

微信小程序从2017年1月份上线以来就受到各界一致看好,dafabet娱乐场网络...

日期:2018-02-24 浏览次数:190

微信小程序如何运营推广 ...

很多人开发出了微信小程序后不知道怎么推广运营?其实微信小程序...

日期:2018-02-24 浏览次数:254

微信小程序开发工具支持...

有时候微信小程序调试确实比较烦恼,开发工具里的和真机差别有点大...

日期:2018-02-24 浏览次数:376

2018年1月25日更新微信小...

今天微信小程序又发布了一个比较重要的更新:从移动应用分享至微信...

日期:2018-02-24 浏览次数:397

微信小程序可以给各大商...

从微信小程序正式向人们进行上线试用,一直发展到现在,被人们所熟知...

日期:2018-02-24 浏览次数:384

【再签】海带网微信小程序...

非常感谢海带网对dafabet娱乐场网络的信任与支持,再次合作开发微信小程序端...

日期:2018-02-24 浏览次数:302

律师微信小程序开发感想

2017年12月28日,微信更新的 6.6.1 版本开放了小游戏,微信启动页面...

日期:2018-02-24 浏览次数:509

微信小程序增加任务栏功...

昨天晚上才公布重量级更新,开发音视频录制和硬件连接的功能,现在有...

日期:2018-02-24 浏览次数:509

增强竞争优势酒店小程...

古人云:读万卷书不如行万里路。随着人们生活水平的逐步提高,出门旅...

日期:2018-02-24 浏览次数:292

微信小程序开发工具支持...

有时候微信小程序调试确实比较烦恼,开发工具里的和真机差别有点大...

日期:2018-02-24 浏览次数:376

相关标签
微信小程序微信小程序制作福田www.dafabet建设公司多终端www.dafabet微信小程序推广微信小程序定制开放
www.dafabet建设解决方案
商城www.dafabet解决方案手机微信www.dafabet解决方案酒店www.dafabet设计方案
<友情连结> 手机版/ dafabet网页版/ 大发体育官网/ 捕鱼游戏平台/ 小猪浏览器-站群/ SimilarSites.com/