【报Bug】nvue的list内容多的时候 IOS14会闪退

nvue的list内容多的时候 IOS14会闪退

<template>  
    <view class="page" :style="{'background-color':pagebg}" >            
              <list  class="content" :style="{'height':xscroll}" show-scrollbar="false" @scroll="Gunroll" loadmoreoffset="10" @loadmore="loadMore" ref="tlist" >  
               <cell  @click.stop="showMenu" v-for="(item, index) in ChaperList" :ref="'item'+item.id">  
                <text class="zjtit" :style="{'color':FtColor,'font-size':FontSize*1.02}">{{item.name}}</text>  
                <text class="cont_txt" :style="{'color':FtColor,'line-height':FontSize*1.8,'font-size':FontSize}" >{{item.atext}}</text>  
                </cell>  
                <cell v-if="ChaperList.length>20">  
                    <view class="loading-more">  
                        <loading-indicator style="margin-right:15px;"></loading-indicator>  
                        <text class="loading-more-text">加载中...</text>  
                    </view>  
                </cell>  
              </list>  

        <view class="fixedx footer-box dianliang" :style="{'background-color':pagebg}" @click.stop="toTop(6,$event)">  
            <text class="dqtxt">进度</text>     
            <text class="dqtxt">{{nowTitle}} 标题</text>  
            <text class="dltxt">  {{batteryState}} {{systemTimeStr}} 电量 {{batteryLevel}}</text>   

        </view>  

        <view class="fixedx header footer-box" v-if="headFoot">  
            <view @click="goBack" class="col3">  
                <text class="icons " style="font-family:iconfont;font-weight: bold;text-align: left;">&#xe64d;</text>  
            </view>  
            <view class="col3">  
                <text class="htit">我是标题我是标题我是标题我是标题</text>  
            </view>  
            <view class="col3 uni_row">  
                <text class="icons" style="font-family:iconfont;">&#xe7db;</text>  
                <text class="icons" style="font-family:iconfont;">&#xe70e;</text>  
                <text class="icons" style="font-family:iconfont;">&#xe635;</text>  
            </view>  

        </view>  

        <view class="fixedx footer footer-box" v-if="headFoot">  
            <view class="hleft" @click="footBtn(0)">  
                <text class="icons" style="font-family:iconfont">&#xe649;</text>  
                <text class="btntxt">目录</text>  
            </view>  
            <view class="hcenter" @click="footBtn(1)">  
                <text class="icons" style="font-family:iconfont">&#xe660;</text>  
                <text class="btntxt">设置</text>  
            </view>   
            <view class="hcenter" @click="footBtn(2)">  
                <text class="icons" style="font-family:iconfont">&#xe61c;</text>  
                <text class="btntxt">夜间</text>  
            </view>   
            <view class="hcenter" @click="footBtn(3)">  
                <text class="icons" style="font-family:iconfont">&#xe66e;</text>  
                <text class="btntxt">评论</text>  
            </view>   
        </view>  
        <view class="fixedx moreset" v-if="ismoset">  
            <view class="uni_row">  
                <text class="stan icons" style="font-family:iconfont;font-size: 28upx;">&#xe629;</text>  
                 <view class="stbg">  
                     <movable-area class="slider" >  
              <movable-view class="movdiv" :x="x" :y="y" direction="horizontal" @change="InChange"></movable-view>  
                     </movable-area>  
                 </view>  
                <text class="stan icons" style="font-family:iconfont">&#xe629;</text>  
            </view>  
            <view class="uni_row fontrow">  
                <text @click="addFont(0)" class="stfont">A-</text>  
                <text  class="stfont">{{FontSize}}</text>  
                <text @click="addFont(1)" class="stfont">A+</text>  
            </view>  
            <view class="uni_row">  
                <text @click="ColorCheck(index)" v-for="(item,index) in Bgcolors" class="colors" :class="item.bgact" :style="{'background-color':item.color}"></text>    
            </view>  
        </view>  
    </view>  
</template>  

