查看詳情

uni-app中自定義組件不顯示的分析及解決辦法

需求:自定義一個導航組件,根據配置進行顯示。
程序好下:

<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只有以下幾個生命周期。
uniapp組件生命周期將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;

注:如果以上還不能解決你的問題,可以嘗試一下這篇內容:uni-app開發微信小程序對變量命名的特殊要求

技術支持:
技術支持微信二維碼


原創內容,轉載請注明出處:網站建設,APP開發,小程序開發請找江西居道科技有限公司,http://www.419003.tw

智能建站系統代理招商
所屬分類:文章中心??????Time:2020-06-15 22:13:35??????人氣:2591
關閉
13517086454
球探足球比分app下载苹果 山西快乐十分遗漏号码 AG电子爆分技巧 贵州快三开奖爱彩乐 og视讯手机og视讯手机版 亿客隆 极速快乐十分免费计划 泳坛夺金开奖结果今天 亿客隆首页 甘肃快3和值推荐号码推荐号码 河内五分彩什么时候开始开奖的 亿客隆 明天吉林快三预测号码 排列5的中奖规则 山东时时彩11选5 曾道人2021年开奖结果 中彩票后的计划