微信小程序中的wxs模块怎么用
这篇文章将为大家详细讲解有关微信小程序中的wxs模块怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联服务项目包括若羌网站建设、若羌网站制作、若羌网页制作以及若羌网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,若羌网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到若羌省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
WXS的使用
wxs是专门用于wxml页面的,它实现的是在视图层调用函数的功能
调用方式
虽然在微信文档中有说明,wxs是小程序的一套脚本语言,有自己的语法,但是大部分语法还是和js区别不大,有兴趣的可以自行翻看文档。微信小程序中提供了两种调用方式,这里不做过多赘述,直接贴代码
wxml:
主页 //新建index.wxs文件,在wxs标签中自定义路径引入,IndexWxs为自定义的module名
\
wxs:
var x = 0,y = 0; //viewData 使用小程序获取节点信息的方法,通过data-传入 var viewData = { height: 0,//滑块的宽高 width: 0, windowHeight: 0,//屏幕的宽高 windowWidth: 0 } var eventInstance = null module.exports = { //触摸开始 touchStartByBlock: function (event) { eventInstance = event;// event.instance为组件实例 var setViewData = event.currentTarget.dataset//获取data-传入的值 if (setViewData && setViewData.edge && setViewData.edge.windowHeight) { viewData = setViewData.edge } x = event.changedTouches[0].clientX - viewData.width/2//滑动过程中保持手指在模块中心位置 y = event.changedTouches[0].clientY - viewData.height/2 }, //触摸移动中,可以给x,y写一些边界值判断,防止滑块越界,此处不做展示 touchMoveByBlock: function (event) { x = event.changedTouches[0].clientX - viewData.width/2 y = event.changedTouches[0].clientY - viewData.height/2 event.instance.setStyle({//使用setStyle设置的样式权重比wxml设置的样式高 transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串 }) }, //松开手指,触摸结束时 touchEndByBlock: function (event) { //吸边处理,判断当前手指位置在屏幕的哪一边 x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0; y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y event.instance.setStyle({ transform: 'translate('+x+'px'+','+y+'px)', }) }, //当props的monitor数据发生变化的时候触发该方法,会自动传入monitor当前值,一些业务逻辑可以在此处处理 chooseShow: function (monitor) { console.log('监听到更新,monitor=',monitor); } }
关于“微信小程序中的wxs模块怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站栏目:微信小程序中的wxs模块怎么用
浏览地址:http://cdiso.cn/article/jdohep.html