- 博客(161)
- 收藏
- 关注
RSS订阅原创 小程序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'><...
2021-04-26 14:12:38
1953
原创 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
2100
原创 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
2951
原创 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
816
原创 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
3453
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
788
原创 小程序 摄像头二次授权
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
1699
原创 小程序canvas多行文本（可以兼容英文）
效果图：/***【drawTxt】canvas绘制多行文本*【TODO:中英混排且考虑单词截断...】**@param{*}context绘制上下文环境【必传】*@param{*}text文本内容*@param{*}broken单词是否截断显示【true如果不考虑英文单词的完整性适用于所有情况】【false考虑英文单词的完整性仅适用于纯英文】*@param{*}fillStyle文本颜色...
2020-10-10 18:03:19
352
转载 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
3292
原创 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
7157
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
2863
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
1128
原创 小程序自定义导航栏
记录下大神写的导航栏组件源自：https://juejin.im/post/5d557e2e5188255af1619716小程序改组件的下载链接：https://github.com/lingxiaoyi/miniprograms-navigation-bar
2020-07-01 15:30:15
244
原创 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
5754
原创 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
456
原创 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
885
原创 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
476
原创 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
672
原创 小程序实现瀑布流（无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
849
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
3366
原创 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
7126
原创 h5判断用户是否安装某个app，来调起app活下载app
h5在浏览器中无法判断出用户是否安装某个app，只是如果用户安装了这个APP调起app的时候，会使页面失去焦点在微信里无法调起app，所以在微信里添加一个提示让用户在浏览器里打开。$(".goBuy").click(function(){//判断微信打开给出提示弹窗，浏览器打开的话，已安装app打开app，没有安装跳转到下载地址checkOutApp();...
2020-03-12 18:03:45
5394
原创 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
3379
原创 元素使用display: inline-block；后会有间隙的问题
元素使用display: inline-block;后，总是和其他元素出现间隙，其实是fontsize惹的祸，将父元素的font-size:0px,就可以解决
2020-03-12 17:22:46
293
原创 vue页面内部定位到锚点位置
上个文章写了跨页面的锚点定位，锚点的页面是在mounted里调用的定位到锚点位置，只有新打开此页面时才会执行mounted，所以当前页面内进行点击定位到锚点位置不起作用，解决方法在main.js里的watch里一直监听着URL是否发生变化，如果URL变化就执行锚点定位方法。效果：在mian.js中添加import{goAnchor,GetQueryString}from'.....
2019-11-20 16:29:36
12229
原创 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
2998
8
原创 vue监听滚动事件 实现元素吸顶
添加滚动监听事件：mounted () { window.addEventListener('scroll', this.handleScroll)},页面销毁需要取消监听：destroyed(){window.removeEventListener('scroll',this.handleScroll)}使用：<template>...
2019-11-18 17:17:19
443
原创 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
2496
原创 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
7128
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
1727
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
2799
原创 小程序富文本WxParse插件
参考https://blog.youkuaiyun.com/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
409
原创 小程序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
1991
2
原创 ios系统input光标错位
如图：当浮层是固定定位fixed的时候，ios系统上，input输入框的光标会有错位现象，如上图目前找到的解决方法是将fixed改为absolute定位。
2019-06-18 17:08:52
2756
原创 翻牌动画
效果如下(可兼容移动端)：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
1176
原创 小程序 获取页面滚动的高度
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...
2019-05-27 16:33:12
8973
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
2293
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
13631
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
3068
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人