H5中的HTML引入VANT以及其他ui组件

大辉很菜

已于 2022-05-26 20:21:16 修改

阅读量252

点赞数

文章标签： html5 vue.js jquery ajax

于 2021-07-16 16:58:54 首次发布

本文链接：https://blog.csdn.net/m0_52173943/article/details/118808266

版权

这篇博客展示了如何在H5页面中引入Vant UI库，通过HTML、CSS和JavaScript实现响应式布局。内容包括设置meta标签以适应不同设备宽度，以及通过CDN加载Vue和Vant的JS文件，创建一个带有多个标签页的示例。同时，还展示了如何调整字体大小以适配不同屏幕尺寸，并提供了一个简单的Ajax请求示例，用于从服务器获取数据。

摘要由CSDN通过智能技术生成

H5中的HTML引入VANT以及其他ui组件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link   rel="stylesheet"  href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"   />
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
  </head>
  <style>
    .xaaccvv {
      width: 7.5rem;
      height: 1rem;
      background-color: red;
    }
  </style>
  <body>
    <div id="Vue">
      <div>
        <van-tabs v-model="active">
          <van-tab title="标签 1">
            <div class="xaaccvv"></div>
          </van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
          <van-tab title="标签 3">内容 3</van-tab>
          <van-tab title="标签 4">内容 4</van-tab>
        </van-tabs>
      </div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#Vue",
      data: {
        active: 0,
      },
      methods: {},
      created() {
        (function (win, doc) {
          if (!win.addEventListener) return;
          var html = document.documentElement;
          function setFont() {
            var cliWidth = html.clientWidth;
            if (cliWidth > 750) {
              cliWidth = 750;
            }
            html.style.fontSize = 100 * (cliWidth / 750) + "px";
          }
          win.addEventListener("resize", setFont, false);
          doc.addEventListener("DOMContentLoaded", setFont, false);
        })(window, document);
   
      },
    });
  </script>
</html>

<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script> 标签内只需要引入自己所需要的ui框架链接

如果需要ajax请求获取数据则在methods中创建

    $.ajax({
         type: "get", //请求方式
         async: false,
         url: "",
         data: {}, //传值给后台
         dataType: "json",
         success: function (res) {
         console.log(res);
           },
         });

大辉很菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5中的HTML引入VANT以及其他ui组件

H5中的HTML引入VANT以及其他ui组件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.
复制链接

扫一扫