index.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <template>
  2. <view class="content">
  3. <view class="status_bar">
  4. <!-- 这里是状态栏 -->
  5. </view>
  6. <web-view :src="url" :fullscreen='false'></web-view>
  7. </view>
  8. </template>
  9. <script>
  10. var wv
  11. export default {
  12. data() {
  13. return {
  14. title: 'ehsd',
  15. url: 'http://106.54.243.161:10010/#/',
  16. src: "",
  17. canBack: false,
  18. }
  19. },
  20. onBackPress() {
  21. if (wv && this.canBack) {
  22. wv.back();
  23. return true;
  24. }
  25. return false;
  26. },
  27. onReady() {
  28. // #ifdef APP-PLUS
  29. var self = this;
  30. var currentWebview = this.$scope.$getAppWebview();
  31. //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
  32. setTimeout(function() {
  33. wv = currentWebview.children()[0];
  34. wv.addEventListener(
  35. "progressChanged",
  36. function(e) {
  37. wv.canBack(function(e) {
  38. self.canBack = e.canBack;
  39. });
  40. },
  41. false
  42. );
  43. }, 500); //如果是页面初始化调用时,需要延时一下
  44. // #endif
  45. },
  46. onLoad() {
  47. var height = 0; //定义动态的高度变量,如高度为定值,可以直接写
  48. uni.getSystemInfo({
  49. //成功获取的回调函数,返回值为系统信息
  50. success: (sysinfo) => {
  51. console.log(sysinfo)
  52. height = sysinfo.windowHeight; //自行修改,自己需要的高度 此处如底部有其他内容,可以直接---(-50)这种
  53. },
  54. complete: () => {}
  55. });
  56. let info = uni.getSystemInfoSync();
  57. let top = info.statusBarHeight;
  58. console.log(info, 12312312312);
  59. var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
  60. setTimeout(function() {
  61. var wv = currentWebview.children()[0];
  62. wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度,单位为px
  63. top: top, //此处是距离顶部的高度,应该是你页面的头部
  64. // bottom:0,//防止输入框被软键盘遮挡
  65. height: height - top, //webview的高度
  66. scalable: false, //webview的页面是否可以缩放,双指放大缩小
  67. })
  68. // wx.setTitleNViewButtonStyle({
  69. // index:0,
  70. // styles:{
  71. // type:'back'
  72. // }
  73. // })
  74. }, 1000);
  75. methods: {
  76. }
  77. }
  78. }
  79. </script>
  80. <style>
  81. .content {}
  82. .status_bar {
  83. height: var(--status-bar-height);
  84. width: 100%;
  85. }
  86. </style>sss