01 2021 档案

【css效果】实现简单的下拉菜单
摘要：效果图： 下拉菜单距离顶部有一定的距离，为了避免鼠标滑到二级菜单的过程中，二级菜单意外收起。可以在二级菜单的外部在包裹一层div，然后二级菜单距离外部包裹的div有一定的距离即可。 .right { display: flex; align-items: center; i { margin: 0 阅读全文
posted @ 2021-01-23 11:37 cdgogo 阅读(359) 评论(0) 推荐(0)
【jQuery】文字滚动效果
摘要：列表文字无缝滚动 （说明：姓名和地点都是随机生成） <!-- 领取动态 --> <div class="dynamic"> <div class="activity" id="J_Activity"> <ul> <!-- <li >来自湖南苏**女士成功 领取多功能早餐一台~</li> <li>来自 阅读全文
posted @ 2021-01-20 10:52 cdgogo 阅读(343) 评论(0) 推荐(0)
如何根据设计图尺寸快速开发
摘要：两种常用的解决方案 1、通过动态设置 viewport的 width 和 initial-scale 2、通过动态设置跟元素Html的font-size 即 rem解决方案 方法一 meta viewport meta标签大家都很熟悉了，首先来看一下meta viewport 的6个属性： 属性名 阅读全文
posted @ 2021-01-20 10:26 cdgogo 阅读(381) 评论(0) 推荐(0)
CSS绘制各种各样的形状图形
摘要：我们在编写前端代码时，经常会遇到各种各样的形状图形（如：边框对话框，三角形，平行四边形、圆角边框、圆形、四叶草、花瓣等），除了用背景图片（css雪碧图或css精灵图+定位引用）和插入img图片的方法，我们还可以用css边框、圆角（border-radius）、渐变和定位的方法结合使用，绘制各种各样的 阅读全文
posted @ 2021-01-16 11:01 cdgogo 阅读(6445) 评论(1) 推荐(5)
【微信小程序】自定义导航栏
摘要：大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。 思路 隐藏官方导航栏 获取胶囊按钮、状态栏相关数据以供后续计算 根据不同机型计算导航栏高度 编写新的导航栏 页面引用自定义导航 一、隐藏官方导航栏 隐藏导航 阅读全文
posted @ 2021-01-14 17:57 cdgogo 阅读(1649) 评论(0) 推荐(0)
【css知识】clip:rect()矩形裁剪功能
摘要：clip 属性剪裁绝对定位元素。 也就是说，只有 position:absolute 的时候才是生效的。 左右宽度相减的值是宽度，上下相减的值是高度。 top right bottom left分别指最终剪裁可见区域的上边，右边，下边与左边。而所有的数值都表示位置，且是相对于原始元素的左上角而言的。 阅读全文
posted @ 2021-01-13 14:07 cdgogo 阅读(549) 评论(0) 推荐(0)
【vuex】的用法（语法糖）
摘要：...mapactions 和 ...mapgetters都是vuex提供的语法糖，在底层已经封装好了，拿来就能用，简化了很多操作。 其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn'，{参数})，mapActions中只 阅读全文
posted @ 2021-01-12 15:42 cdgogo 阅读(1310) 评论(0) 推荐(0)
【es6】拼接数组
摘要：扩展运算符 [...] 加了...和不加...是不一样的，...会把原来数组拆开 阅读全文
posted @ 2021-01-12 15:00 cdgogo 阅读(834) 评论(0) 推荐(1)
【vue】通信、传值的多种方式
摘要：一、通过路由带参数进行传值 1、两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等） this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B 2、在B 阅读全文
posted @ 2021-01-12 14:31 cdgogo 阅读(179) 评论(0) 推荐(0)
【vue】中class、style的用法
摘要：三元表达式 style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p> class三元表达式 <i class="iconfont" :class="[isShow=='pass 阅读全文
posted @ 2021-01-12 14:04 cdgogo 阅读(376) 评论(0) 推荐(0)
【vue】导航栏封装
摘要：Header.vue组件 <template> <div> <div class="menu"> <div class="container"> <nav class="navbar" role="navigation"> <div class="navbar-header"> <button ty 阅读全文
posted @ 2021-01-12 13:55 cdgogo 阅读(473) 评论(0) 推荐(0)
【uni-app】引入阿里巴巴图标库
摘要：一、在官网选择合适的字体图标加入到项目中，然后在页面中打卡在线链接，全选复制代码 二、新建一个字体图标库样式文件(iconfont.css）,然后粘贴刚刚复制的代码 三、使用字体图标 1、首先要在app.vue文件中引入刚刚新建的字体图标库样式 2、使用图标 阅读全文
posted @ 2021-01-09 18:07 cdgogo 阅读(205) 评论(0) 推荐(0)
【vue】父子组件传值
摘要：父传子 父组件 子组件 子组件props多种类型总结 子传父 子组件 父组件 子组件向父组件传递多个参数 子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值 子组件 父组件 阅读全文
posted @ 2021-01-09 17:57 cdgogo 阅读(125) 评论(0) 推荐(0)
【vue】ref和$refs的介绍和使用
摘要：在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子 阅读全文
posted @ 2021-01-09 17:45 cdgogo 阅读(171) 评论(0) 推荐(0)
CSS3选择器 :nth-child()的用法
摘要：:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 一、选择列表中的偶数标签:nth-child(2n) 二、选择列表中的奇数标签 :nth-child(2n-1) 三、选择从第6个开始的，直到最后:nth-child(n+6) 四、选择第 阅读全文
posted @ 2021-01-09 17:15 cdgogo 阅读(1507) 评论(0) 推荐(0)
【flex弹性布局】最后一行列表左对齐
摘要：效果图： html: <div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></ 阅读全文
posted @ 2021-01-09 16:55 cdgogo 阅读(793) 评论(0) 推荐(0)
【uni-app】预览图片（单/多张）
摘要：官网：https://uniapp.dcloud.io/api/media/image?id=previewimage uniapp 实现图片预览 单图预览和多图预览 关键点就是调用 uni.previewImage({ current: index, urls: photoList }); 如果是 阅读全文
posted @ 2021-01-09 16:47 cdgogo 阅读(3002) 评论(0) 推荐(0)
【uni-app】全局数据globalData的设置、获取、修改
摘要：因为uniapp基本上都是将页面，或者页面中相同的部分，进行组件化，所以会存在父，子，（子，父）之间的传值的情况，但在某些情况下，可以选择将内容设置为一个全局的变量，并根据需求来进行内容的更新。大大减少了代码的使用，和传值可能遇到的各种复制的计算等等的情况 下面来看看如何设置将一个变量设置为全局数据 阅读全文
posted @ 2021-01-09 16:13 cdgogo 阅读(3651) 评论(0) 推荐(1)