需求：自定義一個導航組件，根據配置進行顯示。
程序好下：
<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開發微信小程序對變量命名的特殊要求
技術支持：
