这篇文章将为大家详细讲解有关微信小程序中的wxs模块怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
wxs是专门用于wxml页面的,它实现的是在视图层调用函数的功能
调用方式
虽然在微信文档中有说明,wxs是小程序的一套脚本语言,有自己的语法,但是大部分语法还是和js区别不大,有兴趣的可以自行翻看文档。微信小程序中提供了两种调用方式,这里不做过多赘述,直接贴代码
wxml:
<view class="main">
<view>主页</view>
<wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件,在wxs标签中自定义路径引入,IndexWxs为自定义的module名
<view
change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到类似observe的监听作用,当prop中的data属性有更新的时候,会触发change:prop的方法
prop="{{monitor}}" //data属性
data-navHeight="{{navHeight}}" //可以使用data-自定义传入属性
data-edge="{{edgeData}}"
catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要调用wxs的方法需使用{{ }}
catch:touchmove="{{IndexWxs.touchMoveByBlock}}"
catch:touchend="{{IndexWxs.touchEndByBlock}}">
</view>
</view>
\
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模块怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。