uniapp开发app移动端显示html内容可放大缩小

最新推荐文章于 2024-06-03 09:49:31 发布

风言轻

最新推荐文章于 2024-06-03 09:49:31 发布

阅读量105

点赞数 3

文章标签： uni-app html 前端

本文链接：https://blog.csdn.net/qq_34434962/article/details/138344739

版权

<template>
  <view class="content-container">
    <movable-area scale-area style="height: 100vh; width: 100%">
      <movable-view
        direction="all"
        out-of-bounds
        :scale="true"
        scale-min="1"
        scale-max="10"
        scroll-value="10"
        style="height: 100%; width: 100%"
      >
        <view
          v-html="htmlContent"
          ref="htmlContent"
          style="
            width: 100%;
            height: 100%;
            transform: scale(0.41);
            transform-origin: 10% 0%;
          "
        ></view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      htmlContent: "<p>替换成你要显示的html内容</p>"
    };
  },
</script>