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

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

2019-04-28 15:40:02

阅读数 83

评论数 0

监听url变化

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

2019-04-26 17:21:39

阅读数 46

评论数 0

pc和移动端图片裁剪插件PhotoClip的踩坑

遇到的问题有,苹果手机上传的图片会自动旋转,安卓手机上要裁剪图片的无法进行缩放(github上查到原因iscroll插件的bug,替换到2.X版本可修复),已填坑 文章参考https://www.npmjs.com/package/photoclip 文件路径: http://imageso...

2019-04-22 15:12:03

阅读数 29

评论数 1

小程序canvas多行文字

效果: 使用: var that = this; const ctx = wx.createCanvasContext('savePic'); varcolorText = '肤色晶莹白皙,肤质细腻有透明感,适合搭配一些颜色明亮、轻快一点的色彩,营造轻盈感。'; that.draw_...

2019-04-11 15:24:27

阅读数 37

评论数 0

css 混合模式

css的混合模式类似ps里的正片叠底功能, 混合模式可以是图片和背景色混合,也可以是图片和图片混合,设置方式有两种background-blend-mode 和mix-blend-mode; 混合模式Multiply,screen,overlay,darken,lighten,color-do...

2019-03-12 16:08:55

阅读数 94

评论数 0

小程序多张图片下载问题

再网上找了小程序如何保存多张图片的方法,方法是for循环,配合使用回调函数callback,没有领悟到精髓,于是换了一种方式去实现,手机测试可以依次保存全部的图片。 思路: 使用wx.downloadFile()获取图片临时路径,wx.saveImageToPhotosAlbum()将改临时路...

2019-03-12 11:28:52

阅读数 267

评论数 0

微信小程序图片实现宽度100%,高度自适应

图片设置宽度 .img{ width:100%; } 给image增加属性mode="widthFix" <image class="img" src="/../../imag...

2019-03-07 20:46:36

阅读数 274

评论数 0

小程序瀑布流

上个写的有潜在bug,这个是修复此bug的。 思路: 布局依然是两列col1,col2,利用image标签的bindload函数,监听图片加载完成事件,加载完成后,转化改图片宽高,并且判断应该放到col1里还是col2里。并分别记录col1和col2的高度,以便下次判断。 效果图: h...

2019-03-01 11:03:12

阅读数 163

评论数 0

小程序流式布局

这只是一个取巧的方式来实现流式布局,有潜在bug,原理是布局分成两列,将要显示的数据也分成奇数列和偶数列,左侧展示偶数列数据,右侧展示奇数列数据。 潜在的bug是如果偶数列里的图片高度一直比奇数列的高,就会两列一列特别长的情况。 修复此潜在bug的博客链接https://blog.csdn.n...

2019-02-21 14:18:52

阅读数 203

评论数 0

小程序实现图片垂直居中,水平居中并且自适应宽高

效果如下图: html部分: <view class='imgCon'> <image src='{{goods.goodsPhotoUrl}}' bindload='imgLoad' style='width:{{wid...

2019-02-21 11:19:20

阅读数 265

评论数 0

小程序模仿抖音

效果图:   一开始思路是使用swiper来实现上下滑的效果,并且在swiper-item里嵌套video,但是一直有莫名其妙的问题,后来在小程序API文档里也看到video无法在swiper中使用。转换思路改成监听用户上下滑,view上绑定如下事件 bindtouchstart=&am...

2019-01-07 11:13:58

阅读数 1112

评论数 32

wx-charts图表滑动功能

插件下载地址已经api文档 https://github.com/xiaolin3303/wx-charts 要实现滑动页面部分需要绑定这三个事件bindtouchstart="touchstart" bindtouchmove="touc...

2018-12-12 11:18:24

阅读数 547

评论数 0

hammer实现拖拽旋转缩放功能

效果:   首先下载hammer插件http://hammerjs.github.io/ html部分: <script type="text/javascript" src="js/hammer.min.js...

2018-12-04 11:27:48

阅读数 339

评论数 0

360浏览器如何设置默认极速模式

360浏览器有双核模式,当是极速模式时,使用的内核是webkit,当是兼容模式时,取决于用户安装的ie浏览器的版本。即当安装的是ie版本是ie8的时候,这个时候360浏览器使用的是ie8内核。 使用meta标签 <meta name="renderer&a...

2018-11-26 17:42:53

阅读数 1585

评论数 0

小程序知识点总结

小程序组成部分:  一个入口文件:app.js  一个全局样式:app.wxss  一个全局配置:app.json  页面:pages下,每个页面再按文件夹划分,每个页面4个文件  视图:wxml,wxss  逻辑:js,json(页面配置,不是必须) 小程序原理和加载运行的过程: 小程序其实就...

2018-11-23 10:54:35

阅读数 76

评论数 0

下划线跟着走的导航效果

效果图: css部分: <style type="text/css">         .navCon{             min-width: 1200px;             height: 4...

2018-11-22 11:48:08

阅读数 232

评论数 0

parallax插件 视差效果实现

效果图: 首先引入需要的文件,parallax依赖于jQuery,parallax下载地址https://cdn.bootcss.com/parallax/2.1.3/jquery.parallax.js, 使用时可以参考此处的文档https://blog.csdn.net/qq_2638...

2018-11-22 11:34:48

阅读数 174

评论数 0

layui弹窗 iframe子页面弹窗如何覆盖父级页面

使用iframe进行嵌套页面,需求要在iframe内点击按钮,出现弹窗,但是实现中发现这个弹窗只覆盖了子页面,父页面内容仍可点击。 要实现覆盖整个页面,这里就需要用到layui中的方法,parent.layer.open({})。在父级页面打开弹出层。 此处显示的是加载动画,效果如下图: ...

2018-11-09 14:38:01

阅读数 313

评论数 0

小程序自定义相机

1.要求相机是圆形的,因为小程序调用原生相机,永远在屏幕最顶层,只能在camera标签里使用cover-view和cover-image标签,用一张图片盖在相机上,效果如下图: <!-- 调用摄像头的组件--> <view ...

2018-10-29 17:39:05

阅读数 1305

评论数 1

下程序input框letter-spacing失效,模拟实现

要实现这样的效果,但是input下的letter-spacing不起作用,只能模拟实现。 参考文章https://blog.csdn.net/luoyumeiluoyumei/article/details/81509694   html部分: <!--此处inp...

2018-08-21 15:23:39

阅读数 437

评论数 0

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