<script>  
        let BookId;   
      const dom = weex.requireModule('dom')  
        // import { traditionalized, simplized, dateToStr } from '../../utils/utils.js';  
    export default {  
        components:{    
        },  
        data() {  
            return {  
                x: 0,  
                y: 0,  
                old: {  
                    x: 0,  
                    y: 0  
                },   
                Bgcolors:[  
                     {id:0,color:"#b2ddb6",bgact:'bg_act',ftcor:"##314d34"},  
                     {id:1,color:"#f8f8f8",bgact:'',ftcor:"#3a3a3a"},  
                     {id:2,color:"#e7d7b3",bgact:'',ftcor:"#645127"},  
                     {id:3,color:"#f0c0c0",bgact:'',ftcor:"#642c2c"},  
                     {id:4,color:"#444343",bgact:'',ftcor:"#989898"},  
                     {id:5,color:"#405670",bgact:'',ftcor:"#7297c2"},  
                 ],  
                 ChaperList: [],  
                windowWidth: 0,   //可用屏幕宽度  
                windowHeight: 0,   //可用屏幕高度  
                contentHeight: 0,  //阅读区域高度  
                dqtxt:'',  
                FontSize:20,  
                FtLines:40,  
                FtColor:"#314d34",  
                platform: '',  //设备  
                batteryState: '', //电池状态  
                batteryLevel: 100, //电量  
                systemTime: '',   //系统时间  
                systemTimeStr: '',   //系统时间字符串  
                statusBarHeight: 0, //状态栏高度  
                pixelRatio: '',    //设备像素比  
                pagebg:"#b2ddb6",  
                headFoot:false,  
                ismoset:false,  
                xscroll:'',  
                 dataList: [  
                     {id: "1", name: '第一章 遇见',atext:`    今夜，月色如水，银白色的月光从半空中洒落，流淌在整片山谷之中。 \n        雷尔夫躺在一片紫色花海之中，呼吸有些急促，他的伤势很严重，五分钟前，光是上半身就被七八只箭矢贯穿。 \n        举起左手，借月光看着手上黑色的骷髅戒指，他有些发愣。 \n        带着血迹的箭矢四散在周围，灰色的魔法衣也被血迹浸染，从浑身传来的疼痛也让他明白这并非梦境。 \n        “所以说我之所以穿越全都是因为你搞出来的” \n        沉浸了许久，雷尔夫开口问道。 </text>`},  

                 ]  
            }  
        },  
        created () {  
              for (let i = 1; i < 21; i++) {  
                this.ChaperList.push({id: i, name: '第'+i+'章 秘书人选',atext:`    今夜，月色如水，银白色的月光从半空中洒落，流淌在整片山谷之中。 \n        雷尔夫躺在一片紫色花海之中，呼吸有些急促，他的伤势很严重，五分钟前，光是上半身就被七八只箭矢贯穿。 \n        举起左手，借月光看着手上黑色的骷髅戒指，他有些发愣。 \n        带着血迹的箭矢四散在周围，灰色的魔法衣也被血迹浸染，从浑身传来的疼痛也让他明白这并非梦境。 \n        “所以说我之所以穿越全都是因为你搞出来的” \n        沉浸了许久，雷尔夫开口问道。 \n        出乎预料的时，左手上的骷髅戒指居然像是有智慧一般答话了。 \n        “虽然很省略，差不多就是这样。” \n        “我还能回去吗” \n        “嘛，机会是有的，不过可能性很低。” \n        “淦” \n        雷尔夫感觉有些崩溃，别人穿越好歹是被劳模汽车撞死穿越，或者寿终正寝穿越，或者助人为乐穿越，而他呢那是躺着穿越没错，就是躺着穿越，他好好的在床上睡着午觉就穿越了 \n        而现在，是他穿越的第十八个年头，更有意思的，这个世界还不是他穿越的的一个世界。 \n        他穿越的第一个世界是牙狼炎之刻印，没错，就是那个肉身打怪十分钟，变身一刀秒的牙狼系列，不过是动漫版本。 \n        在那里，他的身份是双亲死亡的孤儿，父母不明，不过就特征而言是个混血儿，似乎是来自东方贩卖丝绸的商人和本地女子的孩子，不过这并不算什么大事。 \n        而他穿越的时间，是主线开始的三十五年前。 \n        在那个世界之中，有着名为霍拉的恶魔，通过人类心中的阴我附身在人类身上，吞噬着人类，同样的，也有对抗恶魔的人士魔戒骑士和魔戒法师。 \n        魔戒骑士专修剑术，通过强大的铠甲和自身的战斗能力斩杀霍拉，而魔戒法师，顾名思义则是通过修行法术、制作各种道具来对抗霍拉。 \n        霍拉和二者之间的战斗持续了不知道多久。 \n        统领魔戒骑士和魔戒法师的机构叫做元老院，是一个非官方的组织，但是能量却大的可怕，其中还存在着不知道活了多少年的怪物，而为了获得充足的战斗力，他们也会收养一些孤儿来进行训练，培养他们成为未来的魔戒骑士和魔戒法师。 \n        而雷尔夫就是其中之一。 \n        在知道自己到了牙狼的世界中时，他有些迷茫，不过得益于成年人的思考，他知道如果想在这世界里生存下来自己就必须有所准备。 \n        所以，他在这十八年里拼命的训练自己，至少在同龄人之中，他的剑术算得上数一数二的，而且，让他意外的是，他发现了自己还有着魔戒法师的天赋，虽然天赋不怎么样。 \n        不过这并不要紧，雷尔夫的重点并非魔戒法师的法术，而是他们能够制造各种魔导具的能力。 \n        就这样，十八年的时间里，雷尔夫成长为了一名出色的魔戒骑士，并且在道具制作和制药方面的成就也十分不错，甚至可以自己配置疗伤药，一切都朝着好的方向发展，只不过，就在这个时候，意外发生了。 \n        炎之刻印的背景是十七年前的猎巫运动，当时，瓦利安提的国王被背叛的魔戒法师曼多萨迷惑，对这片大陆上的魔戒骑士和魔戒法师发动了猎巫运动，借此机会，瓦利安提还趁机派遣军队对周围地区发动了清洗，疆域不断扩大。 \n        也就是在这个时候，雷尔夫才确定了自己的穿越时间。 \n        知道这场运动的他自然不会去硬碰硬，毕竟魔戒骑士和魔戒法师不能对普通人出手的这条规定简直就是将他们逼入死路，所以雷尔夫第一时间就打算撤退。不过他低估了当时瓦利安提猎巫的力度还有人们对于巫术的恐惧。 \n        他被人们举报，彻底暴露，几十名精锐的士兵围堵了他，第一时间用强弩将其射成了重伤，因为猝不及防，他的右手被贯穿，剑也丢失了。 \n        就在他以为自己即将死亡的时候，他却再次穿越，来到了这个世界之中，而更有意思的是，在他的手上，却显现了一个他再熟悉不过的魔道轮扎鲁巴，最强的魔戒骑士、黄金骑士牙狼的魔道轮。 \n        炎之刻印世界里的扎鲁巴此刻正处于损坏之中，这一点他很确认，所以，这个扎鲁巴一定不是炎之刻印世界里的，之后的一席话也让他确认了这一点。 \n        “所以简单来说，你是另一个平行世界的扎鲁巴，我也是因为你穿越到了上一个世界” \n        雷尔夫感觉有点乱，牙狼系列之中是有着平行世界设定的，流牙线和钢牙线就是不同的世界，但是穿越时空这一点好像没有人能够做到，唯一沾上点边的，就是牙狼第四部魔界之花的boss爱丽丝。 \n        总之，一切都浮出水面。 \n        在另一个世界之中，因为一场大灾难，魔戒骑士和魔戒法师遭遇了重创，无尽的时空裂缝由此传播到了各个世界，霍拉也接助这个机会开始入侵别的世界， \n        而当时的元老院，集结了最顶尖的技术，将已经战死的牙狼的魔导轮扎鲁巴赋予了穿梭时空的力量，想要让它去寻找继承人以便于解决时空裂缝的问题，但是时空的力量对于当时的元老院也是十分陌生的，谁也不知道会出现什么事情，扎鲁巴在穿越世界的时候就来到了正在午睡的雷尔夫身边，在接触的一瞬间，时空力量直接暴走，让二人彻底穿越。 \n        在这期间，雷尔夫的在时空之间消失殆尽，穿越到了炎之刻印的世界里二世为人。 \n        而在炎之刻印的世界里，扎鲁巴因为时空力量的暴动陷入了沉睡，直到现在才恢复过来，一恢复过来，就发现雷尔夫陷入了危险，于是它下意识的再次发动穿越，千钧一发之际救下了雷尔夫。 \n        这就是雷尔夫两次穿越的全部经历，可以称得上是最惨的穿越者之一。 \n        ps：扎鲁巴： \n        历代牙狼左手中指上戴着的会说话的骷髅形状的戒指。 \n        经常给予牙狼一些提示和帮助，同时能探知到魔兽的存在，本身还可以喷射魔道火，拥有指环形状的分身，可以感知分身的位置，值得一提的是，历代牙狼打架之前都喜欢拿扎鲁巴磨一下剑。`})  
              }  
            },  
        onLoad(event) {  
            BookId=event.bookid;  
            console.log('df'+BookId)  
            var readCor = plus.storage.getItem("readcolor");  
                if(readCor==null){  
                    return;  
                }  
                 readCor = JSON.parse(readCor);  
                 this.FontSize = readCor.ftnum;  
                 this.pagebg = readCor.bgcolor;   
                 this.FtColor = readCor.txtcor;   
                 var xcid = readCor.cid;  
                 Object.keys(this.Bgcolors).map((key)=>{   
                     if(xcid==key){  
                         this.Bgcolors[key].bgact='bg_act';  
                     }else{  
                         this.Bgcolors[key].bgact='';  
                     }   
               });  
            var that=this;  
            uni.getSystemInfo({  
                success: function (res) {  
                    that.xscroll = res.windowHeight-40;   
                }  
            });  
            this.getSystemInfo();  
        },   
        onShow() {  
            var Futimer= setTimeout(function(){  
                    plus.navigator.setFullscreen(true);  
                    clearTimeout(Futimer);  
                },200)  
        },  
          methods: {    
                goBack (e){  
                    plus.navigator.setFullscreen(false)  
                    uni.navigateBack({  

                    });  
                    // console.log('返回');  
                },  
                showMenu (){  
                    if(this.headFoot || this.ismoset){  
                        this.headFoot=false;  
                    }else{  
                        this.headFoot=true;  
                    }  
                     this.ismoset=false;  
                },  
                toTop(params,e){  
                    //nvue下阻止事件冒泡的方法  
                    e.stopPropagation()  
                    this.scrollElement(params);  
                },  
                loadmore(){  
                      this.$refs["tlist"].resetLoadmore();  
                    console.log('我草')   
                },  
                Gunroll(e){  
                    console.log(JSON.stringify(e.contentOffset)+'我cc草'+JSON.stringify(e.contentSize) )   

                },   
                InChange: function(e) {  
                    this.old.x = e.detail.x  
                    this.old.y = e.detail.y;  
                    console.log('移动'+e.detail.x)  
                },  
                ColorCheck (id){  
                         Object.keys(this.Bgcolors).map((key)=>{   
                             if(id==key){  
                                 this.Bgcolors[key].bgact='bg_act';  
                                 this.pagebg = this.Bgcolors[key].color;    
                                 this.FtColor =  this.Bgcolors[key].ftcor;    
                 var SetData ={ftnum:this.FontSize,bgcolor:this.Bgcolors[key].color,cid:key,txtcor:this.Bgcolors[key].ftcor};      
                     plus.storage.setItem("readcolor", JSON.stringify(SetData));  
                             }else{  
                                  this.Bgcolors[key].bgact='';  
                             }  
                        });   
                  },  
                 addFont(id){  
                     this.headFoot=false;  
                      if(id==0){  
                          if(this.FontSize==16){  
                              this.FontSize=16;  
                              // return false;  
                          }else{  
                             this.FontSize--;                               
                          }  
                      }else{  
                          if(this.FontSize==40){  
                              console.log('是'+this.FontSize)  
                              this.FontSize=40;  
                              // return false;  
                          }else{  
                                this.FontSize++;  
                          }  
                      };  
                       var readxcolor = JSON.parse(plus.storage.getItem("readcolor"));  
                       if(readxcolor==null || readxcolor==undefined){  
                           readxcolor={ftnum:20,bgcolor:"#b2ddb6",cid:0,txtcor:"#314d34"};  
                       }  
                            readxcolor.ftnum =this.FontSize;  
                            plus.storage.setItem("readcolor", JSON.stringify(readxcolor));  
                            console.log(JSON.stringify(readxcolor))  
                  },  
                //滚动到某一个元素  
                scrollElement(index){  
                    if (this.$refs['item'+index]) {  
                        //滑动到顶部  
                        const el = this.$refs['item'+index][0];  
                        dom && dom.scrollToElement(el, {})   

                    }  
                },  
                footBtn (id){  
                    switch (id){  
                        case 0:  
                            plus.navigator.setFullscreen(false)  
                            uni.navigateTo({  
                                url: '../../pages/read/readlog?bookid='+BookId  
                            });  
                            break;  
                        case 1:  
                            this.headFoot=false;  
                            this.ismoset=true;  
                            break;  
                        case 2:  
                            break;  
                        case 3:  
                            break;  
                        default:  
                            break;  
                    }  
                },  
                getSystemInfo() {  
                    var that =this;  
                    const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync()  

                    //获取一些必要的设备参数  
                    this.statusBarHeight = statusBarHeight  
                    this.windowWidth = windowWidth  
                    this.windowHeight = windowHeight  
                    this.pixelRatio = pixelRatio  
                    this.platform = platform  
                    // #ifdef APP-PLUS  
                        // 全屏  

                        // 取消ios左滑返回  
                        // let page = this.$mp.page.$getAppWebview()  
                        // page.setStyle({ popGesture: 'none' })  

                        if (this.platform === 'ios') {  
                            // 获取ios电量  
                            let UIDevice = plus.ios.import("UIDevice")  
                            let dev = UIDevice.currentDevice()  
                            if (!dev.isBatteryMonitoringEnabled()) {    
                                dev.setBatteryMonitoringEnabled(true)   
                            }  
                            setInterval(() => {  
                                that.batteryState = dev.batteryState()  
                                that.batteryLevel = dev.batteryLevel() * 100  
                            }, 1000)  

                        }  
                        else {  
                            // 获取安卓电量  
                            let main = plus.android.runtimeMainActivity();  
                            let Intent = plus.android.importClass('android.content.Intent');    
                            let recevier = plus.android.implements('io.dcloud.feature.internal.reflect.BroadcastReceiver', {    
                                onReceive: (context, intent) => {    
                                    let action = intent.getAction();    
                                    if (action == Intent.ACTION_BATTERY_CHANGED) {    
                                        that.batteryState = intent.getIntExtra("status", 0); //电池状态    
                                        that.batteryLevel = intent.getIntExtra("level", 0); //电量  
                                    }    
                                }    
                             });    
                            let IntentFilter = plus.android.importClass('android.content.IntentFilter');    
                            let filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);    
                            main.registerReceiver(recevier, filter);   
                        }  

                    // #endif  

                    // 设置时间  
                    let date = new Date();  
                    this.systemTime = Date.parse(date);  
                    this.systemTimeStr = dateToStr(this.systemTime);  
                    setInterval(() => {  
                        this.systemTime += 60000;  
                        this.systemTimeStr = dateToStr(this.systemTime);  
                    }, 60000)  

                }  
            }  
    }  
