![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
葉幺
实在 乐于研究
展开
-
常用css小封装
常用css 小封装原创 2022-07-15 10:58:40 · 996 阅读 · 1 评论 -
nui-app 滑动条 可修改背景图片跟滑动按钮图片
nui-app 滑动条 可修改背景图片跟滑动按钮图片简单明了,可根据这个模板修改多种样式原创 2021-12-16 17:51:30 · 999 阅读 · 0 评论 -
网络图片转成base64
urlTobase64(url){ // #ifdef MP-WEIXIN uni.getFileSystemManager().readFile({ filePath: url, //选择图片返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 ...原创 2021-07-27 16:01:05 · 1076 阅读 · 1 评论 -
js获取当前经纬度
if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( //locationSuccess 获取成功的话 function(position) { let getLongitude = position.coords.longitude; let getLatitude = position.coords.latitude; // alert(getLongitude) //弹原创 2021-04-14 09:28:11 · 1512 阅读 · 1 评论 -
uni-app微信小程序打开APP地图方法
wx.openLocation({ latitude: item.latitude, // 纬度,范围为-90~90,负数表示南纬 longitude: item.longitude, // 经度,范围为-180~180,负数表示西经, name:item.name, // 地址名称:某某学校 address:item.address, // 详细地址:某某街,某某路 success:function(r){ console.log(r) }})...原创 2021-03-22 15:17:48 · 1637 阅读 · 0 评论 -
js添加水印,防穿透
html<div id="mainFrame" style="background:url('bg.jpg') no-repeat;background-size:100% 100%;width:1200px;height:600px;position:relative;"> <div style="position:absolute;"> 你好 我是测试内容 </div> </div>js/** * 文字水印效果 * id 要加水原创 2021-03-16 16:31:22 · 830 阅读 · 0 评论 -
jq 在当前li下添加.on移除兄弟li下面的.on 获取当前li的下标
html<ul> <li class="on">li1111</li> <li>li2222</li> <li>li3333</li> <li>li4444</li></ul>js$("ul li").click(function(){ $(this).addClass("on").siblings().removeClass('on') // 在当前li下添加.o原创 2020-11-02 09:33:13 · 798 阅读 · 1 评论 -
pc 移动端点击事件
PC端的事件有:click(点击)、dbclick、mousemove、mouseover、mouseout、load等而移动端采用的是:tap(敲击)、taphold(长按)、swipe|swipeleft|swiperight(滑动)、scrollstart|scrollstop(滚动)、pageload(加载)等...原创 2020-06-29 11:06:32 · 719 阅读 · 0 评论 -
vue 一些可用方法或者容易忽略的监听事件或方法
使用watch时,当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。data() { return { searchName:'' }},watch: { // 当searchName发生变化时执行 searchName:function(e){ console.log(e) }} ...原创 2020-06-18 09:52:22 · 660 阅读 · 0 评论 -
uni-app请求后再次发送请求赋值失败this.$forceUpdate();
这两天使用uni-app运到一个问题请求时赋值,再次赋值后发现赋值不成功。第一步,发送请求,接收请求后则判断获取请求成功(注:如果接口错误或者请求失败请将isFor改成true) data() { return { dataList:[], isFor:false, // 用来判断是否请求成功 } },_ajaxs("某某接口",{参数},"POST"...原创 2019-12-12 11:17:47 · 6567 阅读 · 0 评论 -
前端常见操作,问题,兼容等链接
先收藏链接链接1 http://www.h-ui.net/bug.shtml后期添加链接原创 2019-11-06 11:34:17 · 117 阅读 · 0 评论 -
form表单的serialize,serializeObject,serializeArray属性
今天看了同事的代码,发现form属性还有serializeObject属性,结果上网查了下,这些方法的用法首先我们统一写一个form表单<form> <input type="text" name="username" value="123"/> <input type="password" name="password" value="456"...原创 2019-10-18 09:49:15 · 1502 阅读 · 0 评论 -
常见css
b{font-weight:normal} 去除b标签样式i{ font-style:normal} 去除i标签样式a{ text-decoration:none} 去除a标签样式添加阴影样式-moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; box-shadow:2px 2px ...原创 2019-10-10 16:05:15 · 105 阅读 · 0 评论 -
pc端,移动端添加弹窗禁止body滚动
1.css.fixed{position: fixed;width:100%;} // 由于如果不填写宽100%;有些人的宽会变窄2.jsvar Top = null; // 设置Top为空$(".btn").click(function(){ // 点击弹出弹窗禁止body滚动 $(".rule_box").show() Top = $(window).scrollTop...原创 2019-10-11 15:47:14 · 374 阅读 · 0 评论 -
图片根据容器等比缩放并居中
1.引入JQ(这里用到JQ插件)2.写html<div class="CardNoBox"> <img :src="imgF" alt="" class="CardNoImg" id="CardNoImgF"></div>3.添加css样式,由于css样式只截取一部分,同行们可自动补全.CardNoBox { width: 92%; bord...原创 2019-05-29 17:22:01 · 1021 阅读 · 0 评论 -
Taro固定底部切换AtTabBar
首先引入taro-ui,加入标签AtTabBarimport Taro, { Component, Config } from '@tarojs/taro'import { View } from '@tarojs/components'import { AtTabBar } from 'taro-ui'import './index.scss'标题为:个人中心,显示下标为3conf...原创 2018-11-27 10:44:46 · 12098 阅读 · 6 评论 -
pc端页面js禁止右击出现菜单
<script type="text/javascript"> function stops(){ return false; } document.oncontextmenu=stops;</script>原创 2019-08-28 09:42:44 · 424 阅读 · 0 评论 -
js 常用方法 数组,对象,字符串转换,去重
json字符串转json对象var str = "{id:1,name:'测试1'}"var obj = JSON.parse(str);json对象转json字符串var obj = {id:1,name:'测试1'}var jsonstr = JSON.stringify(obj);原创 2019-08-20 17:04:59 · 642 阅读 · 1 评论 -
(微信小程序,uni-app,taro) rich-text使用正则修改获取到的图片大小
1、先获取到返回的html值(如果有图片可以使用)this.conter = data.conter.replace(/\<img/gi, '<img style="max-width:96%;display:block;height:auto;margin:0.4rem 2%;"');2、在页面中填写就行了<rich-text :nodes="conter ">&...原创 2019-08-14 17:02:46 · 1117 阅读 · 0 评论 -
小程序中如何将View按照百分百比,实现等宽高效果
1,首先写出布局<View className='Box'> <View className='Box1'> <View className='Box2'></View> </View></View>2、写出样式.Box{display: flex;justify-content:space-between;...原创 2019-03-14 15:26:50 · 2473 阅读 · 1 评论 -
图片固定宽高居中
效果图:1、引入jq:2、添加html部分(引用两张网上图片):<div class="box"> <div class="list"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551061283&原创 2019-02-18 10:47:33 · 470 阅读 · 0 评论 -
Taro下拉刷新,上拉加载更多
效果图:1、引入插件import Taro, { Component } from '@tarojs/taro'import { View, Text, ScrollView } from '@tarojs/components'import { AtActivityIndicator } from 'taro-ui'import './index.scss'2、render (...原创 2019-02-21 20:26:19 · 23237 阅读 · 17 评论 -
移动端调用照相和录像功能。之上传图片
<label>照相机</label> <input type="file" id='image' accept="image/*" capture='camera'> <br> <label>摄像机</label> <input type="fi原创 2018-12-13 11:46:27 · 766 阅读 · 0 评论 -
weui 搜索 weui-search-bar
效果图1、首先引入css跟js<link rel="stylesheet" type="text/css" href="lib/weui.min.css"><script src='js/jquery.min.js'></script><script src='lib/jquery-weui.min.js'></原创 2018-11-30 18:16:46 · 11481 阅读 · 0 评论 -
Taro安装步骤
Taro官网安装及使用:https://nervjs.github.io/taro/docs/GETTING-STARTED.html1、安装node2、安装镜像可以使用淘宝的镜像 https://npm.taobao.org/打开命令终端 npm install -g cnpm --registry=https://registry.npm.taobao.org3、安装 Taro 开发工...原创 2018-11-23 14:45:29 · 4685 阅读 · 0 评论 -
CSS中的&代表的什么
如源码:ul{ margin-bottom: 20px; & >li { margin-bottom: 0; } }& 表示嵌套的上一级 这是sass的语法,代表上一级选择器 解释成CSS代码如下ul{margin-bottom: 20px;}ul > li {margin-bottom: 0;}...原创 2018-09-04 14:56:25 · 45518 阅读 · 3 评论 -
swiper4 移动端导航切换(可滑动)
首先导入 <link rel="stylesheet" href="css/swiper.min.css"><script src="js/jquery-1.10.1.min.js"></script><script src="js/swiper.min.js"></script&g原创 2018-08-20 17:05:46 · 12844 阅读 · 5 评论 -
form表单提交 正则简单判断身份证号,手机号,姓名
CSS样式自己填充我在这里就不加上了 html部分: &lt;main&gt; &lt;div class="container"&gt; &lt;div class="fl btn-register"&gt; &lt;img src=&原创 2018-08-03 15:51:31 · 10096 阅读 · 0 评论 -
使用div+css实现简单的箭头
CSS: .box{background-color: Teal;width: 160px;height: 400px;margin: 50px auto;text-align: center;} .box p{background:green;} .box div{margin:0 auto;} /*箭头向上*/ .to_top{width: 0;h...转载 2018-08-02 11:48:05 · 1679 阅读 · 0 评论 -
小程序超过部分隐藏,不起作用
遇到一个问题:小程序超过部分隐藏,不起作用,查了好多原因,最后发现不一定是英文才要给它强制换行,中文的情况也要css H5上可用,到微信小程序上就没用display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;最后改成这样才可以overflow:hidden; text...原创 2019-03-13 17:49:41 · 3718 阅读 · 0 评论 -
img 显示固定部分,超过部分隐藏,不压缩,不变形
不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图:只显示图片中间部分(红框部分)下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果,首先我们本次讨论中用到的两张图片的原图就是上面的两张图片(一张宽度大于高度,另...转载 2019-03-19 11:10:44 · 21024 阅读 · 2 评论 -
微信小程序文字图片水平垂直居中对齐问题
我们知道常用的居中对齐方式有很多种例如:text-align:center;align-items:center;justify-content: center;margin: auto; //子容器在父容器中居中但是在view中的文字对齐却不能简单的使用text-align: center;来实现,这种办法只能实现文字的水平居中,要实现水平垂直居中,可使用如下方案.box{ ...转载 2019-03-29 10:56:29 · 6430 阅读 · 0 评论 -
uni-app 获取验证码倒计时60秒
效果图1、先写html(相关样式自己写)<view class="flex_row"> <view class="iconfont iconyanzhengma"></view> <input type="text" v-model="verify" placeholder="请输入验证码" /> <view v-if="veri...原创 2019-07-30 10:36:27 · 4147 阅读 · 0 评论 -
使用for,map,each循环分别费时多久,谁的速度更快
首页我们来测试下看看那种循环费时比较久首先我们先引入jq<script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script>第一步先创建一个数组,push100000数据 var jjj = [] for(var i=0;i<100000;i++){ ...原创 2019-07-12 12:06:58 · 1141 阅读 · 0 评论 -
jq判断是否点击返回,回到上一页
<script> window.addEventListener('pageshow', function (event) { if(event.persisted || window.performance && window.performance.navigation.type == 2){ // 返回2则是点击返回 ...转载 2019-07-03 11:58:19 · 2506 阅读 · 0 评论 -
css 移动端常见的字体响应
html{ font-size:100px;padding:0;margin:0;}@media(max-width:540px){ html { font-size:84.375px; } } /*Android常用宽度*/@media(max-width:480px){ html { font-size:75px; } } /*Android常用宽度*/@media(max-width...原创 2019-07-02 16:14:29 · 1396 阅读 · 0 评论 -
html头部相关属性
<title> 标题定义文档的标题。<base target="_blank" /> 使页面中的所有链接在新窗口中打开。<meta name="author" content="w3school.com.cn"> meta 属性标识作者<meta name="generator" content="Dreamweaver 8.0en"> m...转载 2019-06-14 15:15:37 · 168 阅读 · 0 评论 -
css object-fit实现图片居中垂直对齐不超过,不隐藏,等比缩放(实用)
效果图1、首先写下html <div class="CardNoBox"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559715393055&di=f746e03b7251ef347f7f785e8ccb9538&...原创 2019-06-05 11:38:50 · 744 阅读 · 0 评论 -
h5可移动div draggable
1、引用jquery.min.js和jquery-ui.min.js <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"...原创 2019-05-10 17:54:57 · 1394 阅读 · 0 评论 -
window获取证书文件
1、下载前往官网下载App Uploader2、下载完软件 双击appuploader.exe3、输入苹果账号密码4、主页显示5、点击证书6、点击添加证书7、下载证书请看第五步...原创 2019-05-10 17:08:40 · 878 阅读 · 0 评论