cdgogo-CSDN博客

原创【微信小程序】知识点总结

路由wx.switchTab(Object object)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.reLaunch(Object object)关闭所有页面，打开到应用内的某个页面wx.redirectTo(Object object)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigat

2021-11-12 22:45:40 328

原创【微信小程序】3D效果轮播图

效果图：<view class='swiper-container'> <swiper class='swiper-block' autoplay='true' circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' bindchange='swiperChange' interval='5000' duration='1000'> <block wx:key='unique

2021-11-12 21:20:43 1728

原创【微信小程序】自定义导航栏

大部分情况下我们都是使用微信官方自带的 navigationBar 配置，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算导航栏高度编写新的导航栏页面引用自定义导航一、隐藏官方导航栏隐藏导航栏可以全局配置，也可以单独页面配置，具体根据业务需求来。{ "path" : "pages/public/login", "style": { "navigationB.

2021-11-12 19:29:32 1050

原创【微信小程序】组件封装

效果图：说明：该小程序中多个页面用到房屋装修设计表单和底部tabbar导航栏，为了修改方便，把他们封装层组件然后调用即可。组件结构如下：组件写好后，我们需要注册组件，可以在app.json中全局注册，也可以直接在需要用到的页面中年注册。引用组件：在自定义组件中会发现无法获取到外部公用的样式，即全局样式（比如：字体图标样式），解决办法：只要在对应组件的js文件中设置addGlobalClass属性为true即可Component({ options: { addGlob

2021-11-12 15:33:07 630

原创【微信小程序】表单提交验证及获取表单输入的值

效果图：说明：请选择房屋所在城市的效果是省市区选择器，刚开始我们可能直接在picker选择器中直接包含一个input输入框实现，但是这样的话点击选择的话可能聚焦在输入框中，我们想要的效果是点击的时候直接拉起省市区选择器。解决办法：考虑到未选择前有文字提示，我们可以用判断city变量的方法条件显示提示和选择的内容，同时为了在表单提交中可以获取到内容，可以把选择的内容同时绑定到input输入框并且把input框隐藏。<form catchsubmit="submitFn"> &l

2021-11-12 13:50:26 1891

原创【微信小程序】scroll-view实现swiper-item间距轮播效果

说明：看到效果图时，我们可能首先想到swiper组件实现，但是在实际开发中发现swiper-item的间距是无法实现的。这时我们可以用scroll-view去模拟实现。<view class="functions"> <view class="title"> 更懂国人生活方式的家装解决方案 <text class="desc">满足您的不同装修需求</text> </view> .

2021-11-11 23:31:27 875

原创【微信小程序】基础轮播图

效果图：<view class="banner"> <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-color="rgba(0, 0, 0, .3)"

2021-11-11 23:05:16 861

原创 vue基础知识

v-if 和 v-show的区别在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-

2021-11-02 21:17:17 2232 2

原创 CSS3的滤镜filter属性

css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。一、blur(px)高斯模糊给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；不过，blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中，会给图像添加一个box，超出范围隐藏二、brightness(%)亮度这里写brightness(2) 跟写 brightness(200%) 效果是一样的。三、contrast(%)对比度.

2021-11-01 23:30:52 195

原创弹性布局（display:flex；）属性详解

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：在不同方向排列元素重新排列元素的显示顺序更改元素的对齐方式动态地将元素装入容器一、基.

2021-11-01 15:21:27 111

原创 $nextTick的作用和使用场景

应用场景：需要在视图更新之后，基于新的视图进行操作。this.$nextTick()方法主要是用在数据改变，dom改变应用场景中。vue中数据和dom渲染由于是异步的，所以，要让dom结构随数据改变这样的操作都应该放进this.$nextTick()的回调函数中。created()中使用的方法时，dom还没有渲染，如果此时在该钩子函数中进行dom赋值数据（或者其它dom操作）时无异于徒劳，所以，此时this.$nextTick()就会被大量使用，而与created()对应的是mounted()的钩子.

2021-10-31 23:13:52 437

原创【vue】$parent和$children的使用

父组件访问子组件：使用$children或$refs reference子组件访问父组件：使用$parent$parent<body> <div id="app"> <mxc></mxc> </div> <template id="mxc"> <div>我是子组件啊</div> <button @click="btnClick">更加颤抖的child</b.

2021-10-31 22:03:38 5628 1

原创【vue】ref和$refs的介绍和使用

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref介绍ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例通俗的讲，ref特性就是为元素或子组件.

2021-10-31 20:49:03 245

原创 Vue-router 中hash模式和history模式的区别

咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。咱们来看看小白的回答。小白回答：hash模式url带#号，history模式不带#号。回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。大牛解答：.

2021-10-31 19:50:45 568

原创 vue组件的父子传值

父传子props父组件：子组件子组件props多种类型总结子传父（发送事件,this.$emit）子组件通过$emit触发父组件中的自定义函数，第一个值为自定义函数名，后面的参数是向父组件传的值子组件：父组件：子组件向父组件传递多个参数子组件：父组件：...

2021-10-31 17:55:09 77

原创 vue的生命周期

概念借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。可以理解vue生命周期就是指vue实例从创建到销毁的过程，在vue中分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。一、创建（实例）1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）使用场景：因为此时dat

2021-10-31 17:22:58 746

原创 CSS总结：让元素居中的方法

一、text-align:center;这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:center;即可；二、margin:0 auto;前提：居中的元素必须是块级元素，如果是内联元素，需要添加属性display:block;而且元素不浮动。三、绝对定位+偏移(已知宽高，需计.

2021-10-30 20:59:16 1642

原创 keep-alive的运用

只有被keep-alive包围的组件才有 activated和 deactivated两个属性。效果图app.vuehome.vue参考vue中keepAlive组件的作用及使用方式

2021-10-30 15:28:46 72

原创 vue-router嵌套路由

效果图router/index.jsimport Vue from "vue";import VueRouter from "vue-router";// import Home from "../views/Home.vue";// import My from "../views/My.vue";// import News from "../views/news.vue";// import HomeNews from "../components/HomeNews.vue";//

2021-10-30 14:02:32 214

原创 vue封装TabBar组件

实现思路：步骤一：TabBar和TabBarItem的组件封装做到这，可以发现页面的基本布局已经实现了，但是item的点击活跃状态还没实现步骤二：给TabBarItem传入active图片为了防止替换的内容直接整个替换掉插槽，从而插槽上定义的样式等也被替换影响，最好在插槽外定义一个div包裹步骤三：TabBarItem和路由的结合效果步骤四：TabBarItem的颜色控制基本完成，但是发现路由中点击路径重复会报错报错原因：是因为 vue-router ≥3.0

2021-10-29 23:30:55 428

原创 vue修改网页的标题

注意：如果是嵌套路由，我们可能获取不到嵌套路由的标题。这时候我们只需要修改为// 全局前置守卫，设置页面标题router.beforeEach((to, from, next) => { // to and from are both route objects. must call `next`. // document.title = to.meta.title; document.title = to.matched[0].meta.title; console.log(..

2021-10-29 22:49:37 536

原创 css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。器。&lt.

2021-10-29 19:58:27 10404

原创综合运用：如何修改美化radio、checkbox的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[type=checkbox]:checked+label.

2021-10-29 18:42:11 1041

原创 radio单选框在项目中应用

效果图 See the Pen radio,checkbox美化应用实例 by cdgogo (@chendanaliyuntubiao) on CodePen. <div class="container goods-info"> <div class="row goods-tags"> <div class="col-md-2 tag-label">选择版本</div>

2021-10-29 18:14:47 78

原创 css 伪类和伪类元素的区别

伪类伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似，可以为已有的元素添加样式，但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素伪元素用于创建一些不在文档树中的元素，并为其添加样式。我们可以通

2021-10-29 17:25:59 94

原创 css选择器:nth-child()的用法

:nth-child():nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。偶数标签:nth-child(2n)奇数标签 :nth-child(2n-1)选择从第6个开始的，直到最后:nth-child(n+6)选择第1个到第6个 :nth-child(-n+6)两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9):nth-last-child() 选择器:nth-last-chil

2021-10-10 22:54:18 3582

原创 css3属性transform-origin属性讲解

transform是CSS3里的变换属性，常用的有translate（平移）、rotate（旋转）、skew(倾斜)、scale(缩放)方法。而transform-origin并不是transform的属性值，其具有独立的语法，但值得注意的是，transform-origin必须配合transform来使用，这个从名字也可以看得出来，就是给transform设置的各种动作设置一个参考点。默认情况下，元素的动作参考点为元素盒子的中心。transform可以设置九个位置的值，水平方向有left | cente.

2021-10-10 22:33:44 8510 2

Vue+Mui实现列表侧滑删除功能.zip

空空如也