- 博客(284)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 slot插槽详解及动态插槽的使用
在子组件中：用标签来确定渲染的位置，里面可以包含默认内容，如果没有提供插槽内容，则显示默认内容；具名插槽用name属性来表示插槽的名字，没有name属性为默认插槽；作用域插槽在作用域上绑定属性来将子组件的信息传给父组件使用;父组件中：默认插槽直接在子组件的标签内写入内容即可；具名插槽是在默认插槽的基础上加上slot属性，值为子组件插槽的name属性值；作用域插槽是通过slot-scope获取子组件的信息，在内容中使用。可以用解构语法去直接获取想要的属性；
2024-06-27 13:56:15
924
原创 vue中动态绑定样式名的方式有几种？
是一个计算属性，它会根据isActive的值动态返回类名，该对象的键是样式名，值是对应的条件。使用对象语法： 可以通过在data中定义一个变量，然后在模板中使用对象语法来动态绑定样式名。使用计算属性： 如果你需要更复杂的逻辑，并且需要在绑定样式名时进行计算，可以使用计算属性。在Vue中可以使用动态绑定样式名的方式有几种，具体取决于你的需求和使用的场景。使用数组语法： 除了对象语法，还可以使用数组语法来动态绑定多个样式名。这些方法都可以根据你的需求来选择最合适的方式来动态绑定样式名。
2024-06-26 17:34:34
513
原创 v-for中为什么要使用key
循环渲染时，Vue会尽量复用已有的元素，而不是重新创建。为了实现这个复用机制，Vue会根据每个元素的。指令用于循环遍历数组或对象，并为每个元素或属性生成相应的DOM元素或组件实例。，因为如果数组发生变化，索引可能会发生改变，导致渲染错误。的值必须是唯一且稳定的，通常使用元素的唯一标识作为。来跟踪它们的身份，从而能够高效地更新虚拟DOM。，如ID或唯一的属性值。
2024-06-26 16:30:30
699
原创 computed和watch的区别及watch详解
属性具有缓存机制，只有当依赖的数据发生变化时，才会触发重新计算，否则会直接返回缓存的结果。这样可以避免不必要的计算，提高性能。属性是基于依赖数据进行计算的属性。它是一个函数，返回计算后的值。当计算依赖的数据发生变化时，属性用于观察数据的变化并执行相应的操作。它可以监听某个数据的变化，并在变化时执行回调函数。是两个重要的属性，用于处理响应式数据的变化和计算。可以监视单个数据，也可以监视多个数据。用于观察数据的变化并执行相应的操作。会自动重新计算并更新相应的值。用于计算一个新的响应式属性，而。
2024-06-26 16:22:32
474
原创 VUE状态管理
如果你有一部分状态需要在多个组件实例间共享，你可以使用。抽取出组件间的共享状态，放在一个全局单例中来管理;来创建一个响应式对象，并将它导入到多个组件中。每当store对象被更改时，组件都会自动更新。方法一：用响应式API做简单状态管理。多个组件共享一个共同的状态时。
2024-05-31 16:02:14
288
原创 uniapp 微信小程序使用ec-canvas图表
在uniapp项目中找到js-sdk文件夹，把其中的uni-ec-canvas放到要用的包的components中。微信小程序中使用到了ec-canvas图表，从DCloud插件市场中下载echarts-for-wx；
2024-05-14 11:30:36
2171
3
原创 uniapp 微信小程序异步调用分包的自定义组件
在微信开发者工具的模拟器上测试，能调用成功，显示正常，但真机调试时，组件不显示，控制台报错Component is not found in path "subTaixin/measureHeart/moreFun" (using by "pages/index/index")；需求：在分包subTainxin中创建自定义组件moreFun.vue，需要在主包的pages/index/index页面调用该自定义组件。2.1 在pages/index/index.vue中。上传到体验版上，扫码测试时又正常。
2024-05-10 12:41:03
1149
原创 uniapp做微信小程序，自定义checkbox和radio的样式
用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；自定义checkbox。
2023-07-12 13:49:19
3114
原创 react之装饰器报错：This experimental syntax requires enabling one of the following parser plugin(s): “decor
在学习mobx时，遇到了“This experimental syntax requires enabling one of the following parser plugin(s): "decorators", "decorators-legacy". (5:0)“的错误，每次在@observer那里报错。在App.js中调用MobDemo： 在App.js中引入countStore，并将它赋值给store。2、在项目的根目录下创建config-overrides.js文件，并对应加入以下内容。
2022-11-16 17:52:40
6769
原创 React中memo()、useCallback()、useMemo() 区别使用详解
本文转载自，文中讲解useMemo时，代码示例不详细，在此做个笔记，并补充详细。memo()、useCallback()、useMemo() 区别使用详解
2022-11-11 17:39:00
919
原创 微信小程序之页面之间四种通讯方式
app.js中定义一个全局的空属性，到当前页面获取全局属性，并且赋需要传递的值给这个全局属性，再到跳转之后的页面获取这个全局属性，用其进行相应的操作，之后再赋值为空。从第一个页面过来时，onLoad里接收参数key=channelA，点击页面按钮，返回上级页面时，传参key=someEvent。类似于vue中的组件传值，可以应用于很多场景，用的最多的则是路由跳转传值和获取上一页面的数据。触发回调后，任意页面都可以使用，使用完之后赋值为空即可。一. 页面跳转传参：直接在url后拼接。三、使用全局变量传值。
2022-11-09 16:52:43
3098
原创 React Hook学习之useState, useContext
Hook 是16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
2022-11-03 14:51:13
262
原创 正则表达式语法及使用
[a-d]"表示一个字符串包含小写的'a'到'd'中的一个（相当于"a¦b¦c¦d"或者"[abcd]"）；（"a","ab","abbb",……"^The"表示所有以"The"开始的字符串（"There"，"Thecat"等）；'相当于"{0,}"，"{1,}"和"{0,1}"。"(a¦b)*c"表示一串"a""b"混合的字符串后面跟一个"c"；"[ab]"表示一个字符串有一个"a"或"b"（相当于"a¦b"）；"hi¦hello"表示一个字符串里有"hi"或者"hello"；...
2022-07-28 13:38:13
1880
原创 uni-app上自定义微信小程序的tabbar
今天用uni-app开发微信小程序时，修改tabbar的样式无效，如selectedColor, iconWidth等，明明官网上都有这些属性，但在模拟器上就是没有效果。自定义tabbar1、在微信官网，自定义tabbar的页面，下载自定义tabbar示例代码；将其中的custom-tab-bar目录整个拷贝到项目根目录下；2、修改custom-tab-bar/index.js的文件，路径都改为自己uni-app项目下的页面路径和图片路径3、pages.json文件tabbar配置：设置"custom
2022-07-26 16:30:28
3888
1
原创 微信小程序适配问题
iPhoneX兼容在小程序页面开发中，涉及到需要适配iPhoneX的地方主要有导航栏（NavigationBar），标签栏（TabBar）以及页面底部的吸底按钮。对于positionfixed的可交互组件，如果渲染在iPhoneX的安全区域外，容易误触HomeIndicator，应当把可交互的部分都渲染到安全区域内。建议使用以下wxss进行兼容适配方案1、meta标签中设置网页在可视窗口的布局方式2、fixed完全吸底元素场景的适配另外一种方法，获得。......
2022-07-16 11:18:07
5435
1
原创 微信小程序分享给朋友和分享到朋友圈
微信小程序分享给朋友比较简单，只需要在要分享的页面中设置onShareAppMessage即可。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮监听用户点击页面内转发按钮（button 组件 ）或右上角菜单“转发”按钮的行为，并自定义转发内容。 onShareAppMessage如果带了参数，参数中的from会指明是从哪里触发的，从按钮触发from='button'，从右上角菜单中触发from='menu'支持自定义标题，自定义路径和自定义图片 我们点击分享出去的卡片，打开小程序，可以在
2022-06-17 11:20:00
15120
原创 ES6扩展运算符用法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中用法：1、将一个数组放入另一个数组中2、拼接数组使用扩展运算符可以代替concat()来拼接数组。3、扩展运算符可以与解构赋值结合起来，生成数组4、Math5、将类数组或可遍历对象转换为真正的数组6、字符串转数组......
2022-06-13 11:13:27
1016
原创 微信小程序文字跑马灯效果的两种实现
跑马灯的两种实现，CSS实现跑马灯效果，js实现第二种，单独的组件marquee.wxmlmarquee.jsmarquee.wxssmarquee.json在页面中使用swiperWidth的值：
2022-06-11 13:50:27
2361
原创 vue 自定义指令
指令以"v-"作为前缀，Vue提供的指令有：v-model、v-if、v-else、v-else-if、v-show、v-for、v-bind、v-on、v-text、v-html、v-pre、v-cloak、v-once等。指令也可以自定义指令既可以用于普通标签
2022-06-09 11:25:38
236
原创 js数组操作
创建数组var arrayObj = new Array(); //创建一个数组var arrayObj = new Array([size]); //创建一个数组并指定长度，注意不是上限，是长度var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值数组元素的添加push// 将一个或多个新元素添加到数组结尾，并返回数组新长度arrayObj. push([item1 [item
2022-05-26 11:12:02
250
原创 margin重合(外边距重叠)及解决方法
CSS 外边距重叠(外边距塌陷)块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。一、哪些元素会发生外边距重叠问题外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题二、什么情况下会发生外边距重叠呢第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
2022-05-25 15:50:53
11350
原创 微信小程序之自定义下拉列表框（新）
下拉列表中的值选中后，关闭列表，再打开，值可记忆，并显示相应的选中样式.wxml<!--pages/component/custom-drop-down/index.wxml--><view class="drop-container"> <view class="drop-main" bindtap="clickShow"> <view class="dropdown-value">{{provinceValue}}<..
2022-05-10 17:05:14
4980
2
原创 微信小程序 时间选择
微信小程序做时间选择器用到两种方法方法一：使用Vant Weapp中的DatetimePicker原始样式和加了formatter后的样式：<view style="flex: 1;"> <view bindtap="alertDate">结束时间</view></view><van-datetime-picker wx:if="{{showDate}}" type="date" value="{{date}}" ca
2022-04-19 13:52:04
8810
1
原创 微信小程序之自定义Radio样式
wxml<radio-group bindchange="radioChange" class="radio-group-width"> <label class="radio-label" wx:if="{{rechargeValue.type=='关台'}}"> <view class="radio-text">余额</view> <radio value="1" ></radio> ...
2022-04-12 14:11:41
2579
原创 微信小程序--自定义下拉列表
custom-drop-down/index.wxml<!--pages/component/custom-drop-down/index.wxml--><view style="position: relative; display: flex; flex-direction: column;"> <view style="display:flex; align-items: center; border:black 1px solid" bindt...
2022-03-28 16:44:24
3098
原创 vant-weapp Area 省市区选择的使用及遇到的坑
.json中 导入"van-area": "@vant/weapp/area/index"基础用法：<van-area area-list="{{ areaList }}" />areaList 格式areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。npm i @vant/area-data安装之后
2022-03-25 14:48:54
10641
7
原创 使用vant-weapp Dialog时，报错“未找到 van-dialog 节点，请确认 selector 及 context 是否正确”
.json文件中导入"usingComponents": { "van-dialog": "@vant/weapp/dialog/index" }.wxml中使用<van-dialog id="myDialog"></van-dialog>.js中使用//官网中设置的路径会报错import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';openDialog:
2022-03-25 11:17:56
6392
1
原创 微信小程序 自定义tabBar
效果：第一种方法：（使用微信小程序官网的示例代码修改）1. 在代码根目录下添加入口文件:custom-tab-bar/index.jscustom-tab-bar/index.jsoncustom-tab-bar/index.wxmlcustom-tab-bar/index.wxss具体步骤：在代码根目录下新建文件夹custom-tab-bar，然后在文件夹上右击选择”新建Component"，取名index后回车，就会新建这4个文件。2. app.json中添加tabB
2022-03-22 15:48:45
2311
原创 VUE 自定义取色器组件
效果：功能：1。点击色块中任何一点，色块中的正方形显示该点的颜色。2。点击色块上方的颜色圆点，色块选中该颜色所在的位置，并在正方形中显示相应颜色。3。上方圆点如果不是rgb格式，需要转换。4。组件的大小从调用它的页面中传过去。组件代码(CanvasColor2.vue)：<template><!-- <div>--> <div id='outDiv' style="position: relative">&l
2022-01-04 15:39:24
2093
原创 uni-app 视频播放遇到的问题-video
最近开发一个项目，一个视频列表，点击其中一个视频，全屏播放（像大屏预览似的全屏），图上覆盖截图，全屏和回放图标。弹出的全屏窗口：videoTest.vue<template> <view style="height: 100%;"> <videoView></videoView> </view></template><script> import videoView from './video.
2021-12-07 11:14:31
12630
原创 uni-app 在遮罩层禁止下层的滚动和下拉刷新功能（动态设置下拉刷新）
最近在做一个uni-app的项目，其中有列表页中弹出查询弹窗的功能。列表中有下拉刷新和上拉加载的功能。遇到的问题有：1。在弹窗中上下滑动，底层页面也随着滑动2。在弹窗中下拉时，也会触发下拉刷新功能，上划时，也可能会触发上拉加载功能；3。在弹窗中的树形列表框加了滚动后，会报错：Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progres
2021-11-30 16:18:09
8392
5
原创 uni-app 解决video组件层级过高的问题
使用video组件时，弹出框总是在video下方。解决方法：使用subNvue子窗体：1。在使用video组件的页面同级建立一个子目录subNVue，创建一个DialogNet.nvue页面，<template> <view class="my-confirm-notice" id="netDialog"> <view class="confirm-content-wrap1"> <!-- 标题 --
2021-11-26 14:41:48
6987
原创 uni-app树形列表（单选，多选）
多选：使用的是插件市场的tree树组件（ly-tree)<ly-tree ref="tree" :treeData="treeData" v-if="ready" nodeKey="id" @node-expand="handleNodeExpand" @node-click="handleNodeClick" :showCheckbox="true" :checkOnClickNode="true" :expandOnClickNode="false" :defaultExpa
2021-11-24 15:55:41
6573
九宫格抽奖和转盘抽奖源代码
2023-09-11
彩光+暖白光取色器vue组件
2023-09-11
android报ViewRootImpl: Could not lock surface
2017-06-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人