本文已参与「新人创作礼」活动.一起开启掘金创作之路。
顶部的滚动条
-
在我们浏览许多app时，经常会发现在app首页的顶部有滚动条的消息提示，而在实际开发中，uniapp的组件库中有一个uni-notice-bar组件，可以帮助我们实现顶部的滚动条。
-
我们只需要打开uni-app的官网，找到组件，扩展组件，uni-notice-bar通告栏，具体的链接：uniapp.dcloud.net.cn/component/u…
-
然后将图中的代码复制粘贴到HBuider中项目的index首页中，内容可以根据自己的需求更改。下面还有很多属性可以根据自己的需求添加或者删除
轮播图下面的九宫格
-
九宫格也是我们平时在使用app的时候经常会遇到的一个东西，uniapp也为我们提供了一个九宫格组件uni-grid，具体的链接： uniapp.dcloud.net.cn/component/u…
-
将组件中的代码复制粘贴后，我们需要根据自己的需求去改变我们九宫格的样式，如果想每列展示多个，可以修改column的值，这里我使用的是2行3列的宫格，所以具体的代码会不一样，我的代码如下：
- 每个宫格都可以跳转到其他页面，方便用户去查找具体的内容，所以我将grid-item绑定了跳转事件，然后在data中return了一些数据，并且每一个数据都有各自的图标和标题和页面路径，所以只需给一个grid-item绑定事件，然后v-for循环渲染data中的数据就行了，然后再在method方法中编写跳转功能，uni.navigateTo,每个宫格都将path参数传出来了，所以method中只需跳转到url就行了。
