uniapp使用intro.js做指引

1. 下载包 intro.js

npm i intro.js -s

2. 新建一个intro.js文件配置intro, 代码如下：

import introJs from 'intro.js'

import 'intro.js/introjs.css'

 

const intro = introJs()

// 更多配置参数请到官方文档查看

intro.setOptions({

  nextLabel: '下一步',  // 下一个按钮文字

  prevLabel: '上一步',  // 上一个按钮文字

  skipLabel: '跳过',    // 跳过按钮文字

  doneLabel: '立即体验',// 完成按钮文字

  hidePrev: true,       // 在第一步中是否隐藏上一个按钮

  hideNext: true,       // 在最后一步中是否隐藏下一个按钮

  exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍

  showStepNumbers: false,     // 是否显示红色圆圈的步骤编号

  disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击

  showBullets: false          // 是否显示面板指示点

})

export default intro

2. 使用方式 JSON配置

//html:

<view>

     <view id="step1"></view>

    <view id="step2"></view>

    <view id="step3"></view>

</view>

//js :

computed:{

   newSteps(){  //写在computed这里，数据可以写成动态

     var  steps=[

                    {

                        element: '#step1',  // 目标元素

                        intro: '这里查看各公证状态列表,在区域内滑动可以查看更多公证事项',   // 提示文本

                        position: 'bottom'     // 提示位置

                    },

                    {

                        element: '#step2',

                        intro: '在这范围内点击任意地方可进入公证详情',

                        position: 'bottom'

                    },

      ]

      return   steps

  }

}

methods: {

       isOnceFn(){

                if(!uni.getStorageSync('isOnceInList')){ //第一次进入则进行指引

                    var steps=this.newSteps

                    // 配置

                    Intro.setOptions({steps})

                    // 开始

                    this.$nextTick(() => {

                        // 开始

                        Intro.start()

                    })

                    // 退出引导回调函数

                    Intro.onexit(function () {

                        uni.setStorageSync('isOnceInList', true); //isOnceInList==true 即不是第一次进入啦

                    })

                }

            },

}

 

这样就可以啦~~