导航与列表双向联动组件及模板（支持app、H5、小程序）是uniapp下，支持导航栏超出滚动，列表内容滚动联动导航栏列表索引 ，导航点击定位对应列表内容，很好用的一款导航插件

简介

• 支持导航栏超出滚动
• 列表内容滚动联动导航栏列表索引
• 导航点击定位对应列表内容

提示

• 组件的开发用到stylus，提前安装好stylus编译插件
• 组件模板可根据原型或业务需求进行字段和部分样式的修改
• 关键逻辑部分进行了注释

插件展示

错误提示

TypeError: Cannot read property 'index' of undefined

错误原因：插件本事是没有问题，出现这个错误的场景是：是我通过端口获取远程的分类数据，然后跟新list数组，然后渲染页面后，滑动分类报错。原始插件没有任何报错。后来我怀疑是我整理的分类数据的问题，尝试了很久，依然报错。后来分析了源代码，找到原因。页面加载后，通过钩子行为，调用了int()方法。原始插件数据是写在data的list数组中，原始插件在调用int()方法前，list有数据，所以页面渲染没问题。而我通过端口调用，获取数据后，更新list数组数据，但紧紧只是更新了数组数据，int()方法已经执行完成了。页面渲染没问题，但是int()方法最开始渲染的时候，数据是空的，导致index为空的时间。系统给出TypeError: Cannot read property 'index' of undefined错误提示。

解决方法

1：删除钩子行为，将下面代码删除

    mounted() {
        this.$nextTick(function(){
            this.init()
        })
    }

2：通过端口获取数据

onLoad() {
	//获取首页数据
	uni.request({
		url: "你的获取分类数据的端口",
		method: "GET",
		success: (res) => {
			//判断数据获取成功
			if (res.code == 1) {
				this.list = res.data; //全部数据
				//获取列表数据，更新页面后，刷新函数
				//this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来
				this.$nextTick(function() {
						this.init();
					})
			}
		}
	})      },    

这样在获取后数据后调用int()方法，就可以了。

友情提示：返回的数据为索引数组就行。很简单的