首先,我现在想要做的事情是点击切换界面(竖版的tab):
大家看到的Mon、Tue等文字,被我放在了一个view标签之中,这个时候出现了一个问题,当我点击这个view的时候,点击事件失效了,那么我们来看一下代码:
js代码:
这里的js代码意思是,当点击事件发生的时候,将没发生点击事件前的index的值(currentDaysIndex的值)变为发生点击事件的源头的index值。
按理说这样的操作时没毛病的,那么我们再来看一下我的错误信息咯:
这里能看得到,在我点击文字view时,报出的错误是VM2121:1 Setting data field “currentDaysIndex” to undefined is invalid. 说明在js的点击事件函数中,没有取到当前的index导致无法赋予给我currentDaysIndex正确的index,之后系统给赋予了一个值undefined。
那么这个时候我就到我的wxml文件中重新找问题,并且和我之前写过的tab导航进行对比,随后我添加了一个data-index=’{{index}}’
问题,就解决啦
console面板上也没有报错啦
*那么我当然不能就这样改好了就算了,为什么会出现这个错误呢,是因为没弄清楚,或者说根本不知道传值是怎么肥四,所以,下面还得来说一说利用data-这种传值方式。
data-* 属性可为任何类型,与HTML5的data-* 相同,可用来为组件设置任意的自定义属性值,当组件上绑定的时间触发时,这些自定义属性将作为参数发给事件处理函数(在wxml文件里定义data-*,当我们触发其对应的事件后,data-*的值会发给写在js文件里对应的事件处理函数),在事件处理函数中可通过传入参数对象的currentTarget.dataset方式来获取自定义属性值。
以我的代码为例:
利用检查工具,这里可以看到,我定义的data-index的被写在wxml文件之中(data-后面的那个名字可以随便起,data-小王八也不是不行啊嘻嘻嘻),那么我们来看一下,我现在的选中的是,data-index为3的view,现在我们来点击一下data-index为5的view
看一下console面板是怎么给出的:
那么这个数据是怎么传递的呢?就是我们上面说到的data-*的用法咯,在js文件中利用currentTarget.dataset完成的鸭
把这些都弄清楚真的太开心了,嘻嘻嘻,希望能帮到大家。写的虽然很凌乱,但是我会继续进步的。
另:今天听了一首尚东峰的歌,名字叫《生活又不是热血动漫》,好听,推荐给大家。借用里面一句话,“生活又不是热血动漫,你有没有主角光环”,既然大家都没有主角光环,何不做彼此的配角,让生活这出戏演的更出彩呢,好好加油吧。