微信小程序3-1

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量499 收藏
点赞数
分类专栏： 微信小程序 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45707027/article/details/113769984
版权

微信小程序3

尺寸单位rpx

1 小程序中 不需要主动来引入样式文件
2 需要把页面中某些元素的单位 由px 改成rpx
  1 设计稿750x
    750 px= 750 rpx
    1 px = 1 rpx
  2 把屏幕宽度 改成375px
    375 px = 375 rpx
    1 px = 2 rpx
    1 rpx = 0.5 px
  3 存在一个设计稿 宽度414 或者 未知 page
    1 设计稿 page 存在一个元素 宽度 100px
    2 拿以上需求 去实现 不同宽度的页面适配

    page px = 750rpx
    1 px = 750 rpx / page
    100 px = 75rpx*100/page

    假设 page= 375px
    以下代码写法错误
    width: 750 rpx * 100 / 375;

  4 利用 一个属性 calc属性 css 和 wxss 都支持 一个计算属性
    1 750和rpx之间不要留空格
    2 运算符的两边也不要留空格

demon05.wxss文件

view{
  /* width: 200rpx; */
  height: 200rpx;
  font-size: 40rpx;
  background-color: aqua;
  width: calc(750rpx*100/375);
}

样式导入

在这里插入图片描述

view{
  color:aqua;
  font-size: 100px;
}

在这里插入图片描述

<!--pages/demon06/demon06.wxml-->
<view>pages/demon06/demon06.wxml</view>

在这里插入图片描述

/* 
1 引入的代码是通过 @import 来引入的
2 路径 只能写相对路径
*/

@import "../../styles/common.wxss";

在这里插入图片描述

选择器

特别需要注意的是 小程序 不支持通配符 * 因此以下代码无效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

目前支持的选择器有：
在这里插入图片描述

使用less

原生小程序不支持 less ，其他基于小程序的框架大体都支持，如 wepy ， mpvue ， taro 等。
但是仅仅因为⼀个less功能，而去引入一个框架，肯定是不可取的。因此可以用以下方式来实现。

  1. 编辑器是 vscode
  2. 安装插件 easy less
    在这里插入图片描述
  3. 在vs code的设置中加入如下，配置
   "less.compile": {
        "outExt":       ".wxss"
   }
  1. 在要编写样式的地方官，新建 less文件，如 index.less ,然后正常编辑即可。

常见组件

https://developers.weixin.qq.com/miniprogram/dev/component/

1.view

代替 原来的 div 标签

  <view hover-class="h-class">
 点击我试试
  </view>

在这里插入图片描述

2.text

  1. 文本标签
  2. 只能嵌套text
  3. 长按文字可以复制（只有该标签有这个功能）
  4. 可以对空格 回车 进行编码
    在这里插入图片描述
  <text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

<!-- 
  1 长按文字复制 selectable
  2 对文本内容 进行 解码
  3 tip: decode可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;
 -->
<text selectable decode>
  text &nbsp; 123 &lt;
</text>

在这里插入图片描述

3.image

  1. 图片标签，image组件默认宽度320px、高度240px
  2. 支持懒加载
    在这里插入图片描述
    mode 有效值：
    mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
    在这里插入图片描述
    在这里插入图片描述
<!-- 
  image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
    5 bottom。。 类似以前的backgroud-position 
  3 小程序当中的图片 直接就支持 懒加载  lazy-load
    1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 
 -->

 <image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

在这里插入图片描述

image{
  box-sizing: border-box;
  border: 1px solid red;

  width: 300px;
  height: 200px;
}

在这里插入图片描述

4.swiper微信内置轮播图组件

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px    image 存在默认宽度和高度 320 * 240 
    3 swiper 高度 无法实现由内容撑开 
  4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  1125 * 352 px
    swiper 宽度 / swiper  高度 =  原图的宽度  /  原图的高度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 100vw * 352 /  1125
  5 autoplay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器 
  9 indicator-color 指示器的未选择的颜色 
  10 indicator-active-color 选中的时候的指示器的颜色 
 -->

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
    <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
</swiper>

在这里插入图片描述

swiper {
  width: 100%;
  /* height: calc(100vw * 352 /  1125); */
  height: 31.28vw;
}
image {
  width: 100%;
}

5.navigator

导航组件 类似超链接标签
在这里插入图片描述
open-type 有效值：
在这里插入图片描述

<!-- 
  导航组件 navigator
  0 块级元素 默认会换行  可以直接加宽度和高度 
  1 url 要跳转的页面路径  绝对路径 相对路径
  2 target 要跳转到当前的小程序 还是其他的小程序的页面
    self 默认值 自己 小程序的页面 
    miniProgram 其他的小程序的页面
  3 open-type 跳转的方式
    1 navigate 默认值 	保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
    2 redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
    3 switchTab	跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    4 reLaunch	关闭所有页面，打开到应用内的某个页面
 -->

 <navigator url="/pages/demo10/demo10"> 轮播图页面 </navigator>
 <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
 <navigator open-type="redirect" url="/pages/demo10/demo10">  轮播图页面 redirect </navigator>
 <navigator open-type="switchTab" url="/pages/index/index">  switchTab直接跳转到 tabbar页面 </navigator>
 <navigator open-type="reLaunch" url="/pages/index/index">  reLaunch 可以随便跳 </navigator>

6.rich-text

富文本标签
可以将字符串解析成 对应标签，类似 vue中 v–html 功能
在这里插入图片描述

在这里插入图片描述

<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
 <rich-text nodes="{{html}}"></rich-text>

在这里插入图片描述

