微信小程序实现wxml视图向js传递参数的方法(点击view带参数进入js)

JavaScript016

微信小程序实现wxml视图向js传递参数的方法(点击view带参数进入js),第1张

一:url带参数传递

与前端语言一样,小程序页面间的传递可以通过在路由url后接参数,路由的同时会将参数一并传递到新的页面。

index.wxml:

效果图:

二:将值存入全局变量

我们同样可以将需要的值存入全局变量中,在需要的地方直接引用就好了。

需要用到全局变量时记得要先获取应用实例: const app = getApp()

**三, 用event传值

JS文件

多级联动菜单在许多的筛选场景应用十分广泛。

先看看效果图:

menu.wxml

menu.wxss

menu.jsp

menu.wxss

menu.js

menu.wxml

menu.wxss

menu.js

这里主要针对一个菜单栏进行详细讲解,其余两个原理相同。

游戏

menu.wxml

这里推荐大家使用 <scroll-view></scroll-view> 组件,这样超过限定的高度的话,就可以在内部产生滚动条,整体布局不会乱。使用 <scroll></scroll> 组件的时候,记得要开启滚动的方向(scroll-y表示纵向,scroll-x表示横向),这些属性默认是关闭的。

menu.wxss

注意:使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height。

menu.js

menu.js部分主要的难点就是wxml和js之间的数据交互,这里很容易弄晕,尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。

最后给大家提供该项目的github项目,直接抓下来就可以打开使用,只需对显示的数据进行修改即可。