uni-app实现引导功能(拿来即用)

uniapp操作指引

原则

拿来即用，节省开发时间

介绍

在网上找了好多资料，都没有找到一个模仿app操作指引的例子，于是自己封装了一个

实现思路

使用id定位，找到对应的dom，然后再进行计算位置，设置显示样式。

效果图

使用方式

<yw-operate-zhiyin ref="ywopZy" :isOpenOne="false"></yw-operate-zhiyin>

参数：isOpenOne:是否打开一次。true:是(默认存储)；false:每次都打开。

this.$refs.ywopZy.open({
	name:"首页指引",
	guideList:[
		{
			el:"#item4",
			tips:"这是微信小程序",
			style:"border-radius:8rpx;margin:0rpx"
		},
		{
			el:"#item6",
			tips:"这是抖音小程序",
			style:"border-radius:8rpx;margin:0rpx"
		},{
			el:"#login",
			tips:"点击可进行一键登录",
			style:"border-radius:8rpx;margin:0rpx"
		},
	]
})

源码

下载源码

源码清单

1.uniapp组件，使用说明
2.可以直接运行的uniapp项目

联系方式

可关注后发私信

文章转载

查看文章