</script>  

<style>   
.fixedx{  
    position: fixed;  
    left: 0;  
    width: 750upx;  
    background-color: #333;  
    padding: 30upx;   
    align-items: center;  
    align-content: center;  
}  
.dianliang{  
    bottom: 0;  
    padding: 0 30upx 20upx;  
    background-color:transparent;  
}  
.dqtxt,.dltxt{   
    height: 30px;  
    line-height: 30px;    
    background-color:transparent;  
    font-size: 26upx;  
}  
.header{  
    top: 0;  
    padding: 80upx 10px 20upx 0;  
}  
.footer{  
    background-color: #333;  
    bottom: 0;  
    padding-bottom: 50upx;  
}  
.moreset{  
    bottom: 0;  
    padding-bottom: 50upx;  
}  
.content{   
    padding-top: 90upx;  
    width: 750upx;    
}  
.col3{  
    width:245upx;    
}  
.icons{  
    font-size: 44upx;  
    text-align: center;  
    padding: 5px 10px;   
    color: #ccc;  
}   
.htit{  
    text-align: center;  
    lines: 1;  
    text-overflow: ellipsis;  
    font-size: 30upx;  
    color: #ccc;  
}  
.btntxt{  
    text-align: center;  
    font-size: 28upx;  
    color: #888;  
}  
.zjtit{    
    line-height: 80upx;  
    font-size: 44upx;  
    padding: 0 15px;  
    margin: 35px 0;  
    font-weight: bold;  
}  
.cont_txt{   
    padding:0 15px;  
    line-height: 80upx;  
    font-size: 40upx;  
    text-align: left;  
    text-align: justify;  
}   
.fontrow{  
    padding: 20px 0;  
}  
.slider,.stbg{  
    width: 430upx;  
    height: 1upx;  
}  
.stbg{  
    top: 35upx;  
    height:1upx;  
    background-color: #0062CC;  
    position: relative;   
}  
.movdiv{  
    background-color: #f60;  
    height: 30upx;  
    width: 30upx;  
    border-radius: 30upx;  
    position: absolute;  
    top: -15upx;   
}  
.stan{   
    width: 100upx;  
    margin: 0 15upx ;  
    border-color: #666;  
    border-width: 1px;  
    border-style: solid;  
    text-align: center;  
    height: 70upx;  
    line-height:50upx;  
    border-radius: 5px;  
}  
.stfont{  
    width: 200upx;  
    text-align: center;  
    font-size: 36upx;  
    color: #888;  
    padding: 10px 0;  
    border-color: #666;  
    border-width: 1px;  
    border-style: solid;  
    margin: 0 15upx;  
    border-radius: 5px;  
}  
.colors{  
    width: 80upx;  
    height: 80upx;  
    border-color: #333;  
    border-width: 2px;  
    border-style: solid;  
    border-radius: 80upx;  
    margin: 0 17.5upx;  
}  
.bg_act{   
        border-style: solid;  
        border-color: #FD6585;  
        border-width: 2px;  
    }  
</style>