微信小程序封装的几个常用功能
页面中引用
var animate = require('../../utils/animate.js');show(this,param,time)
显示
*参数1：this；
*参数2 param：定义的动画名param
参数3 time:动画执行时间 。 默认值400ms
wxml中调用方法：animation=’{{param}}’
*使用的元素需要先用hide方法隐藏
<view animation='{{param}}'></view>
onReady:function(){let that=this;animate.hide(that,that.data.param,1);//使用的元素需要先用hide方法隐藏 setTimeout(function(){animate.hide(that,that.data.param,500);},500)
}
hide(this,param,time)
隐藏
*参数1：this；
*参数2 param：定义的动画名param
参数3 time:动画执行时间 。 默认值400ms
wxml中调用方法：animation=’{{param}}’
<view animation='{{param}}'></view>
onReady:function(){let that=this;animate.hide(that,'pram',1);//使用的元素需要先用hide方法隐藏
}
isMove(e,direction,callback)
触摸方向事件
*参数1 e：滑动钩子的e对象；
*参数2 direction：往哪个方向滑动触发(‘left’,‘right’,‘top’,‘bottom’)；
参数3:回调
<view bind:touchmove="isMove"></view>
isMove:function(e){let that=this;animate.isMove(e,'left',()=>{//如果向左滑动则触发},this)
}
getHeight(id,callback)
获取节点高度
*参数1 id：节点id；
*参数2 callback：回调 返回目标left,right,top,bottom属性；
<view id='ddd'></view>
onReady:function(){animate.getHeight('ddd',(res)=>{consonle.log(res)})
}
getNode(name,arr,callback)
获取节点基本属性
*参数1 name：节点名 ‘#ddd’/’.aaa’；
参数2 arr：目前提供的基本属性有：
backgroundColor，color，fontSize，height，margin，padding，scrollHeight，scrollLeft，scrollTop，scrollWidth，width；如果想获取的属性这里没有可以填写在arr里
*参数3：返回基本属性
<view id='ddd'></view>
onReady:function(){animate.getNode('#ddd',['border'],(res)=>{consonle.log(res)})
}
getWxImg(src,callback)
网络图片本地化
*参数1 src:图片网络路径；
*参数2 callback：回调 返回图片基本信息
onReady:function(){animate.getWxImg('https://pic2.zhimg.com/50/v2-88fd57c6464e1a313d5c3337aba07458_hd.jpg',(res)=>{consonle.log(res)})
}
strSm(str,len)
分割字符串 将字符串分割为字符长度为len的数组
*参数1 str:需要分割的字符串；
参数2 len：在长度大于多少时开始分割 默认：1
onReady:function(){let str='adadaadaddad'let newStr=animate.strSm(str,5);//[adada,adadd,ad]
}
fontEllipsis(str,len，end)
将多余文字显示为省略号
*参数1 str:需要处理的字符串；
参数2 len：在长度大于多少之后为省略号 默认为5
参数3 end:结尾显示内容 默认为‘…’
onReady:function(){let str='adadaadaddad'let newStr=animate.fontEllipsis(str,5,'???');//'adada???'
}
持续更新中。。。。。
微信小程序封装的几个常用功能相关推荐
- 微信小程序封装storage（含错误处理）
这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({key:"",success: function (res) {},fail(err ...
- 微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
- 微信小程序----封装request以及对接口进行模块化
微信小程序----封装request以及对接口进行模块化 1. 封装request:http.js export default function request(params) {return ne ...
- 微信小程序封装api请求步骤
小程序发起网络请求 需用到 wx.request() 废话不多说 直接开始封装 1.首先创建一个request文件夹里边创建一个api.js和request.js 2.封装的请求在request.js ...
- 【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二] <!--index.wxml--> <view><button style="margin-top: 300px;" ...
- 微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
- 在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能 前言 首先查看效果 一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
- 微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图 实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
- 微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
最新文章
- jetson nano 人脸
- AngularJS：在Windows上安装Yeoman
- reactjs render props向组件内部动态传入带内容的标签
- android系统相机自动录像,android 调用系统相机录像并保存
- 后疫情时代，华为云会议如何定义未来会议？
- Qt Qt5.15+Xcode12+BigSur macOS及iOS开发环境搭建
- 深圳市商务局2022年电子商务创新发展扶持计划跨境电商通关监管场所服务奖励项目申报指南
- Maven之（五）Maven仓库
- 虚拟机黑裙加载硬盘_适合练手，在虚拟机中安装黑群晖，想要组建NAS服务器的看这里...
- mysql怎么tonumber_orcale中的to_number方法使用
- 如何把桌面计算机和回收站隐藏,电脑回收站怎么隐藏图标,隐藏我的电脑和回收站...
- Docker Build Cache 缓存清理
- PHP 图片合成、仿微信群头像
- 教你DIY中文增强版Geexbox,且安装为硬盘版
- python图片旋转脚本_Python实现PS滤镜的旋转模糊功能示例
- HDOJ 4238 - Programming the EDSAC 阅读理解..高精度处理
- Frame skipped from debugging during step-in. VSCode调试无法定位其它库中代码的解决办法
- 祝读者朋友们新年快乐
- 用python做题——PythonChallenge-1
- Android App开发学习第十四天：RecyclerView的简单使用