- 博客(277)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 uniapp做微信小程序，自定义checkbox和radio的样式
用uniapp做个微信小程序，其中有用到自定义checkbox和radio的样式；自定义checkbox。
2023-07-12 13:49:19
2644
原创 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
6400
原创 React中memo()、useCallback()、useMemo() 区别使用详解
本文转载自，文中讲解useMemo时，代码示例不详细，在此做个笔记，并补充详细。memo()、useCallback()、useMemo() 区别使用详解
2022-11-11 17:39:00
745
原创 微信小程序之页面之间四种通讯方式
app.js中定义一个全局的空属性，到当前页面获取全局属性，并且赋需要传递的值给这个全局属性，再到跳转之后的页面获取这个全局属性，用其进行相应的操作，之后再赋值为空。从第一个页面过来时，onLoad里接收参数key=channelA，点击页面按钮，返回上级页面时，传参key=someEvent。类似于vue中的组件传值，可以应用于很多场景，用的最多的则是路由跳转传值和获取上一页面的数据。触发回调后，任意页面都可以使用，使用完之后赋值为空即可。一. 页面跳转传参：直接在url后拼接。三、使用全局变量传值。
2022-11-09 16:52:43
2669
原创 React Hook学习之useState, useContext
Hook 是16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
2022-11-03 14:51:13
214
原创 正则表达式语法及使用
[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
1381
原创 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
3408
1
原创 微信小程序适配问题
iPhoneX兼容在小程序页面开发中，涉及到需要适配iPhoneX的地方主要有导航栏（NavigationBar），标签栏（TabBar）以及页面底部的吸底按钮。对于positionfixed的可交互组件，如果渲染在iPhoneX的安全区域外，容易误触HomeIndicator，应当把可交互的部分都渲染到安全区域内。建议使用以下wxss进行兼容适配方案1、meta标签中设置网页在可视窗口的布局方式2、fixed完全吸底元素场景的适配另外一种方法，获得。......
2022-07-16 11:18:07
5118
1
原创 微信小程序分享给朋友和分享到朋友圈
微信小程序分享给朋友比较简单，只需要在要分享的页面中设置onShareAppMessage即可。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮监听用户点击页面内转发按钮（button 组件 ）或右上角菜单“转发”按钮的行为，并自定义转发内容。 onShareAppMessage如果带了参数，参数中的from会指明是从哪里触发的，从按钮触发from='button'，从右上角菜单中触发from='menu'支持自定义标题，自定义路径和自定义图片 我们点击分享出去的卡片，打开小程序，可以在
2022-06-17 11:20:00
13403
原创 ES6扩展运算符用法
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象中用法：1、将一个数组放入另一个数组中2、拼接数组使用扩展运算符可以代替concat()来拼接数组。3、扩展运算符可以与解构赋值结合起来，生成数组4、Math5、将类数组或可遍历对象转换为真正的数组6、字符串转数组......
2022-06-13 11:13:27
857
原创 微信小程序文字跑马灯效果的两种实现
跑马灯的两种实现，CSS实现跑马灯效果，js实现第二种，单独的组件marquee.wxmlmarquee.jsmarquee.wxssmarquee.json在页面中使用swiperWidth的值：
2022-06-11 13:50:27
2019
原创 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
167
原创 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
219
原创 margin重合(外边距重叠)及解决方法
CSS 外边距重叠(外边距塌陷)块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。一、哪些元素会发生外边距重叠问题外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题二、什么情况下会发生外边距重叠呢第一种情况： 相邻兄弟元素的marin-bottom和margin-top的值
2022-05-25 15:50:53
9206
原创 微信小程序之自定义下拉列表框（新）
下拉列表中的值选中后，关闭列表，再打开，值可记忆，并显示相应的选中样式.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
4672
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
8437
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
2363
原创 微信小程序--自定义下拉列表
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
2945
原创 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
10241
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
5801
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
2178
原创 VUE 自定义取色器组件
效果：功能：1。点击色块中任何一点，色块中的正方形显示该点的颜色。2。点击色块上方的颜色圆点，色块选中该颜色所在的位置，并在正方形中显示相应颜色。3。上方圆点如果不是rgb格式，需要转换。4。组件的大小从调用它的页面中传过去。组件代码(CanvasColor2.vue)：<template><!-- <div>--> <div id='outDiv' style="position: relative">&l
2022-01-04 15:39:24
1957
原创 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
11572
原创 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
7089
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
6436
原创 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
5855
原创 uniapp 上传多张图片
上传图片时要设置"Content-Type": "multipart/form-data",批量上传图片的接口，向参数files中传入多张图片，方法如下：1。使用for循环，一次上传多张图片，async imgUpload(imgs) { for(let i=0;i<imgs.length;i++) { let res = await ApiService.imgUpload(imgs[i],'files',null); console.log('imgUpl
2021-11-23 15:48:12
7930
原创 uni-app 上拉加载下拉刷新
使用uni-app开发list列表，实现上拉加载下拉刷新的功能。list列表：<uni-list :border="false"> <uni-list-item v-for="(item,index) in personList" :key="index" :border="false" direction="column" class="item" clickable @click="gotoDetail(item)"> <template v-slo
2021-11-10 14:27:27
1741
原创 uni-app 自定义webview大小
在uni-app中使用web-view 组件，默认铺满全屏并且层级高于前端组件，会遮挡页面上的其他组件。在官网中写明：app-vue下web-view组件不支持自定义样式，默认充满屏幕不可控制大小；nvue web-view 必须指定样式宽高具体示例：代码：直接在UI上使用webview组件，也是默认全屏，需要动态加载。先新建一个component.nvue文件：<template> <div> <view class="intro"&g
2021-10-26 16:32:45
12604
8
原创 VUE 获奖名单滚动显示的两种方式
第一种： 使用vue-seamless-scroll组件：1、安装vue-seamless-scrollnpm install vue-seamless-scroll --save2。使用2-1 全局配置在main.js中，正常配置是：import scroll from 'vue-seamless-scroll'Vue.use(scroll)在用到的页面文件中：<vue-seamless-scroll></vue-seamless-scroll..
2021-09-15 16:16:07
1127
原创 设置width:100%再设置margin或padding溢出的问题
第一种情况：父子组件width都设为100%，子组件中设置了margin，溢出解决方法：在父组件中加入display: inline-flex即可<div style="width: 100%; display: inline-flex;"> <div style="width: 100%; background-color: #46b6c8; margin: 12px;">sdsdffsdfsdf===== </div></
2021-09-09 17:49:10
857
原创 React 轮播图效果实现
效果：轮播功能用到了react-slick组件，安装：npm install react-slick --savenpm install slick-carousel安装完后需要在使用轮播图的页面上导入css文件：import Slider from 'react-slick';import 'slick-carousel/slick/slick.css';import 'slick-carousel/slick/slick-theme.css';swiper.js.
2021-08-05 14:48:58
1859
原创 React 中echart曲线图的使用
效果如下：LineChart.jsimport React, {Component} from 'react';import {Card} from 'antd';import EChartsReact from 'echarts-for-react';class LineChart extends Component{ getOptions =(hours,temps, humiditys,weathers) => { return { .
2021-08-05 13:24:21
659
九宫格抽奖和转盘抽奖源代码
2023-09-11
彩光+暖白光取色器vue组件
2023-09-11
android报ViewRootImpl: Could not lock surface
2017-06-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人