详细问题描述
随便新建一个项目，一个Nvue页面，在页面里随便插入一个组件以后，该页面data里的值再也不能发生改变，怎么赋值都没有变化！HBuilderX2.1.3之前都正常
重现步骤
[步骤]新建一个项目，一个Nvue页面，这是nvue页面的主要代码，样式代码就不贴了
<template>
<div class="content">
<marquee-x :data="marqueeList" styleindex="0" styleindex2="0"></marquee-x>
<text class="title">{{num}}</text>
<div class="button" @click="click">点击</div>
</div> </template>
<script>
import marqueeX from '@/components/marquee/marqueeX.nvue'
export default {
components: {
marqueeX
},
data() {
return {
marqueeList:['hello'],
num:'你好'
}
},
onLoad() {
},
methods: {
click(){
console.log('点击')
this.num = "改变"
}
}
} </script>
[结果]
很简单一个页面，用自定义组件，weex模式编译以后 无论这么点击按钮 该data里的num值不能发生任何的改变，已经在点击函数里面赋值新值了，还是不能改变！
[期望]
希望恢复正常 赋值
IDE运行环境说明
[IDE版本号]
HBuilderX2.3.3
[windows版本号]
win10
[mac版本号]
uni-app运行环境说明
[运行端是h5或app或某个小程序？]
app
[运行端版本号]
2.3.3
[项目是cli创建的还是HBuilderX创建的？如果是cli创建的，请更新到最新版cli再试]
HBuilderX创建的
[编译模式是老模板模式还是新的自定义组件模式？]
新的自定义模式
App运行环境说明
[Android版本号]
Android9
[iOS版本号]
[手机型号]
华为9i LLD-AL20
[模拟器型号]
附件
[IDE问题请提供HBuilderX运行日志。菜单帮助-查看运行日志，点右键打开文件所在目录，将log文件压缩成zip包上传]
[App问题请提供可重现问题的代码片段，你补充的细一点，问题就解决的快一点]
[App安装包或H5地址]
[可重现代码片段]
下面这是组件的代码 老版本都正常
<template>
<div>
<!-- 这里单行滚动模式下 数据跟多行滚动模式下 传过来的数据都是用的data 但是区别是单行滚动模式下数据只取的是data数组的第一个数据 这个要注意-->
<div class="marquee_box" v-if="styleindex == 0">
<div class="marquee_con" ref="marqueeCon" v-if="styleindex2 == 0">
<div class="marquee_list">
<!-- <text class="marquee_text">{{data[0].sex == '男' ? '善男' : '善女'}}{{data[0].name}}放生</text>
<text class="marquee_text3">{{data[0].gongde}},</text> -->
<text class="marquee_text">{{data[0]}}</text>
</div>
</div>
<div class="marquee_con" ref="marqueeCon" v-else="styleindex2 != 0">
<div class="marquee_list">
<text class="marquee_text">{{data[0].name}}在</text>
<text class="marquee_text3">{{data[0].gongde}}</text>
<text class="marquee_text">还愿成功,感恩供养,福源广善,去礼拜!</text>
</div>
</div>
</div>
<div v-else-if="styleindex == 1">
<div class="marquee_box">
<div class="marquee_con1" ref="marqueeCon1">
<div class="marquee_list" v-for="(item, index) in data">
<text class="marquee_text">{{item.name}}</text>
</div>
</div>
</div>
</div>
<!-- 多行跑马灯 -->
<div v-else-if="styleindex == 2">
<div class="marquee_box1">
<div class="marquee_con2" ref="marqueeCon1">
<div class="marquee_list1" v-for="(item, index) in data">
<text class="marquee_text1">{{item.sex == '男' ? '善男' : '善女'}}{{item.name}}放生</text>
<text class="marquee_text2">{{item.gongde}},</text>
<text class="marquee_text1">愿{{item.sex == '男' ? '师兄' : '师姐'}}吉祥,同登彼岸,阿弥陀佛!</text>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//styleindex 0代表单行横向滚动 1代表单行竖向滚动 2代表多行竖向滚动 styleindex2 0代表单行横向滚动里的放生场景使用模式 否则是祈福主页滚动的使用模式
const animation = weex.requireModule('animation')
//const modal = weex.requireModule('modal')
export default {
props: {
styleindex: {
type: Number
},
styleindex2: {
type: Number
},
data: {
type: Array
}
},
data() {
return {
marqueeNum: 0,
marqueeLens: 0
}
},
computed: {
},
mounted() {
this.data.push(this.data[0]);
this.marqueeLens = this.data.length;
if (this.styleindex == 0) {
this.showMarquee();
setInterval(this.showMarquee, 16500);
} else if (this.styleindex == 1) {
setInterval(this.showMarquee1, 2000);
} else if (this.styleindex == 2) {
setInterval(this.showMarquee2, 2000);
}
},
methods: {
showMarquee: function() {
let marqueeeEl = this.$refs.marqueeCon;
animation.transition(marqueeeEl, {
styles: {
transform: 'translateX(' + (-1650) + 'upx) translateZ(0)'
},
duration: 16000, //ms
timingFunction: 'linear',
delay: 0 //ms
}, () => {
animation.transition(marqueeeEl, {
styles: {
transform: 'translateX(' + 0 + 'upx) translateZ(0)'
}
});
})
},
showMarquee1: function() {
let marqueeeEl = this.$refs.marqueeCon1;
this.marqueeNum++;
animation.transition(marqueeeEl, {
styles: {
transform: 'translateY(' + (-this.marqueeNum * 66) + 'upx) translateZ(0)'
},
duration: 500, //ms
timingFunction: 'ease',
delay: 0 //ms
}, () => {
if (this.marqueeNum >= this.marqueeLens - 1) {
this.marqueeNum = 0;
animation.transition(marqueeeEl, {
styles: {
transform: 'translateY(' + 0 + 'upx) translateZ(0)'
}
});
}
})
},
showMarquee2: function() {
let marqueeeEl = this.$refs.marqueeCon1;
this.marqueeNum++;
animation.transition(marqueeeEl, {
styles: {
transform: 'translateY(' + (-this.marqueeNum * 132) + 'upx) translateZ(0)'
},
duration: 500, //ms
timingFunction: 'ease',
delay: 0 //ms
}, () => {
if (this.marqueeNum >= this.marqueeLens - 1) {
this.marqueeNum = 0;
animation.transition(marqueeeEl, {
styles: {
transform: 'translateY(' + 0 + 'upx) translateZ(0)'
}
});
}
})
}
}
} </script>
联系方式
整个项目我都上传到了附件 包括测试项目和视频
[QQ]
1878559086
