本文将详细讲解如何在微信小程序中使用wxs模块。边肖觉得很实用，分享给大家参考。希望你看完这篇文章能有所收获。
00-1010WXS专门用于wxml页面，实现了在视图层调用函数的功能。
调用方式
虽然微信文档里说wxs是小程序的脚本语言，有自己的语法，但大部分语法和js没有太大区别，感兴趣的可以自己翻看文档。微信小程序提供两种调用方式，这里不赘述，直接粘贴代码即可。
wxml:
viewclass='main '
查看主页/视图
Wxsmall=' IndexWxs' src='。/index . wxs/
视角
Change:prop=' {{indexwxs。Chooseshow}}'//Change 3360prop起到类似于observe的监控作用。当道具中的数据属性更新时，会触发Change :prop的方法。
prop=' { { monitor } } '//数据属性
Data-nav height=' { { nav height } } '//您可以使用data-自定义传入属性。
数据边缘=“{ { EdgeDATa } }”
catch : touch start=' { { index wxs。touchstartyblock } } '//要调用wxs的方法，您需要使用{{}}
catch : touch move=“{ { indexwxs . touchmovebyblock } }”
catch : touchend=“{ { indexwxs . touchendbyblock } }”
/view
/view\
wxs:
varx=0，y=0；
//viewData使用applet获取节点信息，通过data-传入。
varviewData={ 0
高度：0，//滑块的宽度和高度
宽度：0，
窗口高度：0，///屏幕的宽度和高度
窗宽：0
}
vareventInstance=null
module . exports={ 0
//触摸开始
touchStartByBlock:function(事件){ 0
eventInstance=事件；//event.instance是一个组件实例。
Setviewdata=事件。currenttarget.dataset//Get数据-传入的值。
if(setviewcdatasetviewdata . edge setviewdata . edge . window height){ 0
视图数据=设置视图数据.边缘
}
X=事件。changedtouches。滑动过程中，clientx-viewdata.width/2//Keep将手指放在模块的中央。
y=event.changedTouches[0]。clientY-viewData.height/2
},
//在触摸移动过程中，可以为X和Y写一些边界值判断，防止滑块越界，这里就不展示了。
touchMoveByBlock:function(事件){ 0
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(事件){ 0
//边缘吸附处理，确定当前手指位置在屏幕的哪一侧。
x=viewData.windowWidth/2x？view data . window width-view data . width :0；
y=yview data . window height-view data . height？视图数据.窗口高度-视图数据.高度：y
event . instance . setstyle({ 0
transform:'translate(' x 'px '，' y 'px)'，
})
},
//道具的监控数据发生变化时触发此方法，会自动传入当前的监控值。这里可以处理一些业务逻辑。
选择显示：功能(监视器){ 0
Console.log ('monitor='，monitor)；
}
}这篇关于“如何在微信小程序中使用wxs模块”的文章就分享到这里了，希望
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/152578.html