- 博客(121)
- 收藏
- 关注
原创 基于vue 2.0的H5页面中使用H5自带的定位,高德地图定位,搜索周边商户,覆盖物标记,定位到当前城市
基于vue 2.0的H5页面中使用高德地图定位,搜索周边商户,覆盖物标记。
2023-11-14 10:22:48
2285
2
原创 H5原生html,css实现弹窗
H5原生html,css实现弹窗代码和效果如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2022-05-24 17:08:52
1793
2
原创 Vue实现滚动吸顶,文案动态更改
Vue实现滚动吸顶,文案动态更改1、效果和代码如下<template> <div class="record"> <div class="current-month"> <p>{{currentTop}}</p> </div> <div class="record-list"> <div class="record-list-wrap"
2022-05-16 16:48:47
594
原创 纯css实现文字走马灯
纯css实现文字走马灯主要用到了css3中animation,效果和代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
2022-04-20 13:46:36
2191
原创 原生js实现拖拽特效
原生js实现拖拽特效效果图和代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
2022-04-20 11:53:54
298
原创 node版本配置的可能会遇到的问题
node版本配置的可能会遇到的问题npm ERR! code EBADPLATFORMnpm ERR! notsup Unsupported platform for n@8.1.0: wanted {"os":"!win32","arch":"any"} (current: {"os":"win32","arch":"x64"})npm ERR! notsup Valid OS: !win32npm ERR! notsup Valid Arch: anynpm ERR! notsup
2022-03-30 14:30:14
2918
原创 vue项目移动H5的页面调试
移动h5的调试方式1、eruda 直接外链引入初始化;然后重新运行项目即可看到<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script><script>eruda.init();</script>2、就是真机调试,目前我知道的仅适用于安卓,ios可以自行搜索一下,首先需要一根数据线连接手机和电脑,手机需打开开发者模式,允许USB调试,USB调试功能上选MDI,然
2022-03-21 09:59:06
1471
原创 vue.config.js配置反向代理
vue.config.js配置反向代理首先找到vue.config.js文件,然后在如下位置写入module.exports = { devServer: { port: 8090, proxy:{ "/api": { // 接口请求路径 target: "http://xx.xxx.xxx.xx:xx",//反向代理的目标地址 changeOrigin: true } }, }}然后在页面上发送请求时
2022-03-18 16:42:23
3186
原创 部分防御性CSS技能
部分防御性CSS技能1、长文本的处理方式.username { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2、锁定滚动链接auto - 默认。元素的滚动会传播给祖先元素。contain - 阻止滚动链接。滚动不会传播给祖先,但会显示元素内的原生效果。例如,Android 上的炫光效果或 iOS 上的回弹效果,当用户触摸滚动边界时会通知用户。注意:overscroll-behavior
2022-02-28 11:21:01
82
原创 css3常用动画属性总结
css3常用动画属性总结1、text-stroke(仅支持Safari、Chrome)-webkit-text-stroke: 1px pink;第一个参数是描边的宽度,第二个参数是描边的颜色;通常使用这个属性,会和color:transparent;搭配使用,实现镂空字体的效果,如下示例所示 font-size: 40px; -webkit-text-stroke: 1px pink; color:transparent;2、border-radiusborder-radius
2022-02-25 11:05:27
651
1
原创 口红见缝插针小游戏的一些参数说明
口红见缝插针小游戏的一些参数说明源码下载地址如下https://www.17sucai.com/pins/32687.html刚下载下来的代码运行之后,可能会报错,百分之八九十的可能是因为以下代码,注释以后就可以了,主要是这块是请求数据的,本地运行可能会产生一些未知的错误 var data = JSON.parse($.cookie('game_cookie')) if (!data.game_result) { data = {game_result:0} }
2022-02-24 10:28:59
2581
原创 vue-awesome-swiper解决coverflowEffect和loop属性冲突的问题
vue-awesome-swiper解决coverflowEffect和loop属性冲突的问题coverflowEffect和loop在官网上不能同时使用,但有时需要3D旋转效果和循环同时存在,可以在swiper上增加一个判断就可以使这两个属性同时存在<template> <div class="swiperTwoBox"> <swiper class="swiper-container" :options="swiperTwoOpti
2022-01-05 15:47:35
1851
2
原创 解决使用html2canvas截取移动端有弹窗的页面时,截图跑偏
解决使用html2canvas截取移动端有弹窗的页面时,截图跑偏前提是当弹窗的的样式有transform时就会触发可以强制给弹窗增加样式,将transfrom样式给顶掉<van-popup class='center'></van-popup>.center{ top: 50%; left: 50%; margin-top: -50vh; //这个可以根据弹窗的大小调整据顶部的距离 margin-left: -45vw;//这个可以根据弹窗的大小调整
2021-12-03 16:26:54
559
原创 微信小程序的路由跳转方式及使用场景
微信小程序的路由跳转方式及使用场景1、wx.navigateTo(Object)wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面,对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用2、wx.redirectTo(Object)重定向,当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 10 层页面栈的情况下,我们
2021-11-10 09:13:17
1222
原创 uniapp的一些特殊方法
uniapp的一些特殊方法获取头部导航安全区域 uni.getSystemInfoSync().statusBarHeight 编译环境 #ifdef MP 小程序编译环境 #ifdef H5 H5编译环境 #ifdef APP-PLUS APP编译环境动态修改导航头部的标题 uni.setNavigationBarTitle({ title: '232432', });...
2021-09-26 15:41:41
205
原创 _interopRequireDefault is not a function
_interopRequireDefault is not a function在用uniapp写h5时报这个错,可能是因为node_modules安装过程中出现问题,可以把项目目录下的node_modules删除掉,然后再重新安装node_modules
2021-09-15 10:40:52
4365
4
原创 uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件
uniapp小程序echarts插件----秋云 ucharts echarts 高性能跨全端图表组件首先下载地址如下秋云 ucharts echarts 高性能跨全端图表组件,如果是用uni_modules的形式引入的话,可以在页面上直接使用,不用再import引入<template> <view style="height:300px"> <qiun-data-charts style="height:100%" type="column" :loadi
2021-09-13 09:38:38
2181
原创 vue实现拖拽排序---插件sortablejs
vue实现拖拽排序—插件sortablejs首先安装npm i sortablejs<template> <a-table ref="table" class="exchange_table" style="width: 90%;background: #fff" :pagination="false" :columns="columns" :data-source="ranking_goods"> <template s
2021-09-06 14:34:14
1381
原创 vue登录或其他操作进行图片验证的插件vue-puzzle-vcode
vue登录或其他操作进行图片验证的插件vue-puzzle-vcoded首先提前准备好图片<template> <button @click='open'>点击</button> <Vcode @click.prevent :imgs="imgs" :show="isShow" @success="success" @close="close" /></template><script>import Vcode fro
2021-09-06 14:22:14
666
原创 uniapp小程序的分包处理
uniapp小程序的分包处理首先在manifest.json中加入如下配置 "optimization" : { "subPackages" : true },然后把需要分出去的页面写在这个分包里面 "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, {
2021-09-03 16:27:57
358
原创 uniapp小程序上传base64格式的图片
uniapp小程序上传base64格式的图片首先可以把图片转base64的方法放在vue原型上,当让也可以写在组件中,在main.js中写入方法Vue.prototype.pathToBase64 = (path, quality) => { return new Promise((resolve, reject) => { //#ifdef H5 quality = quality || 0.3; // -------------------测试无问题 let
2021-09-03 16:21:32
1812
原创 vue常用的时间、手机号等的格式化方法
vue常用的时间、手机号等的格式化方法/** * 手机号格式化 */export function phoneFilter(val) { let str = ""; str = val.substr(0, 3) + "****" + val.substr(val.length - 4); return str;}/** * h5兼容安卓和苹果的复制文本 */export function copyText(contentUrl) { let oInput = docume
2021-09-03 15:13:37
763
原创 uniapp小程序获取用户授权自己的位置权限
uniapp获取用户授权自己的位置权限如果是小程序中大部分地方需要用到定位,可以写在vue的原型上面,如果只是个别需要,可以直接当成方法写在里面,下面是写在原型上的示例,首先,需要在mainifest.json中配置位置的权限,如果用的是vscode的话,,如下配置即可 "permission" : { "scope.userLocation" : { "desc" : "你的位置信息将用于为您就近匹配门店" }}如果是hbuilderX,也是mainifest.
2021-09-03 14:46:29
2505
1
原创 vue全局过滤器
vue全局过滤器任意写一个js文件,暴露出需要的方法,比如filters.js,格式如下export function phoneFilter(val) { let str = ""; str = val.substr(0, 3) + "****" + val.substr(val.length - 4); return str;}然后在main.js中引入import * as filters from "./utils/filters";// 全局过滤器Object.keys
2021-09-03 14:23:05
181
原创 uniapp小程序唤醒微信支付
uniapp小程序唤醒微信支付示例如下wxpay(e) { uni.getProvider({ //获取支付类型 service: "payment",//oauth 授权登录share 分享payment 支付push 推送 success(reson) { uni.requestPayment({ provider: reson.provider[0], //支付类型 ap
2021-09-03 14:08:00
450
原创 uniapp的h5配置反向代理
uniapp的h5配置反向代理uniapp写的h5配置反向代理,首先要把开发环境的环境变量置为空然后再mainifest.json中进行配置要代理的接口以及目标地址,示例如下 "devServer" : { "disableHostCheck" : true, "proxy" : { "/platform" : { "target" : "http://baidu.com", "changeOrigin" : t
2021-09-03 13:57:37
845
原创 uniapp小程序由其他页面跳转tabbar页面
uniapp小程序由其他页面跳转tabbar页面微信小程序跳转tabbar页面 wx.reLaunch({ url: "/pages/order/orderList/index", }); //也可以携带参数 wx.reLaunch({ url: "/pages/order/orderList/index?orderStatus=1", });微信小程序跳转tabbar页面uni.switchTab({ url: "/pages/index/index",
2021-09-03 13:49:24
980
原创 uniapp海报画板
uniapp海报画板主要可以用于生成海报,生成二维码,一款canvas海报组件,可根据自身需求使用JSON生成海报首先先引入,先在Dcloud插件市场下载链接// 非uni_modules引入方式import lPainter from '@/components/lime-painter/'// uni_modules引入方式import lPainter from '@/uni_modules/lime-painter/components/lime-painter/'export def
2021-07-08 10:07:28
507
原创 node.js的简单教程
node.js的简单教程1、node.js的基本模块1.1、fsNode.js内置的fs模块就是文件系统模块,负责读写文件。同步操作的好处是代码简单,缺点是程序将等待IO操作,在等待时间内,无法响应其它任何事件。而异步读取不用等待IO操作,但代码较麻烦。异步读取,请注意,sample.txt文件必须在当前目录下,且文件编码为utf-8。异步读取时,传入的回调函数接收两个参数,当正常读取时,err参数为null,data参数为读取到的String。当读取发生错误时,err参数代表一个错误对象,dat
2021-06-25 09:42:22
143
原创 uniapp中map地图定位的使用
uniapp中map地图定位的使用有时h5为了实现类似外卖系统的地图定位,如下图所示代码如下<template> <view> <view class="page-body"> <view class="page-section page-section-gap"> <map style="width: 100vw; height: 100vh" :latitude=
2021-06-24 09:26:11
2607
原创 video标签的全部配置
video标签的全部配置src:要播放的路径地址autoplay:是否自动播放,默认值是false,(Boolean)loop:是否循环播放,默认值是false,(Boolean)muted:是否静音播放,默认值是false,(Boolean)initial-time:制定和视频初始播放位置,单位为秒(字节跳动小程序不支持,Number)duration:指定视频时长(字节跳动小程序不支持,Number)controls:是否显示默认播放控件danmu-list:弹幕列表(字节跳动小程序不
2021-05-14 11:25:54
3425
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人