Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the wxs module in WeChat Mini Programs. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

The use of WXS

Wxs is dedicated to wxml pages and implements the function of calling functions at the view layer

Calling mode

Although it is stated in the Wechat documentation that wxs is a set of Mini Program scripting language and has its own syntax, most of the grammar is still not different from js, and those who are interested can flip through the document by themselves. WeChat Mini Programs provides two methods of calling. Don't go into too much detail here, just paste the code.

Wxml:

Home page / / create a new index.wxs file, introduce the custom path in the wxs tag, and IndexWxs is the custom module name

\

Wxs:

Var x = 0event y = 0rampact ViewData the method by which Mini Program is used to obtain node information. Pass var viewData = {height: 0 Legend / width-height of slider width: 0, windowHeight: 0Legend / screen width-height windowWidth: 0} var eventInstance = nullmodule.exports = {/ / Touch start touchStartByBlock: function (event) {eventInstance = event / / event.instance gets the value passed in by data- for component instance var setViewData = event.currentTarget.dataset// (setViewData & & setViewData.edge & & setViewData.edge.windowHeight) {viewData = setViewData.edge} x = event.changedTouches [0] .clientX-viewData.width/2// keeps your finger at the center of the module during sliding, y = event.changedTouches [0] .clientY-viewData.height/2}, / / touching and moving You can write some boundary value judgment to XBI y to prevent the slider from crossing the boundary. Do not show touchMoveByBlock: function (event) {x = event.changedTouches [0] .clientX-viewData.width/2 y = event.changedTouches [0] .clientY-viewData.height/2 event.instance.setStyle ({/ / the style weight set by setStyle is higher than that set by wxml transform: 'translate (' + Xerox styles) / / setStyle needs to use a string}), / / release your fingers TouchEndByBlock: function (event) {/ / draw edge processing at the end of the touch to determine which side of the screen the current finger position is on x = viewData.windowWidth/2

ViewData.windowHeight-viewData.height? ViewData.windowHeight-viewData.height: y event.instance.setStyle ({transform: 'translate,})}, / / when this method is triggered when the monitor data of props changes, the current value of monitor is automatically passed in, and some business logic can handle chooseShow: function (monitor) {console.log (' listening for updates, monitor=',monitor) here }} this is the end of the article on "how to use the wxs module in WeChat Mini Programs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.