全栈工程师之路-中级篇之小程序开发-第三章第一节页面跳转及参数传递，跳转到更多页面

继上次教程结束之后，我们的小程序已经完成到如下程度了。

如果你是一个零基础的开发，只要跟着这个教程一步一步完成的，你就能完成这样的界面优美是不是很容易啊。



但是，完成前两章，我们只涉及到页面的编写，很少涉及到页面的功能，那么这一章，我们的主要任务就是编写一些简单的页面逻辑。



我们要实现的是点击上图中的更多，跳转到查看更多页面。

首先我们还是先创建查看更多页面，在json文件中，直接添加pages/moviemore/moviemore保存，自动创建相关文件。

然后为什么这个绑定事件要特意拿出来讲呢。

因为我们的首页，是使用了movielist模板，导入界面的，但是模板并没有自己的js文件，所以这个逻辑事件要写在调用模板的那个页面的逻辑文件中，即js文件。简单的说就是，小程序里面的模板的概念，只是简单的帮你复制了一下而已，你在哪里调用模板，就相当于在这个地方粘贴了一份样式文件而已。

理解了这一点，那我们做相关逻辑操作就简单了很多了。

不管你的界面绑定了多少个模板文件，所有的逻辑都是在那个页面里面编写的。

我们先修改一下，movielist模板



这里我们给包含“更多”的一整个条绑定了点击事件，并且绑定了数据movielist.url

然后，我们需要构造这个url数据，就跟我们构造movielist.title数据一样。

所以我们修改util.js(获取数据的方法移动到了这个文件了）



最后我们在index.js中编写goToMoreMovie方法，

goToMoreMovie:function(event){

console.log(event);

}

我们先编写这个数据，然后在日志中打印，这个事件。



查看这个event对象，我们就能找到我们刚才绑定的data-movie-url，使用-连接的对象名，最终会使用驼峰重命名。即图中的movieUrl。

这里有另一个问题，我们在个人中心页面，也是用了movielist模板，那我们在那个页面的点击更多，跳转到查看更多页面，是不是也要编写一模一样的代码呢？答案是：是的，小程序里面的模板，只支持页面的封装，不支持逻辑封装。

最后，我们修改index中的goToMoreMovie方法。



保存运行，点击更多。页面跳转到了查看更多页面。



点击“返回”又回到了，首页。

然后我们在moviemore.js的onload函数中，增加console.log(options)



在调制的console中查看。



所以我们只要在onload函数中取到options.url就可以取到我们从movielist传递过来的参数了。

然后调用我们封装好的方法，获取更多的数据。

由于篇幅原因，这节课到这里结束了，下一节课，我们讲解查看更多页面，和拖动加载更多的方法。

源代码：百度云 链接：http://pan.baidu.com/s/1slVvd4x 密码：my71

这节课的内容就到这里结束了。

感谢您的阅读。

我是莽夫，希望你开心。

如果你觉得本文对你有帮助，请扫描文末二维码，支持博主原创。

希望大家关注我的个人公众号ionic_