小程序消除图片下边距的三个方法

代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-v

<!-- 小程序中图片默认宽度是320*240 mode="scaleToFill" 在图片宽高小于默认宽高的情况下 拉伸至100%,完全将图片显示出来 mode="aspectFill" 只有图片的短边会被100%显示出来,长的边会被截取 mode="aspectFit" 图片的长边会被100%显示出来 图片会完全显示出来 mode="widthFix" 宽度100% 高度自适应 mode="top"

小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的一小部分 假设设置 一个view的尺寸为宽为600rpx,高为600rpx,前边距为30rpx,后边距为30rpx,最终呈现结果是这样的 图一和图二     图三 这是将图片尺寸设置跟屏幕宽一样的尺寸,然后就没有之间的空白间隙了,所有得为图片加上空白间距 但这并不是想要的结果,其实边距指的是后面那张

1.实现点击头像按钮实现选择图片或者拍照,将图片重新设置成头像: //index.js //获取应用实例 var app = getApp() Page({ data: { motto: 'Hello World', userInfo: {}, avatarUrl:null }, //事件处理函数 bindViewTap: function() { var that = this // 选择图片和拍照 wx.chooseImage({ count: 1, // 默认9 sizeType: ['o

微信小程序的事件及生命周期 继续下节课,今天我们还是从四个方面来了解小程序: ●常用事件和事件冒泡 ●配置 ●app生命周期及app对象的使用 ●页面的生命周期 一.事件的绑定: 事件一方面可以理解成用户的行为,当用户对UI层做了某些操作时,程序可以捕捉到操作的类型.如:点击.长按.移动等.另一方面事件也是一种通讯方式,比如当程序运行时来电话.短信通知时会改变当前程序的生命周期.常用的事件类别主要有: ●点击事件:Tap ●长按事件:longTap ●触摸事件:touchstart.touche

前端图片剪切上传功能是常见的功能,在开发过程中,研发一个这样的功能要花的时间也会很多,现在把一个研发好了的图片剪切插件发出来.支持剪切和大小缩放. wxml 1 <!--图片展示 --> 2 <view bindtap='upEwm' data-which='1'> 3 <view>第一个图</view> 4 <image style='width:200rpx;height:200rpx;background-color:red' src='{{he

小程序中当rich-text中数据较多时就会出现溢出的现象 如下 此时的页面效果并不是很理想 此时我们可以在数据中给个div 加入  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;三个属性解决溢出问题 但这不是很好,如果数据从后台来上面方法就需要变通一下 如下 <rich-text nodes="<div style='overflow:hidden;white-space:nowrap;text-ove

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

对于微信小程序上传图片其实很麻烦的,每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数了.具体的实现方法来为大家分享一下.示例代码如下: wx.chooseImage({success: function(res) {var tempFilePaths = res.tempFilePathswx.uploadFile({url: 'http://example.weixin.qq.com/up