自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(161)
  • 收藏
  • 关注

原创 小程序camera组件设置前前置摄像头无效

定位到低端机上使用resolution="high"时会出现无法使用前置摄像头的问题,低端机可以先将resolution值设为medium来过渡一段时间<camerawx:if="{{cameraStatus}}"class='camera'style="width:100%;height:{{caremaHeight}}px;"device-position="front"flash="off"binderror="error"resolution='medium'>&lt...

2021-04-26 14:12:38 1663

原创 vue的picker插件

效果图:github地址:https://github.com/naihe138/vue-picker项目下载下来之后,执行yarn,yarn run rollup,yarn run build使用方法:普通网页开发直接复制项目下的lib/vue-picker.js文件即可直接使用<scriptsrc="../../static/js/utils/vuePicker/vue-picker.js"type="text/javascript"></scri...

2021-04-13 15:58:42 1919

原创 vue的日历插件vue-hash-calendar

效果图:vue-hash-calendar的github地址https://github.com/TangSY/vue-hash-calendarcdn方式引入:js CDN:https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.umd.min.jscss CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/l

2021-04-13 15:22:55 2722

原创 vue中按钮点击上传图片并预览

html部分:<inputtype="file"ref="filElem"class="upImage"accept="image/*"@change="onFileChange"/><divv-if="!pic" @click="uppic">上传照片</div><divv-elseclass="haspic"@click="uppic"><img:src="pic"/></d...

2021-03-29 15:36:31 727

原创 webview内嵌h5怎么跳转到指定的小程序界面

先引入微信sdk:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6<script type="text/javascript" src="/js/jweixin-1.3.2.js"></script&

2020-11-23 17:40:19 3362 4

原创 小程序webview内嵌H5

