- 博客(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'><...
2021-04-26 14:12:38
1816
原创 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
2015
原创 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
2862
原创 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
772
原创 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
3404
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
747
原创 小程序 摄像头二次授权
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
1636
原创 小程序canvas多行文本(可以兼容英文)
效果图:/***【drawTxt】canvas绘制多行文本*【TODO:中英混排且考虑单词截断...】**@param{*}context绘制上下文环境【必传】*@param{*}text文本内容*@param{*}broken单词是否截断显示【true如果不考虑英文单词的完整性适用于所有情况】【false考虑英文单词的完整性仅适用于纯英文】*@param{*}fillStyle文本颜色...
2020-10-10 18:03:19
300
转载 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
3253
原创 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
7075
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
2803
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
1077
原创 小程序自定义导航栏
记录下大神写的导航栏组件源自:https://juejin.im/post/5d557e2e5188255af1619716小程序改组件的下载链接:https://github.com/lingxiaoyi/miniprograms-navigation-bar
2020-07-01 15:30:15
214
原创 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
5564
原创 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
411
原创 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
838
原创 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
439
原创 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
625
原创 小程序实现瀑布流(无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
807
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
3206
原创 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
6989
原创 h5判断用户是否安装某个app,来调起app活下载app
h5在浏览器中无法判断出用户是否安装某个app,只是如果用户安装了这个APP调起app的时候,会使页面失去焦点在微信里无法调起app,所以在微信里添加一个提示让用户在浏览器里打开。$(".goBuy").click(function(){//判断微信打开给出提示弹窗,浏览器打开的话,已安装app打开app,没有安装跳转到下载地址checkOutApp();...
2020-03-12 18:03:45
5225
原创 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
3318
原创 元素使用display: inline-block;后会有间隙的问题
元素使用display: inline-block;后,总是和其他元素出现间隙,其实是fontsize惹的祸,将父元素的font-size:0px,就可以解决
2020-03-12 17:22:46
268
原创 vue页面内部定位到锚点位置
上个文章写了跨页面的锚点定位,锚点的页面是在mounted里调用的定位到锚点位置,只有新打开此页面时才会执行mounted,所以当前页面内进行点击定位到锚点位置不起作用,解决方法在main.js里的watch里一直监听着URL是否发生变化,如果URL变化就执行锚点定位方法。效果:在mian.js中添加import{goAnchor,GetQueryString}from'.....
2019-11-20 16:29:36
12129
原创 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
2941
8
原创 vue监听滚动事件 实现元素吸顶
添加滚动监听事件:mounted () { window.addEventListener('scroll', this.handleScroll)},页面销毁需要取消监听:destroyed(){window.removeEventListener('scroll',this.handleScroll)}使用:<template>...
2019-11-18 17:17:19
410
原创 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
2449
原创 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
6984
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
1625
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
2755
原创 小程序富文本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
384
原创 小程序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
1936
2
原创 ios系统input光标错位
如图:当浮层是固定定位fixed的时候,ios系统上,input输入框的光标会有错位现象,如上图目前找到的解决方法是将fixed改为absolute定位。
2019-06-18 17:08:52
2672
原创 翻牌动画
效果如下(可兼容移动端):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
1134
原创 小程序 获取页面滚动的高度
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...
2019-05-27 16:33:12
8800
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
2232
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
13486
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
2965
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人