uniapp 在app端使用nvue来解决视频层级过高
1.在pagejson中申明nvue{"path": "pages/detail/detail","style": {"navigationBarTitleText": "商品详情","app-plus": {"titleNView": false,"subNVues": [{"id": "goodsBottom",...
·
1.在pagejson中申明nvue
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "商品详情",
"app-plus": {
"titleNView": false,
"subNVues": [{
"id": "goodsBottom",
"path": "pages/detail/subnvue/goodsBottom",
"style": {
"type": "popup",
"position": "dock",
"dock": "bottom",
"width": "750upx",
"height": "100upx",
"zindex": 2
}
},
{
"id": "goodsSpec",
"path": "pages/detail/subnvue/goodsSpec",
"type": "popup",
"style": {
"width": "750upx",
"top": "20%",
"bottom": "0upx",
"zindex": 3
}
},{
"id": "coupon",
"path": "pages/detail/subnvue/coupon",
"type": "popup",
"style": {
"width": "750upx",
"top": "50%",
"bottom": "0upx",
"zindex": 3
}
},{
"id": "share",
"path": "paltform/app-plus/subNVue/shareDetail",//这个放在pages外部目录的nvue
"type": "popup",
"style": {
"width": "750upx",
"height":"250upx",
"bottom": "0upx",
"zindex": 3
}
}]
}
}
}
2.要是放在pages同级目录需要注意坑
3.vue和nvue之间的通讯
①在vue向nvue通讯
methods:{
collect(){
// #ifdef APP-PLUS
//触发监听 并传值
uni.$emit('goods_bottom_setval',{isCollected:this.isCollected})
// #endif
}
}
②在nvue
created() {
//监听vue中的事件
const vm = this;
uni.$on('goods_spec_setval', (data) => {
console.log('goods_spec_setval', data.product)
this.detail=data.detail
for (var key in data) {
vm[key] = data[key]
}
// vm.title = data.title;
// vm.content = data.content;
//console.log(vm.product.Products_JSON.imgPath)
})
},
beforeDestroy() {
uni.$off('goods_spec_setval')
},
methods: {
toHome() {
uni.switchTab({
url: '/pages/index/index'
})
},
addCart() {
// if (!this.$fun.checkIsLogin(1, 1)) {
// return;
// }
uni.$emit('cartHandle', {});
//向vue发送监听 cartHandle vue页面监听
},
directBuy() {
// if (!this.$fun.checkIsLogin(1, 1)) {
// return;
// }
uni.$emit('directHandle');
},
lingqu() {
if (this.canSubmit) {
this.$emit('goGet')
}
}
}
③在vue页面的监听和取消监听
onLoad: function (option) {
// #ifdef APP-PLUS
//条件编译只在app才会使用nvue 监听nvue传递的函数
const vm = this;
//控制nvue的显示和隐藏 show hide 通过pages.json的id
const subNVue2 = uni.getSubNVueById('goodsBottom')
subNVue2.show()
uni.$on('cartHandle', (data) => {
vm.addCart() //调用vue当前的方法
})
uni.$on('directHandle',(data)=>{
vm.directBuy()
})
uni.$on('kefu', (data) => {
vm.contact()
})
uni.$on('collectHandle',(data)=>{
console.log('触发收藏事件')
vm.collect()
})
uni.$on('getMyCoupon',(data)=>{
console.log('触发领取事件')
vm.getMyCoupon(data.item,data.i)
})
uni.$on('goNextPage',(data)=>{
console.log('触发优惠券下一页事件')
vm.goNextPage()
})
uni.$on('shareDetail',(data)=>{
if(data.detail!='detail') return
console.log('触发普通详情分享')
vm.shareFunc(data.item)
})
uni.$on('goodsSkuSub',(data)=>{
if(data.detail!='detail') return //因为多个使用同一nvue 所以根据传递的值 判断,不然后多个地方触发
console.log('触发这么多次事件????')
let {check_attr,check_attrid_arr,submit_flag,postData} = data
this.check_attr = check_attr
this.check_attrid_arr = check_attrid_arr
this.submit_flag = submit_flag
this.postData = postData
vm.skuSub()
//隐藏规格框
const goodsSpecNvue = uni.getSubNVueById('goodsSpec')
goodsSpecNvue.hide()
})
uni.$on('goGet',(data)=>{
console.log('触发立即领取')
vm.lingqu()
})
// #endif
},
mounted(){
},
onUnload(){
// #ifdef APP-PLUS
//条件编译 关闭监听 如果不写关闭 在安卓会卡死重启
uni.$off('cartHandle')
uni.$off('directHandle')
uni.$off('collectHandle')
uni.$off('getMyCoupon')
uni.$off('goNextPage')
uni.$off('shareDetail')
uni.$off('kefu')
uni.$off('goodsSkuSub')
uni.$off('goGet')
// #endif
},
更多推荐
已为社区贡献7条内容
所有评论(0)