web前端
关注
分享
扫一扫
supper李
这个作者很懒，什么都没留下…
展开
-
vue多页面入口配置
*index.html(主页\项目入口）,app.vue(根组件)，main.js(文件入口的配置)1.进行项目入口的配置在public下面，复制index.html修改文件名（里面内容可以不变）<!DOCTYPE html><html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-03-31 10:19:26 · 5065 阅读 · 1 评论 -
css渐变色
CSS渐变色background: -moz-linear-gradient(top, #f76f6f 0%, #c01211 100%);background: -webkit-linear-gradient(top, #f76f6f 0%,#c01211 100%);background: -o-linear-gradient(top, #f76f6f 0%,#c01211 100%);background: -ms-linear-gradient(top, #f76f6f 0%,#c01211原创 2020-08-20 17:29:48 · 218 阅读 · 0 评论 -
微任务和宏任务
宏任务和微任务：异步任务之间是有执行优先级的区别的。不同的异步任务会被分为两类，微任务和宏任务宏任务： 需要多次事件循环才能执行完，事件队列中的每一个事件都是一个宏任务。浏览器为了能够使得js内部宏任务与DOM任务有序的执行，会在一个宏任务执行结束后，在下一个宏执行开始前，对页面进行重新渲染 （task->渲染->task->…）鼠标点击会触发一个事件回调，需要执行一个宏任务，然后解析HTML微任务： 微任务是一次性执行完的。微任务通常来说是需要在当前task执行结束后立即执行的任务原创 2020-08-11 15:03:32 · 388 阅读 · 0 评论 -
前端事件和方法的区分，千万不要搞混了，小知识大用途
在前端有事件和方法，有些人总是把事件当作方法，把方法说成事件，很多人认为事件和方法是一个东西，其实不然，方法和事件还是有很大的区别的。①事件名前一般都以on开头②方法可以直接调用，事件不需要调用，但是需要写一个函数且改函数赋值给相应的事件，其调用是在相应的事件触发时。注意：通常事件和方法是连贯使用的，方法一般封装了具体要干的事，是通过事件来调用方法。例如：我们可以通过点击事件，去调用登录的方法。...原创 2020-08-11 14:36:30 · 714 阅读 · 0 评论 -
小程序获取当前所在城市名
到腾讯地图开放平台申请key，在小程序中js文件：Page({ data: { city:'北京', url:'https://sc.xiannianmi.cn/xns/?sysAccount=BJDDMC#/', arr:[ { city:'北京市', url:'https://sc.xiannianmi.cn/xns/?sysAccount=BJDDMC#/'}, { city: '长沙市', url:'https://sc.xiannianmi.原创 2020-07-28 14:34:52 · 565 阅读 · 0 评论 -
css3隐藏滚动条
::-webkit-scrollbar {/隐藏滚轮/display: none;}原创 2020-07-23 14:51:13 · 430 阅读 · 0 评论 -
前端页面调用微信扫一扫功能
前端代码：引入微信对象import wx from '@/plugins/wechat/wechat';主要代码：wxscan() { // 调用扫一扫 const that = this; getWxScan(this.url).then((res) => { // eslint-disable-line this.jsonData = res.data; if (!wx) { return false;原创 2020-07-17 16:49:27 · 1918 阅读 · 0 评论 -
微信中关闭h5页面
window.close()：有时候不生效WeixinJSBridge.call(‘closeWindow’);原创 2020-06-16 21:27:06 · 1432 阅读 · 0 评论 -
vue移动端适配（postcss-pxtorem和amfe-flexible）
一、移动端适配（postcss-pxtorem和amfe-flexible）在vue中实用rem自动转换插件(postcss-pxtorem和amfe-flexible事项移动端适配)实现思路：①通过postcss-pxtorem实现将px转成rem，②实用amfe-flexible插件进行HTML根节点的初始化。配置完这两个插件，我们就可以实用设计稿的px来进行开发了。1.安装postcss-pxtorem和amfe-flexibleNpm install postcss-pxtorem --sa原创 2020-06-10 14:40:05 · 2848 阅读 · 1 评论 -
vue中实现60秒倒计时
vue中实现60秒倒计时<span>{{count}} s</span>data中：data(){ return{ show: true, count: '', timer: null, }}methods:{ getCode() { const TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.show =原创 2020-06-10 14:14:39 · 3802 阅读 · 0 评论 -
vue中实现滚动和锚点跳转双向
vue中实现滚动和锚点跳转双向直接上代码：<template> <div> <div class="list"> <ul> <li v-for="(item,index) in title_list" :key="index"> <span ref="spans" :style="{color: activeStep === index ? '#1987e1' : '#000000'原创 2020-06-02 12:16:19 · 925 阅读 · 0 评论 -
vue项目添加百度统计
vue项目添加百度统计在index.html中head的上面添加script代码：在main.j入口文件中监听路由的改变：// 加入百度统计router.beforeEach((to, from, next) => {if (to.path) {if (window._hmt) {window._hmt.push([’_trackPageview’, ‘/#’ + to.fullPath])}}next()})哦了...原创 2020-05-15 16:24:48 · 290 阅读 · 0 评论 -
vue项目中实现简单的分页效果
vue项目中实现简单的分页效果1.在data中声明数据：data(){return{sel:0,//tab切换news:[],//新闻动态的数据health:[],//健康卫士的数据current:0,uldata:[{name:‘企业动态’,num:0},{name:‘健康贴士’,num:1}],totalPage:1,//总页码数，默认为1currentPage:1,//当前页，默认第一页，pageSize:3,//每页显示的数量currentPageData:[],//当前页显原创 2020-05-15 16:28:38 · 561 阅读 · 0 评论 -
vue动态添加title，（keywords）关键字和description
vue动态添加title，（keywords）关键字和description首先在router下的index.js设置路由routes:[{path:’/home’,component:Home,meta: {title: ‘先农氏-智能无人碾米机’,content:{keywords:‘先农氏,智能碾米机,先农氏智能无人碾米机’,description:‘先农氏智能无人碾米机，中国首台智能无人碾米机，专利产品。拥有先进核心技术，更智能、碾米速度更快，噪音更小，操作更简便，现碾现售。新鲜原创 2020-05-13 16:47:40 · 4168 阅读 · 0 评论 -
vue项目中pc端和移动端的切换
vue项目中pc端和移动端的切换生成两个项目上传到服务器后生成两个域名在每个项目中index.html文件下进行判断原创 2020-05-12 10:27:45 · 2783 阅读 · 0 评论 -
vue中如何动态改变title中的内容
<link rel="icon" href="<%= BASE_URL %>./title16.png">在vue的index.html中这句话是title中的小图标，可以改成自己的图标：注意：图标的位置必须卸载public静态文件目录下，否则在改变title内容时，图标会消失成为默认的图标。要想改变title中的内容，需要在路由文件中，加入meta:{titel:...原创 2020-04-22 16:34:15 · 1874 阅读 · 0 评论 -
vue实现监听滚动条，回到顶部
通过在app.vue中定义一个张图，这样在我们的每一个页面中都会有回到顶部的效果。在data中声明默认滚动条的高为0.以及滚动条是否显示两个数据。写一个方法监听滚动条的高度当高度高于一个值（自定义的值），就显示回到顶部图标，在一个方法如果点击回到顶部后滚动条赋值为0，同时隐藏回到顶部图标。 ...原创 2020-04-22 09:52:26 · 1025 阅读 · 1 评论 -
js打印三角形，矩形，菱形，六边形，八边形，等腰三角形
js代码编写三角形，矩形，菱形<! DOCTYPE html><title>打印三角形、正方形、菱形、长方形、六边形</title><style> div{width:300px;border:#000 1px solid;text-align:center;}</style> //三角形<di...原创 2019-08-17 15:10:53 · 1105 阅读 · 0 评论