- 博客(47)
- 收藏
- 关注
原创 el-select 获取change点击index
el-select 获取change点击index 1 2 3 <el-select> <el-option v-for="(item, index) in optionlist"@click.native ="handleSelect(index)"></el-option> </el-select>
2022-02-15 16:05:22 2238
原创 Vue+elemnet UI table表格使用print.js打印
1.npm 安装priint.js2.vue页面引用import * as Printjs from "print-js";3.<el-table id="printCons" :data="tableData" stripe style="width: 100%; margin-top: 30px" border v-loading="loading" >
2022-01-27 11:36:08 1533 1
原创 vue中ref的作用
vue中的ref其实功能很强大,下面介绍一下如何使用。基本用法,本页面获取dom元素<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div></template><script>export default
2021-12-21 11:35:23 457
原创 swiper2 js增加slide pagination 那几个切换的点初始化异常问题
先添加完slide 在初始化swiper,swiper外边还要用,要定义个全局变量
2021-11-09 11:48:49 518
原创 js把两个对象个并为一个对象
Object.assign()基本用法Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。const target = { a: 1 };const source1 = { b: 2 };const source2 = { c: 3 };Object.assign(target, source1, source2);target // {a:1, b:2, c:3}Object.assign方法的第一个参
2021-11-09 11:44:33 2477
原创 select第一个选不上
解决方法: 1 2 3 4 5 6 7 <select id="zhouqi"class="select"size="1"name="periodicId"style="color:gray;"> <option value="0"selected="selected"style="display: n...
2021-10-15 17:30:14 411
原创 url传中文参数乱码
encodeURI 编码 解码encodeURI();编码 解码都是这个方法实例:// 编码 $(".index-search").bind('keydown',function(event){ var text = encodeURI($(this).val()); if(event.keyCode == "13") { window.open("search-list.html?keyword="+text);
2021-10-13 17:24:45 68
原创 JQuery清空dom下的所有节点
$(".left-list .item-box").empty();2.清空元素下的某些特定节点$("#mulu_rongqi").find("li").remove();
2021-10-13 11:07:40 600
原创 jquery实时获取input的输入值
$("#btn-search").bind('input propertychange', function() { var a = $("#btn-search").val(); console.log(a); })
2021-10-13 10:43:26 793
原创 JS字符串截取(获取指定字符后面的所有字符内容)
function getCaption(obj){ var index=obj.lastIndexOf("\-"); //获取-后边的字符串 obj=obj.substring(index+1,obj.length);// console.log(obj); return obj;}var str=" 执法办案流程-立案审批";getCaption(str);最后得到的结果是立案审批...
2021-09-10 10:44:04 8764
转载 前端知识整理(1)js篇
1 声明1-1 [js函数声明的三种方式:](1)Function()构造器var f = new Function()(2)函数声明function f (){ console.log(111); }(3)函数表达式var f = function(){ console.log(222);}1-2 [js变量声明:]1.var声明的变量会挂载在window上,而let和const声明的变量不会2.var声明.
2021-09-01 17:51:59 195
原创 前端面试必问题整理(1)
必问题,必问题,必问题,1,vue响应式原理?详细说一下过程。1.1 什么是Vue响应式呢“数据发生变化后,会重新对页面渲染,这就是Vue响应式”1.2 想完成这个过程,我们需要做些什么...
2021-08-31 16:30:53 111
原创 js函数作用域 变量提升
JavaScript 拥有函数作用域:每个函数创建一个新的作用域。作用域决定了这些变量的可访问性(可见性)。函数内部定义的变量从函数外部是不可访问的(不可见的)。js:var a = 111; function f() { console.log(a); var a = -1; console.log(a); } f();控制台:你可能会想当然的认为alert()第一次显示的是123(即全局变量a的..
2021-08-30 17:15:14 140
原创 js截取?后的所有字符串
var herf = http://127.0.0.1:5500/detail.html?id=24herf = href.split("?id=")[1]split("xxx")[1]可以截取xxx后的所有字符串
2021-08-25 16:35:50 462
原创 .html()进去的内容,添加ckick事件
html:<!-- 案例展示 --> <div class="case"> <div class="index-title"> 案例展示 </div> <div class="item-box"> </div> <div class="more"> 点击加载更
2021-08-25 15:58:54 210
原创 js 数组渲染到html页面
html页面<div class="friends"> <div class="index-title"> 玩家伙伴 </div> <div class="top"> <div class="title"> 车圈厂牌 </div> <div class
2021-08-24 18:28:05 4366
原创 微信小程序 weui mp-dialog组件
html:<mp-dialog ext-class="dialog" show="{{dialogShow}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"> <view> <image src="{{avatarurl}}" class="head_p"></image> <view class="title">
2021-08-12 17:52:02 5044
原创 微信小程序image 常用mode类型
默认scaleToFillmode string scaleToFill 否 图片裁剪、缩放的模式 5个缩放模式,9个裁剪模式,裁剪模式不常用,缩放模式中常用aspectFill和widthFixmode 的合法值值 说明 最低版本 scaleToFill 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可...
2021-08-10 16:07:53 2334
原创 微信小程序bind事件和catch事件区别
在小程序中事件分为冒泡事件和非冒泡事件。本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别bind和catch事件bindtap 事件绑定不会阻止冒泡事件向上冒泡catchtap 事件绑定可以阻止冒泡事件向上冒泡假如有三个view点击事件都是用的bindtap,三个view是层级包含关系<view id="outer" bindtap="out"> outer view <view id="middle" bi..
2021-08-09 18:07:49 374
原创 微信小程序 自定义组件的数据传递 父组件子组件传递值
1.父组件向子组件传递数据parent.wxml<my-component name="{{name}}" age="{{age}}"></my-component>parent.jsdata: { name: 'Peggy', age: 25}child.jsproperties: { name: { type: String, value: '小明' }, age: Number}父组件向子组件传值以属
2021-08-09 18:06:06 1129
原创 微信小程序路由
wx.reLaunch(Object object)关闭所有页面,打开到应用内的某个页面一般是跳转到首页使用例:wx.reLaunch({ url: url, })wx.navigateTo(Object object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。例:wx.navigateTo({ url:..
2021-08-09 16:49:38 175
原创 微信小程序判断iphonex xs xr 样式
js:const res = wx.getSystemInfoSync(); if (res.safeArea.top > 20 && res.model.includes("iPhone")) { //判断是否为iphonex xs xr this.setData({ iphoneS: true, });html:<view class="bottom-nav {{iphoneS&&'d
2021-08-09 16:20:21 541
原创 Some selectors are not allowed in component wxss, including tag name selectors, ID selectors……
组件样式组件对应wxss文件的样式,只对组件wxml内的节点生效。编写组件样式时,需要注意以下几点:组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。 子元素选择器(.a>.b)只能用于view组件与其子节点之间,用于其他组件可能导致非预期的情况。 继承样式,如font、color,会从组件外继承到组件内。 除...
2021-08-09 11:47:13 692
原创 微信小程序wx.createAnimation动画使用
组件js代码中:初始化动画ready() { //评论组件动画 this.animation = wx.createAnimation({ //评论组件弹出动画 duration: 400, // 整个动画过程花费的时间,单位为毫秒 timingFunction: "ease", // 动画的类型 delay: 0, // 动画延迟参数 }); },methods: { // 发帖 handl
2021-07-21 15:28:34 1938
原创 scroll-view 组件为什么 scroll-x 不启用
解决方案1:后来发现其实只要给scroll-view加上white-space: nowrap;,给scroll-view的子元素box加上display:inline-block就像这样:.scroll-box {white-space: nowrap;}.scroll-box .box{display:inline-block}解决方案2:flexscroll-view里包个view,然后再包那些view里,在这个外层view上写display:flex...
2021-06-29 14:44:45 263
原创 微信小程序引用data数据的三元表达式写法
wxml页面:<text class="{{lightIndex==4?'active':''}}">我的</text>//如果index等于4,则添加class active下为改变图片路径三元表达式写法:<image src="{{lightIndex==4?'../../images/tab4-active.png':'../../images/tab4.png'}}" mode="widthFix"></image>...
2021-06-24 19:23:24 761
原创 JavaScript高级程序设计 总结(一)详细版
JavaScript诞生于1995年,最早的作用是在本地客户端处理数据验证。作者认为要想完全的理解和掌握JavaScript,关键在于弄清它的本质,历史和局限性。1997年制定标准ECMA-262的ECMAScript标准1.2 JavaScript的实现一个完整的JavaScript由下面三个不同的部分组成:核心(ECMAScript)文档对象模型(DOM)浏览器对象模型(BOM)...
2021-04-27 15:15:45 1569 2
原创 ::before 不生效
.page3 .tab-wrap .tab_all .tab-item::before{ content: ''; width: 1px; height: 23px; background: url(../images/li_line.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: 0;}::before 只有一个原因:父元.
2020-11-27 10:42:05 2533
原创 animation @keyframes 不生效
.kv .content .play{ display: block; width: 89px; height: 89px; position: absolute; left: 50%; top: 98px; margin-left: 128px; background: url(../images/videoPlay1.png) no-repeat; animation: bigger 2s linear infinite; .
2020-11-25 17:19:31 4482 1
原创 rem和px的转换
rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。Rem的使用前面说了em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他父元素的大小,在我们多次使用时,就会带来无法预知的错误风险。而rem是相对于根元素<html>,这样就意味着,我们只
2020-11-04 15:09:55 1940
原创 2020-JQuery学习
$.trim( ) 去除字符串两端的空格<script> var str = " jjj "; console.log("----"+str+"-----"); var res = $.trim(str); console.log(res); </script>控制台显示:
2020-09-23 11:16:41 99
原创 笔记
小程序的第三方框架1.腾讯 wepy 类似 vue2.美团 mpvue 语法 类似 vue3.京东 taro 类似 react4.滴滴 chameleon5.uni-app 类似 vue6.原生框架 MINA
2020-07-06 17:11:25 127
原创 学习微信小程序第二天(2020-06)WXML 语法参考(2)
与 CSS 相比,WXSS 扩展的特性有:尺寸单位 样式导入尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度) iPhone5 1rpx = 0.42px 1px =
2020-07-02 10:32:11 720
原创 学习微信小程序第一天(2020-06)WXML 语法参考
text相当于以前web中的span标签行内元素不会换行view相当于以前web中的div标签块级元素会换行checkbox相当于以前的复选框标签<!--使用bool类型充当属性checkbox--><!--字符串和花括号之间一定不要存在空格否则会导致识别失败-->数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用...
2020-06-30 17:59:04 326
原创 学习微信小程序第一天(2020-06)---全局配置文件
app.json文件 小程序全局配置pages 用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的.json,.js,.wxml,.wxss四个文件进行处理。数组的第一项代表小程序的初始页面(首页)。小程序中新增/减少页面,都需要对 pages 数组进行修改。window:用于设置小程序的状态栏、导航条、标题、窗口背景色。navigationBarBackgroundColor 导航栏背景颜色...
2020-06-30 10:53:54 251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人