需求：自定义一个导航组件，根据配置进行显示。
程序好下：
<template>
<view class="outBox">
<view class="mt10 mb10 pd10 nav_li" v-for="(itm,idx) in _module" :key="idx" :class="_linum" :style="'background-image:url('+itm.thumb+');'">
{{itm.title}}
</view>
</view>
</template>
<script>
//栏目导航组件
export default {
data(){
return {
_module:[],
_linum:''
}
},
props: {
current: {
type:String,
default:''
},
home: {
type:Boolean,
default:false
},
thumb: {
type:Boolean,
default:false
},
linenum: {
type:Number,
default:3
}
},
onReady() {
var _this = this;
var _current = _this.current || '';
var _home = _this.home || false;
var _thumb = _this.thumb || false;
var _linenum = _this.$func.toInt(_this.linenum);
if(_linenum<6 && _linenum>0){
_this._linum = 'li_' + _linenum;
}else{
_this._linum = 'li_3';
}
var showModule = function(vobj){
//对module进行处理、展示，是否只显示有缩略图的
//return false;
if(!_this.$func.isN(vobj)){
let _tmpArr = [];
for(let _md in vobj){
if(!_this.$func.isN(vobj[_md].isMenu)){
_tmpArr.push(vobj[_md]);
}
}
_this._module = _tmpArr;
}
}
//从缓存中读取栏目信息，如果没有，读取服务端的
let moduleData = uni.getStorageSync('module');
if(this.$func.isN(moduleData)){
this.$func.myAjax('/AjaxAPI.php',{action:'module'},function(ret){
if(ret){
if(ret.code>0){
//写入缓存
uni.setStorage({
key:'module',
data:ret.data
});
//console.log(JSON.stringify(ret.data));
showModule(ret.data,_this);
}
}
});
}else{
//console.log(JSON.stringify(moduleData));
showModule(moduleData,_this)
}
}
}
</script>
结果发现，组件并未渲染，不显示，各种断点调试，依然无效。
最后发现，问题出在onReady事件上，百度了一下发现uniapp的组件中并没有onReady事件，uni-app只有以下几个生命周期。
将onReady换成created后BUG就解决了。
注：如果修改onReady为created还是不行，那么，就可能是由于以下代码导致的。
var showModule = function(vobj){
//对module进行处理、展示，是否只显示有缩略图的
//return false;
if(!_this.$func.isN(vobj)){
let _tmpArr = [];
for(let _md in vobj){
if(!_this.$func.isN(vobj[_md].isMenu)){
_tmpArr.push(vobj[_md]);
}
}
_this._module = _tmpArr;
}
}
_this._module = _tmpArr;
这里直接引用_this._module的时候，_this是一个vue对象，将 var showModule = function(vobj) 改为 var showModule = function(vobj,vbox)，然后 _this._module = _tmpArr; 改为 vbox._module = _tmpArr;
在created() {}中编写代码时，需要避免以下划线开头的变量命名。
注：如果以上还不能解决你的问题，可以尝试一下这篇内容：uni-app开发微信小程序对变量命名的特殊要求
技术支持：
