微信小程序(5)——如何制作好看的表格

news2024/11/19 15:12:57

✅ 因为 “表格” 在日常统计中无处不在，所以今天来做一做。但是微信小程序不支持 table 标签，我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。

文章目录

  • 一、从“html的table”到 “微信小程序的table”
  • 二、统一格式的表格
  • 三、非统一格式的表格
  • 四、对表格的点击操作
  • 五、对表格的“增、删、改”操作
  • 六、参考附录

微信小程序开发 🌲

上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

下一篇文章链接: 🚧 🚧 …

一、从“html的table”到 “微信小程序的table”

● HTML 表格：表格由 <table></table> 标签来定义。

● HTML 表格中的行：每个表格均有若干行，由 <tr></tr> 标签定义。（tr 是 table row 的缩写）

● HTML 表格中的行中的单元格：每行被分割为若干单元格，由 <td></td> 标签定义。（td 是 table data 的缩写）

● HTML 表格中的表头：即表格第一行的若干单元格(一般表格的第一行是一些 “项目名”)， 由 <th></th>标签进行定义。（th 是 table head 的缩写）

◆ 补充说明：“<td></td>” 中所装的东西，即是数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。


● html 的 table 样例：

<table border="1" style="width:200px; text-align: center;">
    <tr>
        <th>姓名</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>特朗普</td>
        <td>川普</td>
    </tr>
    <tr>
        <td>小w</td>
        <td>看足球</td>
    </tr>
</table>

● 在浏览器中显示结果如下：

在这里插入图片描述

● 如果将上述在代码放在微信小程序中显示结果如下：

在这里插入图片描述

● 这说明微信小程序不支持 table 组件。虽然不支持，但是我后面还是会沿用 “table、tr、th、td” 这些已经耳熟能详的标签名，只不过这些名词变成了 “样式名”。


二、统一格式的表格

● “统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式一模一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式一模一样。

● 我去官网找了部分 “2021年的博客之星” 来作为本次制作的表格的内容，其 “统一格式的表格框架” 如下：


● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<view class="table">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th">排名</view>
        <view class="th">用户昵称</view>
        <view class="th">技术领域</view>
        <view class="th">博主简介</view>
    
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td">1</view>
        <view class="td">英雄哪里出来</view>
        <view class="td">人工智能与算法</view>
        <view class="td">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td">2</view>
        <view class="td">哪吒</view>
        <view class="td">后端开发</view>
        <view class="td">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td">3</view>
        <view class="td">_陈哈哈</view>
        <view class="td">全栈开发</view>
        <view class="td">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
    </view>
</view>

● WXSS 代码：


.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    display: flex;
    flex-direction: row;
}

