一杯充满泡泡的可乐-CSDN博客

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 1680 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 511

原创纯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 2154

原创原生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 285

原创 node版本配置的可能会遇到的问题

node版本配置的可能会遇到的问题npm ERR! code EBADPLATFORMnpm ERR! notsup Unsupported platform for [email protected]: 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 2799

原创 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 1415

原创 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 3035

原创部分防御性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 63

原创 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 534 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 2533

原创 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 1752 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 506

原创微信小程序的路由跳转方式及使用场景

微信小程序的路由跳转方式及使用场景1、wx.navigateTo(Object)wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面，对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用2、wx.redirectTo(Object)重定向，当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 10 层页面栈的情况下，我们

2021-11-10 09:13:17 1065

原创 uniapp的一些特殊方法

uniapp的一些特殊方法获取头部导航安全区域 uni.getSystemInfoSync().statusBarHeight 编译环境 #ifdef MP 小程序编译环境 #ifdef H5 H5编译环境 #ifdef APP-PLUS APP编译环境动态修改导航头部的标题 uni.setNavigationBarTitle({ title: '232432', });...

2021-09-26 15:41:41 191

原创 _interopRequireDefault is not a function

_interopRequireDefault is not a function在用uniapp写h5时报这个错，可能是因为node_modules安装过程中出现问题，可以把项目目录下的node_modules删除掉，然后再重新安装node_modules

2021-09-15 10:40:52 4192 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 2085

原创 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 1221

原创 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 634

原创 uniapp小程序的分包处理

uniapp小程序的分包处理首先在manifest.json中加入如下配置 "optimization" : { "subPackages" : true },然后把需要分出去的页面写在这个分包里面 "subPackages": [{ "root": "pagesA", "pages": [{ "path": "list/list", "style": { ...} }] }, {

2021-09-03 16:27:57 310

原创 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 1691

原创 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 702

原创 uniapp小程序获取用户授权自己的位置权限

uniapp获取用户授权自己的位置权限如果是小程序中大部分地方需要用到定位，可以写在vue的原型上面，如果只是个别需要，可以直接当成方法写在里面，下面是写在原型上的示例,首先，需要在mainifest.json中配置位置的权限，如果用的是vscode的话，，如下配置即可 "permission" : { "scope.userLocation" : { "desc" : "你的位置信息将用于为您就近匹配门店" }}如果是hbuilderX，也是mainifest.

2021-09-03 14:46:29 2330 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 164

原创 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 399

原创 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 778

原创 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 945

原创 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 451

原创 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 112

原创 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 2500

原创 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 3206 1

空空如也

空空如也