微信小程序封装的几个常用功能

news/2024/7/20 4:11:02 标签: 说明, 文档, 插件, 微信, 小程序

页面中引用


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???'
}

持续更新中。。。。。


http://www.niftyadmin.cn/n/1240848.html

相关文章

利用java线程池技术,从MySQL往Elasticsearch导入海量数据

前言 近期接到一个任务&#xff0c;需要改造现有从mysql往Elasticsearch导入数据MTE(mysqlToEs)小工具&#xff0c;由于之前采用单线程导入&#xff0c;千亿数据需要两周左右的时间才能导入完成&#xff0c;导入效率非常低。所以楼主花了3天的时间&#xff0c;利用java线程池框…

电脑一年没用反应好慢_一次硬核到蛋碎的电脑故障排查经历

最近做着呢一个项目还有不到一周就要到ddl了副屏看着任务管理器&#xff0c;一切正常。突然&#xff01;CPU风扇发出的嘶吼&#xff0c;使用率暴增到100%&#xff0c;万元神机瞬间成为老年拖拉机&#xff0c;晃晃鼠标都会卡。&#xff1f;&#xff1f;等等吧&#xff0c;估计一…

可以实现微信小程序父子组件实时通信的插件

小程序在组件化开发的时候可能没有达到vue那样的便捷&#xff0c;例如跨组件状态同步等。 这个插件可以&#xff1a; 1.通过代理的方式&#xff0c;为小程序添加了跨组件实时通信&#xff1b;父子组件实时同步状态功能&#xff1b; 2.与vue相似的WatchStore功能&#xff0c;监…

基于分布式文件系统 FastDFS,利用 Zuul 网关实现滑块验证登录

点击上方蓝色“架构荟萃”关注我们&#xff0c;输入1024&#xff0c;你懂的 需求分析 现在滑块验证码在许多网站逐步流行起来&#xff0c;比如今日头条搜新闻时会提示滑块验证。 一方面&#xff0c;滑块验证对用户体验来说&#xff0c;比较新颖&#xff0c;操作简单。另一方面其…

推一款基于原生的小程序(埋点)插件:ani-weapp

推一款基于原生的小程序插件&#xff1a;ani-weapp 真的可以提供太多方便 用最简单的方式实现跨组件实时通信&#xff0c;路由拦截&#xff0c;页面监听&#xff0c;storage管理&#xff0c;防抖节流区域化 最最最重要的一点&#xff1a; 引入真的简单&#xff01;&#xff…

华为改密码让等24小时_华为手机锁屏密码忘记了如何解决 华为手机锁屏密码忘记了解决方法【介绍】...

华为、荣耀很多款机型都配备了指纹识别模块&#xff0c;长期用指纹来解锁&#xff0c;恐怕锁屏密码都忘记了吧&#xff1f;那么要怎么才能不用双清、不用还原系统&#xff0c;不丢失任何数据的情况下修改锁屏密码呢&#xff1f;下面小编来教大家如何用华为云服务的手机找回功能…

记一次 base64 图片存储引发后端查询接口性能断崖式下降问题全程解析

点击上方蓝色“架构荟萃”关注我们&#xff0c;输入1024&#xff0c;你懂的 问题回顾 同事小赵接到客户导入新闻数据要求&#xff0c;由客户提供新闻数据。于是&#xff0c;小赵通过 SQL 脚本入库新闻数据后&#xff0c;发现前台展示新闻特别慢。幸好是晚上凌晨 1 点&#xff0…

小程序canvas多行文本绘制

简单封装了一个微信小程序端绘制多行文本的功能 该功能是基于小程序canvas2D api进行绘制 可以实现&#xff1a; 自动绘制多行文本多行文本上下&#xff0c;左右&#xff0c;居中对齐功能设置最大行数&#xff0c;超出显示省略号设置最大宽度&#xff0c;超出自动换行行间距…