小程序页面滚动条样式怎么设置？

　　小程序页面的滚动条可以让用户自由选择小程序功能，也就是说，能够一键抵达小程序页面。小程序页面滚动条样式是什么样子呢?要怎么开发小程序页面滚动条呢?一起来了解下吧。

　　以上就是小程序页面滚动条样式效果图。scroll-view是微信小程序滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!

　　首先需要为我们的小程序导入新的page页面,项目根目录打开app.json这个项目配置文件在里面的pages数组添加"pages/allJoke/allJoke"然后设置小程序底部导航在"tabBar"的列表项("list")添加:

　　如果大家要了解具体配置的含义可以参考小程序配置文档，这里不再赘述!

　　json配置页

　　接下来就是我们新建page的配置页了,在page目录下新建一个目录如alljoke,再在这个小程序目录下新建一个allJoke.json,复制下面代码到这个文件里面:

　　因为我们待会做下拉刷新时需要用到小程序提供的onPullDownRefresh方法,所以在配置项里面必须开启enablePullDownRefresh.另外一个选项是页顶标题大家随意设置也可以不用设置!

　　wxml视图页

　　轮到视图页了,同样的在alljoke目录下新建一个alljoke.wxml页面.wxml是小程序自创的一个视图页文档类型,其写法类似html,对于前端来说入门没有难度.需要详细了解的可以去阅读wxml文档.同样复制以下代码到alljoke.wxml里面

　　大家可以看到,我们的主角scroll-view也在这里隆重登场了!带过来的是一长串配置,就让我来为大家讲一下这些配置的作用吧!

　　用到的选项都列出来了,还有一点需要大家特别注意的:

　　使用竖向滚动条时必须为组件设置一个固定高度就是上面代码style里面设置的高!切记切记!

　　更多资料请阅读微信小程序scroll-view组件文档

　　wxss样式

　　同样在alljoke目录下面新建allJoke.wxss文件,小程序的样式和传统css差不多大家可以根据自己喜好自行设计,这里我简单做了一下样式比较丑大家将就着用吧.(题外话:受不了的自己动手丰衣足食)。

　　小程序文档中关于小程序页面滚动条样式的介绍

　　逻辑部分

　　来到最后也是最重要的逻辑部分了!老规矩alljoke目录下新建allJoke.js文件,先贴代码再慢慢讲解:

　　大家可以看到首先我们需要用page()函数注册页面，然后在data里面定义一些初始化数据.

　　onLoad是这个页面的生命周期函数,页面加载时会调用到它.

　　我们在页面加载时调用了自定义的getList函数.这个函数接收两个参数,第一个参数是要加载的页面,第二个参数是布尔值,用来判断是下拉刷新调用的这个函数,还是页面加载时调用的这个函数!

　　接下来onPullDownRefresh是小程序提供的下拉刷新函数,里面wx.showToast显示消息提示框,用来提示用户正在加载,loadMore是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!

　　scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.

　　参照这份资料，大家想要设置小程序页面滚动条样式就很简单了，对照步骤来操作就好。如果大家还有不了解的地方，或者想获取更多和小程序页面滚动条样式相关的资料，请关注微信小程序商店。

　　微信小程序禁用滚动条怎么操作?

　　微信小程序滚动条样式是怎样的?

　　微信小程序滚动条事件详解