赞
踩
// videoZindex1-coverView.vue页面 <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 100%;position: relative;"> <cover-view class="cover-box"> <cover-view>覆盖的内容</cover-view> </cover-view> </video> // 样式 <style lang="less" scoped> .cover-box { position: fixed; bottom: 0; width: 100%; height: 120rpx; background-color: yellow; } </style>
只能子绝父相覆盖视频,fixed固定定位仍然不能覆盖视频,不符合我的需求
// videoZindex2-plus.vue页面 <script> export default { data() { return { optionView: null } }, onLoad() { // 这里我的高度统一是120rpx,但是plus不能用rpx,所以需要算一下 let rpxUnit = 1 uni.getSystemInfo({ success: (info) => { rpxUnit = info.screenWidth / 750 } }); this.optionView = new plus.nativeObj.View("option-view", { position: "dock", dock: "bottom", width: "100%", height: `${rpxUnit*120}px`, bottom: 0, backgroundColor: "#fff", }, [{ id: "rect-id", tag: "rect", color: "#f98d2b", position: { top: `${rpxUnit*20}px`, bottom: `${rpxUnit*20}px`, left: `${rpxUnit*225}px`, right: `${rpxUnit*225}px`, }, rectStyles: { radius: `${rpxUnit*40}px` } }, { id: 'font-id', tag: 'font', text: '操作', position: { top: `${rpxUnit*20}px`, bottom: `${rpxUnit*20}px`, left: `${rpxUnit*225}px`, right: `${rpxUnit*225}px`, }, textStyles: { align: "center", color: "#fff", size: '18px' } }]); this.optionView.show() }, onUnload(){ this.optionView.close() }, methods: { } } </script>
这里我需要一直显示,在页面加载的时候就显示,实际上这个子窗体可以在任何时机显示和隐藏。
onLoad() {
const subNvue = uni.getSubNVueById("bottom-fixed-operation-box")
subNvue.show("none", 0, () => {})
},
// operation.nvue子窗体页面 <template> <view class="operation-box"> <button class="btn-self" @click="operationFun"> <text class="font-box">操作</text> </button> </view> </template> <script> export default { onLoad() { uni.$on("back",(e)=>{ console.log("监听页面事件",e); }) }, methods: { operationFun(){ console.log("点击"); uni.$emit('bottom-fixed-operation-box',"参数") } } } </script> <style scoped> .operation-box { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 749rpx; height: 119rpx; background-color: #fff; } .btn-self { width: 300rpx; height: 80rpx; background-color: #f98d2b; border-radius: 50px; margin: 0; } .font-box { color: #fff; font-size: 28rpx; line-height: 80rpx; } </style>
// videoZindex3-subNvue.vue 使用子窗体的页面 <template> <view style="padding: 0 50rpx;"> <view v-for="item in 10" :key="item" style="height: 100rpx;background-color: pink;"> 其它内容 </view> <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" style="width: 100%;"></video> <view v-for="item in 5" :key="item" style="height: 100rpx;background-color: pink;"> 其它内容 </view> </view> <!-- <view class="seat"> </view> <view class="button-box"> <button class="btn-self">操作</button> </view> --> </template> <script> export default { data() { return { } }, onLoad() { const subNvue = uni.getSubNVueById("bottom-fixed-operation-box") subNvue.show("none", 0, () => {}) uni.$on("bottom-fixed-operation-box", (e) => { console.log("参数",e); this.operationFun() }) }, mounted() { uni.$emit("back","发送给子窗体的参数") }, methods: { operationFun() { console.log("页面获取到了子窗体的点击事件,继续其它操作。"); } } } </script> <style lang="less" scoped> .seat { height: 120rpx; } .button-box { display: flex; justify-content: space-around; position: fixed; bottom: 0; width: 100%; color: #666; font-size: 28rpx; background-color: #fff; background-color: yellow; padding: 20rpx 40rpx; box-shadow: 1px 2px 30px rgba(0, 0, 0, 0.2); box-sizing: border-box; z-index: 10; .btn-self { width: 40%; height: 80rpx; color: #fff; font-size: 28rpx; line-height: 80rpx; background-color: #f98d2b; border-radius: 50px; margin: 0; } } </style>
可以在页面的vue文件发送事件,子窗口nvue文件监听;
也可以在子窗口nvue文件发送事件,页面vue文件监听
发送:
uni.$emit('bottom-fixed-operation-box',"参数")
接收:
uni.$on("bottom-fixed-operation-box", (e) => {
console.log("参数",e);
// 响应后的其它操作
})
uni.$on("your-event")
和uni.$off("your-event")
需要搭配使用,否则再次进入页面时,触发事件时会多次执行$on
里的操作。// 举例:
uni.$on("bottom-fixed-operation-box", (e) => {
uni.navigateTo({
url: '/pages/...'
})
})
// 结果:多次进入页面时候触发此事件会进行多次页面跳转
onLoad()
里的uni.$on
似乎比其它代码都优先执行,uni.$off
也不生效,重复进入页面仍会多次接收uni.$emit
的触发事件,无法实现动态交互。赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。