.th, .td {  /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    width: 25%;					/* 4个25%相加刚好100% */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th {
    font-weight: 800;           /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td {
    background-color:#edf3e9;   /* 背景色 */
}

● 运行结果：
在这里插入图片描述
● “统一格式” 就体现在：“表头”都一样大，除“表头”外的单元格也是一样大。虽然这样编写代码很方便，但是这样会让屏幕感觉 “局部拥挤”，我们可能更希望，内容少的那一列的单元格有自己独立的样式。这样可能看上去 “松弛有度” 一点。


三、非统一格式的表格

● “非统一格式” 的意思是：表格里面的 “表头” 中的每一个『单元格』的大小和样式可能不一样，并且表格中除 “表头” 外的其他所有行的每一个『单元格』的大小和样式可能不一样。但是，表格中每一列的 “宽度” 一样。

● 为了实现 “松弛有度”，我们还需要用到『滚动视图组件(scroll-view)』，用它来实现：左右拖动表格的功能。

● 这是它的官方文档：『滚动视图组件(scroll-view)』，我们只需要在标签中把 scroll-x 属性设置为 true 即可。


● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
    
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td_1">1</view>
        <view class="td_2">英雄哪里出来</view>
        <view class="td_3">人工智能与算法</view>
        <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td_1">2</view>
        <view class="td_2">哪吒</view>
        <view class="td_3">后端开发</view>
        <view class="td_4">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td_1">3</view>
        <view class="td_2">_陈哈哈</view>
        <view class="td_3">全栈开发</view>
        <view class="td_4">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
    </view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4 {
    font-weight: 800;           /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4 {
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

● 运行结果：

在这里插入图片描述


四、对表格的点击操作

● 以上制作的表格都是 “静态的”，我们只能对它们进行 “读”，但有时候我们希望对它们进行 “写”。比如说：我们想点一点关注，那该怎么去做呢？

● 这时我们就要用在《微信小程序③——wxml+wxss+js基础入门[样例+解析]》中写到的 bindtap 了，我们这时就要引入 .js 文件。


● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
        <view class="th_5">是否关注</view>
    </view>
    <!-- 表格第二行 -->
    <view class="tr">
        <view class="td_1">1</view>
        <view class="td_2">英雄哪里出来</view>
        <view class="td_3">人工智能与算法</view>
        <view class="td_4">ACM / ICPC 区域赛金牌、世界总决赛选手。...。算法是爱好，会用余生致力于将算法写得清晰、讲得明白。</view>
        <view bindtap="ChooseTap_1" class="td_5">
            <view wx:if="{{condtion_1}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>

    <!-- 表格第三行 -->
    <view class="tr">
        <view class="td_1">2</view>
        <view class="td_2">哪吒</view>
        <view class="td_3">后端开发</view>
        <view class="td_4">CSDN新星计划导师，博客专家，哪吒社区维护者，公众号【哪吒编程】维护者，专注Java干货分享。</view>
        <view bindtap="ChooseTap_2" class="td_5">
            <view wx:if="{{condtion_2}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>
    
    <!-- 表格第四行 -->
    <view class="tr">
        <view class="td_1">3</view>
        <view class="td_2">_陈哈哈</view>
        <view class="td_3">全栈开发</view>
        <view class="td_4">陈士杰，幽默爱笑的程序员，北漂五年。文章坚持“以用为本”，...。人生有味是清欢，我有故事，你有酒么？</view>
        <view bindtap="ChooseTap_3" class="td_5">
            <view wx:if="{{condtion_3}}">
                <image src="./Images/01_勾(选中).png" class="imgSet" ></image>
            </view>
        </view>
    </view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 180%;    /* 15% + 25% + 25% + 85% + 30% = 180%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4, .th_5, .td_5 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4, .th_5 {
    font-weight: 800;             /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4, .td_5 {
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

.th_5, .td_5 {
    width: 30%;
}

.imgSet {       /* 图片的样式 */
    width: 40px;
    height: 40px;
}

● JavaScript 代码：

Page({

    data: {
        condtion_1: false,
        condtion_2: false,
        condtion_3: false
    },

    ChooseTap_1(e) {		/* 关注第一行的作者 */
        var tmp = this.data['condtion_1'];
        if (tmp == false)
        {
            this.setData({
                condtion_1: true
            })
        } else {
            this.setData({
                condtion_1: false
            })
        }
    },
   
    ChooseTap_2(e) {	/* 关注第二行的作者 */
        var tmp = this.data['condtion_2'];
        if (tmp == false)
        {
            this.setData({
                condtion_2: true
            })
        } else {
            this.setData({
                condtion_2: false
            })
        }
    },

    ChooseTap_3(e) {	/* 关注第三行的作者 */
        var tmp = this.data['condtion_3'];
        if (tmp == false)
        {
            this.setData({
                condtion_3: true
            })
        } else {
            this.setData({
                condtion_3: false
            })
        }
    }
})

● 运行结果：
在这里插入图片描述


五、对表格的“增、删、改”操作

● 如果我们要进行 “输入” 操作，那就要用到『输入组件(input)』，它的官方文档：『输入组件(input)』


● WXML 代码：

<view style="margin-top:50px; font-size: large; font-weight: 1000; text-align:center;">2021年度“博客之星”</view>

<scroll-view class="table" scroll-x="true">
    <!-- 表头(即第一行) -->
    <view class="tr">
        <view class="th_1">排名</view>
        <view class="th_2">用户昵称</view>
        <view class="th_3">技术领域</view>
        <view class="th_4">博主简介</view>
    </view>
    
    <!-- 表格第四行 -->
    <view wx:for="{{lists}}" wx:key="{{index}}">
        <view class="tr">
            <input class="td_1"></input>
            <input class="td_2"></input>
            <input class="td_3"></input>
            <input class="td_4"></input>
        </view>
    </view>

    <view class="button_box">
		<button class='button_style' bindtap='add'>添加一行</button>
		<button class='button_style' bindtap='del'>删除一行</button>
	</view>
</scroll-view>

● WXSS 代码：

.table {
    display: flex;
    flex-direction: column;     /* 排列形式: 向下 */
    margin-top: 50px;
    margin-bottom: 50px;
}
  
.tr {
    width: 150%;    /* 15% + 25% + 25% + 85% = 150%*/
    display: flex;
    flex-direction: row;
}

.th_1, .th_2, .th_3, .th_4, .td_1, .td_2, .td_3, .td_4 { /* 公有的属性 */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;            /* 自动换行 */
    text-align: center;         /* 文本居中 */
    justify-content:center;     /* 主轴居中 */
    align-items: center;        /* 交叉轴居中 */
    border-top: 1px solid #dadada;      /* 单元格上线框 */
    border-bottom: 1px solid #dadada;   /* 单元格下线框 */
    border-left: 1px solid #dadada;     /* 单元格左线框 */
    border-right: 1px solid #dadada;    /* 单元格右线框 */
}

.th_1, .th_2, .th_3, .th_4 {
    font-weight: 800;             /* 字体加重 */
    background-color:#B3CCF4;   /* 背景色 */
}

.td_1, .td_2, .td_3, .td_4 {
    height: 50px;
    background-color:#edf3e9;   /* 背景色 */
}

.th_1, .td_1 {
    width: 15%;
}

.th_2, .td_2 {
    width: 25%;
}

.th_3, .td_3 {
    width: 25%;
}

.th_4, .td_4 {
    width: 85%;
}

.button_box {
    margin-top: 30px;
    display: flex;
}

.button_style {
    width: 50%;
    color: cornflowerblue;
    background-color: rgb(233, 207, 186);
}

● JavaScript 代码：

Page({

    data: {
        lists: [{},{},{}]    // 三个空行
    },

    add: function(){
        var lists = this.data.lists;
        var newData = {};
        lists.push(newData); // 实质是添加 lists[] 数组内容，使 for 循环多一次
        this.setData({
            lists: lists,
        })  
    },

    del: function () {
        var lists = this.data.lists;
        lists.pop();       // 实质是删除 lists[] 数组内容，使 for 循环少一次
        this.setData({
            lists: lists,
        })
    }
})

● 运行结果：
在这里插入图片描述

◆ 结果说明：
  ① 这个 “能增删改的表格” 巧妙地利用了『输入组件(input)』的功能，它所做的事情都只是在 “前端”，每次重新编译，所有的数据都将清零。
  ② 其实还有一种方法，让 “输入框” 和 “表格” 分离开来，这样的话，可能就可以使『单元格』里的内容能进行 “合理地换行和居中”，避免出现这种 “拖动单元格才能看到所有内容” 的情况。但这需要对 JavaScript 的语法、函数很熟悉，等到了后面，更了一篇关于它的 Blog 后再做吧。


六、参考附录

[1] 《揭榜｜2021年度“博客之星&新星”十佳博主出炉》，CSDN官方博客

[2] 《微信小程序一秒学会制作table表格》，博主：开心大表哥

[3] 《微信小程序点击添加/删除表单》，博主：暖一杯茶

[4] 《微信小程序上实现 <table> 表格》，博主：亮子介

[5] 《微信小程序table表格自定义组件实现》，博主：半度℃温热

[6] 《微信小程序制作表格代码》，博主：huangmeimao

[7] 《微信小程序的表格table》，博主：程序猿_小天

[8]《微信小程序开发指南》，官方文档

上一篇文章链接: 微信小程序学习笔记④——Flex布局[实战样例之画骰子]

下一篇文章链接: 🚧 🚧 …

⭐️ ⭐️

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/409169.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【vuex】unknown action type:home/categoryList报错

【vuex】unknown action type:home/categoryList报错

记录一下今天遇到的bug。在做项目时&#xff0c;想进行vuex模块化开发。 在src/store下暂且建了两个小仓库home和search src/store/index.js import {createStore} from vuex; // 引入小仓库 import home from /store/home/index import search from /store/search/index// 对…
阅读更多...
vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

vue3.0运行npm run dev 报错Cannot find module ‘node:url‘

目录 一、问题描述&#xff1a; 二、原因 三、解决方案 一、问题描述&#xff1a; 学习vue3.0&#xff08; Vue.js - 渐进式 JavaScript 框架 | Vue.js&#xff09;的时候一直使用的家里电脑&#xff0c;项目搭建运行一直没问题&#xff0c;公司近期用vue3.0写项目 npm init…
阅读更多...
(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design

仿钉钉流程设计器前后端源码 2022年10月17日,重磅开源! 话不多说上码云项目链接,各位觉得有帮助可以点一个star 本项目是基于这个Flowable6.7.2实现的, 后面会开一个Activiti567的分支 本项目在码云地址: Flowable-Activiti仿钉钉流程设计器前后台源码--工作流中台项目-基于…
阅读更多...
第一次尝试制作一个钓鱼网站，小白教程，超细！

第一次尝试制作一个钓鱼网站，小白教程，超细！

**声明&#xff1a;小白一枚&#xff0c;写下来为了记录和学习交流&#xff0c;大神不喜勿喷。 **大体思路&#xff1a;仿页面&#xff0c;社工诱导用户填写信息&#xff0c;提交传入后端&#xff0c;后端获取信息并存储&#xff0c;传回“服务器繁忙”或虚假信息并重定向到真…
阅读更多...
js 各种时间格式的转换

js 各种时间格式的转换

js 各种时间格式的转换 时间格式示例中国标准时间Fri Mar 18 2022 14:24:45 GMT0800(中国标准时间)部分可读字符串Fri Mar 18 2022格林威治时间Fri,18 Mar 2022 06:24:45 GMT现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMTIOS标准时间&#xff08;JSON时间格式&#xff09;…
阅读更多...
Echarts常用配置项

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…
阅读更多...
JS高级中的constructor构造函数

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…
阅读更多...
Vue｜计算属性

Vue｜计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…
阅读更多...
vue2.x的h函数(createElement)与vue3中的h函数

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍&#xff1a;&#xff08;参考官网提取&#xff09;h函数第一个是标签名字 或者是组件名字&#xff0c;第二个参数是配置项&#xff0c;第三个参数是 innerText &#xff0c;不会帮你转换节点&#xff0c;如果需要转换成节点…
阅读更多...
background-size 之 背景图的尺寸设置

background-size 之 背景图的尺寸设置

目录 一&#xff1a;background-size参数取值 1.0 1.1 二&#xff1a;实例分析 2.1 参数分析 2.2 代码实例分析 引&#xff1a;background-size: 没有设置任何尺寸时使用图片本身的大小&#xff0c;宽度和高度都是auto默认值 可以用px设置成具体的值&#xff0c;也可以使…
阅读更多...
二、pytest+selenium+allure实现web ui自动化

二、pytest+selenium+allure实现web ui自动化

上一章&#xff1a; 一、web ui自动化环境搭建 pytestallureselenium_傲娇的喵酱的博客-CSDN博客_pytestseleniumallure pytest二次开发相关文章&#xff1a; pytest框架二次开发之自定义注解_傲娇的喵酱的博客-CSDN博客 pytest框架二次开发之机器人报警_傲娇的喵酱的博客-…
阅读更多...
前端面试：浅拷贝和深拷贝的区别？

前端面试：浅拷贝和深拷贝的区别？

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 那么大家晚上好&#xff0c;我是今天晚上的主讲老师&#xff0c;我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别&#xff0c;正好群里…
阅读更多...
百度低代码框架amis介绍及实例讲解

百度低代码框架amis介绍及实例讲解

目录引言为什么用amis&#xff1f;官网这么说的amis不适合做什么&#xff1f;amis框架集成配置与组件概念实例&#xff1a;通过一个CRUD组件实现增删改查列表列表查询查看详情自定义操作按钮提交表单引言 目前低代码概念已经无人不知&#xff0c;随着新冠病毒的爆发&#xff0…
阅读更多...
修改elementUI样式未生效问题（挂载到了body标签上）

修改elementUI样式未生效问题（挂载到了body标签上）

修改挂载到body标签上elementUI样式问题 目录修改挂载到body标签上elementUI样式问题前言一、适用范围二、示例1.目标2.实现思路修改自带样式方法最后看效果总结前言 在使用element-ui库的时候&#xff0c;有时会需要修改它自带的css样式&#xff0c;组件模块化化编程时一般会…
阅读更多...
【Vue3中的响应式原理】

【Vue3中的响应式原理】

Vue3响应式原理 在Vue2的响应式中&#xff0c;存在着新增属性&#xff0c;删除属性以及直接通过下标修改数组&#xff0c;但页面不会自动更新的问题。但是在Vue3中&#xff0c;这些问题都得以解决。 Vue2中的响应式原理 首先我们先看一下Vue2中的响应式原理&#xff0c;其次…
阅读更多...
vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

vantUI van-picker中的column使用，picker选择器展示对象数组里面的属性，自定义展示数据

项目场景&#xff1a; 需要VantUI实现的功能 问题描述 vant中的picker选择器&#xff0c;只能用这种数组&#xff0c;来展示数据 columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’], 往往我们的请求数据&#xff0c;都是这样的。对…
阅读更多...
::before和::after是什么?

::before和::after是什么?

本文从最简单的开始&#xff0c;解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1&#xff09;::before和::after下特有的c…
阅读更多...
图文详解vue.js devtools插件使用方法

图文详解vue.js devtools插件使用方法

Vue.js devtools 背景简介 我们chrome插件网之前介绍过Vue.js devtools&#xff0c;是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展&#xff0c;可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具&#xff0c;可以边侧边栏窗格…
阅读更多...
【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释，详细注释，谁都看得懂】

【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释，详细注释，谁都看得懂】

先声明&#xff1a; 我不是做后端的&#xff0c;我是前端的&#xff0c;然后想要做一个后端的接口平常用来测试测试前端的页面&#xff0c;所以百度加上看看视频学了几天&#xff0c;简单的做一个&#xff0c;可能很多不专业的地方&#xff0c;后端小哥们别太严格哈&#xff0…
阅读更多...
【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行

【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行

壹 ❀ 引 我在[react] 什么是虚拟dom&#xff1f;虚拟dom比操作原生dom要快吗&#xff1f;虚拟dom是如何转变成真实dom并渲染到页面的?一文中&#xff0c;介绍了虚拟dom的概念&#xff0c;以及react中虚拟dom的使用场景。那么按照之前的约定&#xff0c;本文来聊聊react中另一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023