html部分:<web-viewsrc="{{url}}"></web-view>js部分: /** * 页面的初始数据 */ data: { url:'', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { let that = this; console.info("options",options) let id = opt.

2020-11-23 15:05:41 734

原创 小程序 摄像头二次授权

html:<camerawx:if="{{cameraStatus}}"class='camera'style="width:100%;height:{{caremaHeight}}px;"device-position="front"flash="off"binderror="error"></camera><!-- start 拒绝授权 --><view class="mask {{openSetingStatus}}"> &...

2020-11-19 11:41:03 1592

原创 小程序canvas多行文本(可以兼容英文)

效果图:/***【drawTxt】canvas绘制多行文本*【TODO:中英混排且考虑单词截断...】**@param{*}context绘制上下文环境【必传】*@param{*}text文本内容*@param{*}broken单词是否截断显示【true如果不考虑英文单词的完整性适用于所有情况】【false考虑英文单词的完整性仅适用于纯英文】*@param{*}fillStyle文本颜色...

2020-10-10 18:03:19 268

转载 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值。 1 2 3 4 5 6 7 8 required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) date(日期) identity(身份证) 自定义值 同时支持多条规则的验证,格式:lay-verify=”验证A|验证B”

2020-10-10 15:04:00 3223

原创 vue中使用rem布局

转自https://www.cnblogs.com/xiaoxiaoxun/p/11147097.html使用的是vue-cli4方式一:在public下的index.html页面中添加如下jsfnResize();window.onresize = function () { fnResize();}function fnResize() { var deviceWidth = document.documentElement.clientWidth || window.i

2020-07-29 20:55:59 6929 1

原创 layui 隐藏table的某一列

html部分:<table lay-filter="goods-table" id="goods-table" class="table-list my-table-list" cellspacing="0" cellpadding="0" style="display: none;"> <thead> <tr> <th lay-data...

2020-07-14 10:16:38 2747 1

原创 art.dialog窗体之间传值

父页面//添加商品var data;function changeGoods(index){ var brandId=$("#brandId").val(); parent.art.dialog.open('/replenishment/toAddGoods', { title: '选择商品', width:1200, height:600, ...

2020-07-09 10:37:26 1037

原创 小程序自定义导航栏

记录下大神写的导航栏组件源自:https://juejin.im/post/5d557e2e5188255af1619716小程序改组件的下载链接:https://github.com/lingxiaoyi/miniprograms-navigation-bar

2020-07-01 15:30:15 186

原创 layui下的table获取选中行数据

静态html:<table lay-filter="goods-table" id="goods-table" class="table-list my-table-list" cellspacing="0" cellpadding="0" style="display: none;"> <thead> <tr> <th lay-data...

2020-06-30 16:21:00 5401

原创 flex的一种常用布局实现

1.有些页面的内容较少,撑不起整个屏幕,结果底部内容显示在了屏幕中间位置。2.中间部分实现圣杯布局效果图:代码:主要使用了flex:1;<html><head> <meta charset="utf-8"/> <title>内容过少时,底部内容不在浏览器最下方</title> <style type="text/css"> *{ margin:0p...

2020-06-16 17:18:17 389

原创 css全屏变灰色(特殊节日使用)

效果图:使用滤镜filter的grayscale函数。<style>.filter { -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter: grayscale(100%); /*opera*/ filter: grayscale(100%);...

2020-06-16 17:10:55 809

原创 vue中点击按钮实现复制 vue-clipboard2

npm install --save vue-clipboard2首先先安装并引入:importVuefrom'vue'importVueClipboardfrom'vue-clipboard2';//引入复制功能插件Vue.use(VueClipboard);html部分:<inputv-model="shareUrl"disabled="disabled"><buttontype="button"v-clipboard:copy="s...

2020-06-12 10:48:01 422

原创 vue中生成二维码

先安装插件:npm install --s qrcode引入插件:importQRCodefrom"qrcode";//引入生成二维码插件页面中canvas用来显示二维码<canvasid="QRCode"></canvas>触发按钮<el-buttonsize="mini"@click="share(scope.$index,scope.row)">分享文章</el-button>data中加入生成二维码的ur...

2020-06-12 10:35:57 584

原创 小程序实现瀑布流(无tab)

效果图:html部分:<!--pages/waterfall/waterfall.wxml--><block wx:for="{{imagesList}}"><image src='{{item.pic}}' data-id='{{item.id}}' class='hide' bindload='reserveimg'></image></block><scroll-view style="height:{{sc

2020-06-11 17:17:15 776 6

原创 ios下text-align:justify文本两端对齐失效

text-align: justify在当文案只有一行的时候是不会生效的。解决方案是用text-align-last: justify来修复text-align: justify对最后一行不起作用的问题。Android还是有一定的支持度的,但是ios就惨了,完全不支持,所以只能改。分析text-align: justify不生效的原因就是文字在最后一行,所以可以再想要两端对齐的文字前后分别加一个标签,然后把文字挤在不是最后一行的位置上。.content { width: 100px;/..

2020-06-10 18:59:34 3049

原创 H5页面监听长按事件

H5页面监听长按事件 var timeOutEvent; $(document).on("touchstart","body img",function(e){ var that = this; timeOutEvent = setTimeout("longPress()",500);//500设置时间 picUrl ...

2020-05-19 17:43:50 6844

原创 ios下点击不起作用

给这个元素增加一个属性cursor: pointer;

2020-05-19 17:36:10 140

原创 h5判断用户是否安装某个app,来调起app活下载app

h5在浏览器中无法判断出用户是否安装某个app,只是如果用户安装了这个APP调起app的时候,会使页面失去焦点在微信里无法调起app,所以在微信里添加一个提示让用户在浏览器里打开。$(".goBuy").click(function(){//判断微信打开给出提示弹窗,浏览器打开的话,已安装app打开app,没有安装跳转到下载地址checkOutApp();...

2020-03-12 18:03:45 5039

原创 clipboard复制功能,实现静态复制和动态复制

引入jQuery和clipboard文件<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js">&...

2020-03-12 17:54:54 3254

原创 元素使用display: inline-block;后会有间隙的问题

元素使用display: inline-block;后,总是和其他元素出现间隙,其实是fontsize惹的祸,将父元素的font-size:0px,就可以解决

2020-03-12 17:22:46 256

原创 vue页面内部定位到锚点位置

上个文章写了跨页面的锚点定位,锚点的页面是在mounted里调用的定位到锚点位置,只有新打开此页面时才会执行mounted,所以当前页面内进行点击定位到锚点位置不起作用,解决方法在main.js里的watch里一直监听着URL是否发生变化,如果URL变化就执行锚点定位方法。效果:在mian.js中添加import{goAnchor,GetQueryString}from'.....

2019-11-20 16:29:36 12028

原创 vue跨页面定位到锚点位置

效果:header页面:<a:href="'#/about?maodian=gsjj'">公司介绍</a><a:href="'#/about?maodian=fzlc'">发展历程</a><a:href="'#/about?maodian=ryzz'">荣誉资质</a><a:href="...

2019-11-20 16:19:19 2886 8

原创 vue监听滚动事件 实现元素吸顶

添加滚动监听事件:mounted () { window.addEventListener('scroll', this.handleScroll)},页面销毁需要取消监听:destroyed(){window.removeEventListener('scroll',this.handleScroll)}使用:<template>...

2019-11-18 17:17:19 372

原创 vue 实现数字滚动增加效果

参考:http://panjiachen.github.io/countTo/demo/效果:使用vue-countTo插件安装:npm install vue-count-to使用:<template><countToref='example':startVal='startVal':endVal='endVal':duration='200...

2019-11-18 11:56:20 2410

原创 vue引入bootstrap报错找不到模块modules

参考文档:https://segmentfault.com/a/1190000015765805要使用bootstrap要先分两步,第一步:引入jQuery第二步:再引入bootstrap1、建立一个vue工程。2、使用命令npm install jquery --save-dev 引入jquery。3、在webpack.base.conf.js中添加如下内容:var...

2019-11-06 17:55:11 6787 4

原创 小程序实现标尺滑动

效果图:html部分:<!--pages/test-rules/test-rules.wxml--><view><view class="ageCon"><view class="title">年龄</view><view class="ageOut"><view class="hr"&g...

2019-10-28 15:37:20 1575 1

原创 layui根据条件修改表格固定行的颜色

当按钮样式存在“noedit”时,该行变灰色var data={ table :{ id:'userlist-table', options:{ done:function(res,curr,count){ res.data.forEach(functio...

2019-09-09 16:05:11 2685

原创 小程序富文本WxParse插件

参考https://blog.csdn.net/loveyoulouyou/article/details/83413628下载WxParse插件,插件地址https://github.com/icindy/wxParsecss部分:@import "../../utils/wxParse/wxParse.wxss";html部分:<import src="../../u...

2019-09-09 15:58:28 365

原创 小程序canvas画虚线圆

效果:封装:/*** 画虚线园* cxt_arc 画布* thex 画的x坐标* they 画的y坐标* raduis 圆半径* space 虚线的间隔 默认值 2 * Math.PI / 100 即一百空白点*/drawDashCircle: function (cxt_arc, thex, they, raduis, space) {space ...

2019-07-09 09:59:01 1893 2

原创 ios系统input光标错位

如图:当浮层是固定定位fixed的时候,ios系统上,input输入框的光标会有错位现象,如上图目前找到的解决方法是将fixed改为absolute定位。

2019-06-18 17:08:52 2580

原创 翻牌动画

效果如下(可兼容移动端):css部分:<style type="text/css">*, *:before, *:after { box-sizing: border-box;}html { font-size: 18px; line-height: 1.5; font-weight: 300; color: #333; font-famil...

2019-06-18 10:35:04 1091

原创 小程序 获取页面滚动的高度

wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...

2019-05-27 16:33:12 8584 1

原创 layui排序后table样式丢失

table.on('sort(goods-table2)', function(obj){ //注:tool是工具条事件名,goods-table2是table原始容器的属性 lay-filter="对应的值" $(".layui-table-main .layui-table tbody tr td").css("height","120px"); ...

2019-05-24 16:00:34 2157 1

原创 小程序input输入框键盘弹出使得布局上移问题

注意点:1.style='bottom:{{inputBottom}}px'单位用px2.input的 adjust-position='{{false}}'要用falsehtml部分:<!-- start 输入框 --><view class='inputBottom' style='bottom:{{inputBottom}}px'><in...

2019-04-28 15:40:02 13385 1

原创 监听url变化

js部分:<script>var lasturl=window.location.href;function isHashChanged(){ var cururl=window.location.href; if(lasturl ==cururl ){ return false; }return true;}function hashCh...

2019-04-26 17:21:39 2817

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除