uni-app web-view组件可以自定义样式和位置

在uni-app中，web-view组件用于嵌入外部网页内容。虽然web-view本身不支持直接通过样式属性进行自定义（如设置边框、背景色等），但你可以通过布局和容器元素来实现自定义样式和位置。下面是一个示例，展示如何使用CSS和uni-app的布局系统来自定义web-view的位置和样式。

示例代码

1. 在页面的 .vue 文件中

<template>
  <view class="container">
    <view class="header">
      <text>自定义Header</text>
    </view>
    <view class="web-view-wrapper">
      <web-view src="https://www.example.com"></web-view>
    </view>
    <view class="footer">
      <text>自定义Footer</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 使容器占满整个视口高度 */
}

.header, .footer {
  background-color: #f8f8f8;
  padding: 10px;
  text-align: center;
  flex: 0 1 auto; /* 固定高度，自动扩展/收缩 */
}

.web-view-wrapper {
  flex: 1; /* 填充剩余空间 */
  background-color: #fff; /* 可选：为web-view背景设置颜色 */
  padding: 10px; /* 可选：为web-view添加内边距 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：添加阴影效果 */
  overflow: hidden; /* 防止内容溢出 */
}

/* 注意：web-view组件本身不接受样式，这里的样式是应用于其外部容器的 */
web-view {
  width: 100%; /* 使web-view宽度占满容器 */
  height: 100%; /* 使web-view高度占满容器 */
}
</style>

说明

1. 布局：使用flex布局，使.container容器内的.header、.web-view-wrapper和.footer按列排列。
2. 自定义样式：通过.web-view-wrapper为web-view外部容器添加样式，如背景色、内边距和阴影效果。
3. web-view尺寸：web-view的宽度和高度设置为100%，使其填满.web-view-wrapper容器。

这种方法允许你通过容器元素间接地为web-view添加样式和自定义位置，同时保持web-view内容的独立性和完整性。注意，web-view加载的网页内容不受这些外部样式的影响。