在工坊的一周学习结束,受益颇深,下面分享一个初学者比较感兴趣且实用的知识点。
scroll-view:
可滚动视图区域;这是官方文档组件中的一个视图容器组件,它的用处很广泛,我们可以利用它来制作许多有趣的界面。
在官方文档中我们可以查看它的属性及注意事项,它的用法相对不难,只要你能想到它的工作原理即可。
这个组件在创作滚动视图区域的情况下,还可以实现区域内的锚点跳转,属性也非常丰富,下面我们通过实例来更清楚的了解它的使用。
实例演示-----》
1、首先我们需要创建组件
上方是html代码结构,我没有使用列表渲染来构建页面,只为了让初学者能深刻的理解。
下面我来解析下代码含义
**scroll-into-view:类似与HTML<a标签中中的锚点属性,跳转到对应的id,想要实现区域内跳转,我们必须要知道跳转到哪。
scroll-y:开始纵向滚动,它也可以开启横向scroll-x。
scroll-with-animation:滚动时的过渡效果,它是布尔值。
关于scroll-view的其他属性值在此酒不多做赘述了,大家可以查阅官方文档。
scroll-view标签中包含了三个view标签,它们就相当于多个item,一会儿我们将通过锚点来直接访问到对应的item。
下面的list《view标签中包含三个item标签,它们相当于触发跳转事件的按钮,在上面我们通过bindtap来绑定跳转事件的函数,通过data-key来让计算机知道我们要跳到哪去,也就是传一个参数。
2、css页面
我们需要设置好样式来达到演示效果,值得注意的是必须要构建出scroll-view的区域,不然一切的努力都是白费。
页面样式如下所示
右侧就是我们之前创建好的导航按钮,以此来跳转到对应的item。
3、一切准备就绪,我们还差一步,就是使scroll-into-view的值实时更新,来跳转到对应的页面,下面看图
在page是小程序页面的配置对象,详见官方文档,在page中有一个data对象,负责绑定页面数据,下面的click函数就是我们在list《view标签中三个item《view绑定的单击函数,单击触发,通过标签中data-传来数值,在函数中获取后,我们通过setData来动态的给toid赋值,这样我们就可以访问到对应的item了。
实际演示
点击bbbb后页面跳转至bbbb-item上,整个过程并不复杂,学习起来也非常简单。