// pages/demo12/demo12.js
Page({
  data: {
    // 1 标签字符串 最常用的
    // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'
    // 2 对象数组
    html:[
      {
        // 1 div标签 name属性来指定
        name:"div",
        // 2 标签上有哪些属性
        attrs:{
          // 标签上的属性 class  style
          class:"my_div",
          style:"color:red;"
        },
        // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 
        children:[
          {
            name:"p",
            attrs:{},
            // 放文本
            children:[
              {
                type:"text",
                text:"hello"
              }
            ]
          }
        ]
      }
    ]
  }
})
余秀华。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 scroll-view
weixin_59727199的博客
09-15 7774
微信小程序 scroll-view
微信小程序入门3-1
hc121ch的博客
02-27 245
API 1.wx.chooseImage(Object object)–从本地相册选择图片或使用相机拍照 tempFilePaths 是临时路径，是一个数组 2.在wx.request({})方法的回调函数中，对象已经发生改变--------需要把var that = this，使用 that 来保存当前的this状态，更新视图数据。 3.凡是类型为function的，都为回调函数 ...
小程序不支持部分选择器
whose_moon的博客
08-23 597
Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors. 组件 wxss 中不允许使用某些选择器，包括标签名称选择器、ID 选择器和属性选择器。
android开发时，finish()跟System.exit(0)的区别
影儿的专栏
08-12 1717
finish是Activity的类，仅仅针对Activity，当调用finish()时，只是将活动推向后台，并没有立即释放内存，活动的资源并没有被清理；当调用System.exit(0)时，杀死了整个进程，这时候活动所占的资源也会被释放
微信小程序基础
hongxue8888的博客
02-26 741
文章目录1. ⼩程序配置⽂件1.1.全局配置app.json 1.1.1.tabbar1.2.⻚⾯配置page.json 1.3.sitemap配置-了解即可2.模板语法 2.1.数据绑定 2.2.运算2.3.列表渲染2.4.条件渲染3. 事件绑定 1. ⼩程序配置⽂件 ⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和⻚⾯⾃⼰的 ...
微信小程序开发 - 用户授权登陆
热门推荐
weixin_38807994的博客
05-21 15万+
本篇将帮助读者实现基于 微信开发者工具 &amp; C#环境 下的用户在小程序上的授权登陆。 准备： 微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/d...
微信小程序-----刷新页面3种方式
淘淘桃的博客
07-21 1万+
3.点击左上角的返回按钮时，返回事件不会触发 onload() ,但是会触发 onshow()，所以可以在 onshow() 中写入刷新或者是调取页面数据的代码。因为小程序都是异步操作，所以很多时候，可能会造成服务器相应慢的问题，导致页面显示的时候会有延迟、造成闪烁的情况。微信小程序要实现页面刷新，简单的说就是在不同的地方重新执行 onLoad 周期函数。2.用 pages 获取到当前页码数，然后执行当前页的 onLoad 函数。1.用 onLoad 周期方法重新加载，实现当前页面的刷新。
微信小程序 open-data 的使用
weixin_42289080的博客
08-27 1万+
微信小程序官方 open-data 点击跳转 open-data 用于展示微信开放的数据 <open-data type="userAvatarUrl"></open-data> <open-data type="userNickName" lang="zh_CN"></open-data> <open-data type="userCity" lang="zh_TW"></open-data> <open-data typ
微信小程序scroll-view去掉滚动条
qq_45021462的博客
06-14 9560
微信小程序scroll-view去掉滚动条的解决方案
微信小程序web-view的使用教程
青衫折扇的博客
11-19 3万+
最近公司有需求，需要点击小程序首页banner，跳转到别人的h5页面。 首先是域名的问题： 步骤：先登录小程序开发平台，将页面需要跳转的域名写上去，注意了，域名不是指服务器的域名，而是服务器下面的业务域名 ！！！ 配好了域名之后就可以开始调用web-view了。 1.如果你不需要通过点击小程序里面的按钮或者某个view，那么你可以直接在小程序里面直接调用下面的代码即可 <web-view src="https://hi.xxx.com/Tickets/html/getScanCode..
微信小程序源码-仿饿了么.zip
03-24
微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序源码-仿饿了么.zip微信小程序...
【微信小程序源码-毕业设计期末大作业】赞赏.zip
05-13
微信小程序源码-毕业设计期末大作业课程设计源码 微信小程序源码-毕业设计期末大作业课程设计源码 微信小程序源码-毕业设计期末大作业课程设计源码 微信小程序源码-毕业设计期末大作业课程设计源码 微信小程序源码-...
微信小程序 van-uploadedr 上传图片并压缩组件
03-15
微信小程序 图片压缩、组件、压缩文件大小数量、可配置、压缩质量可配置 <compress-uploader file-list="{{ fileList }}" max-count="6" bind:after-read="afterRead" bind:delete="deleteClick" quality="0.8" /> ...
微信小程序源码-仿美团外卖.zip
03-24
微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖.zip微信小程序源码-仿美团外卖....
微信小程序源码-数独小游戏.zip
03-24
微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏.zip微信小程序源码-数独小游戏....
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3238
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 995
iframe 预览邮件 + 打印邮件 + 模拟滚动条
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 651
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
【HTML — 构建网络】HTML 入门
07-24 1143
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
vue3中类似微信小程序picker-view的插件
02-07
Vue3中类似微信小程序picker-view的插件有很多种，常见的包括vue-picker、vue-picker-wheel和vue-wheel-picker等。这些插件都可以实现类似微信小程序picker-view的功能，给用户提供一个可以滚动选择的界面，方便用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值