滚动-视图以完成列表页面的方法的详细说明（滚动-视图的用法）

本文主要介绍微信小程序scroll-view实现的列表页面示例代码的相关信息。scroll-view组件介绍scroll-view是微信小程序提供的一个可滚动的视图组件，其主要功能可以用于手机经常看到的上拉加载。有需要的朋友可以参考一下。

scroll -视图组件介绍

Scroll-view是微信小程序提供的一个可滚动的视图组件，主要功能是做手机经常看到的上拉加载下拉刷新列表页面！我们以此为例来说明一下这个组件的用法吧！

为应用程序导入新页面页面。

首先，我们需要为我们的applet导入一个新的页面。打开项目根目录下的项目配置文件app.json，在里面的pages数组中添加“pages/allJoke/allJoke”，然后在“tabBar”中设置底部导航的列表项(“list”)添加:

{ & quot文本& quot:& quot列表“，& quotpagePath & quot:& quotpages/all joke/all joke & quot；，& quoticonPath & quot:& quotimages/note . png & quot；，& quot选择selectedIconPath & quot:& quotimages/notehl . png & quot；}，想知道具体配置的含义可以参考小程序配置文档，这里就不赘述了！

Json配置页面

接下来，我们将创建一个新的页面配置页面。我们将在Page目录下新建一个alljoke这样的目录，然后在这个目录下创建一个allJoke.json，并将下面的代码复制到这个文件中:

{ & quotnavigationBarTitleText & quot:& quot笑话集锦”，& quotenablePullDownRefresh & quot:true}因为我们在后面做下拉刷新的时候需要使用applet提供的onPullDownRefresh方法，所以必须在配置项中打开enablePullDownRefresh。还有一个选择就是随意设置页面顶部标题或者不设置！

Wxml查看页面

好了，轮到查看页面了。同样，创建一个新的alljoke。所有笑话目录中的wxml页面。wxml是小程序创建的视图页面文档类型，编写类似于html，前端上手并不难。如果您需要了解更多信息，可以阅读wxml文档。还将下面的代码复制到alljoke.wxml中。

& lt视图& gt& lt视图& gt& ltscroll -view class = & quot；滚动& quotscroll -top = & quot；{ { scrollTop } } & quotstyle = & quot高度:580px"scroll -y = & quot；true & quotbindscroll = & quotscrll & quotbindscrolltolower = & quotloadMore & quot& gt& ltview class = & quot阻止& quotwx:for = & quot；{ { listLi } } & quotwx:for -item = & quot；item & quot& gt& lttext & gt{ { item.text } } & lt/text & gt；& lt/view & gt；& lt/scroll -view & gt；& lt/view & gt；& ltview class = & quottop & quothidden = & quot{ { hidden } } & quotcatchtap = & quotgoTop & quot& gt⇧&lt；/view & gt；& lt/view & gt；大家可以看到，我们的主角scroll-view也在这里隆重登场了！我带来了一长串配置，我来给大家讲讲这些配置的功能吧！

配置项使用scroll-top来设置垂直滚动条的位置。请注意，如果设置值没有改变，组件将不会呈现！Scroll-y允许垂直滚动。列出了滚动到底部时触发的回调函数bindscrolltolower。还有一点需要特别注意:

使用垂直滚动条时，必须为组件设置一个固定的高度，就是上面代码样式中设置的高度！记住，记住！

更多信息请阅读微信小程序scroll -查看组件文档。

Wxss样式

同样，创建一个新的alljoke。ALLJOKE目录下的WXSS文件。小程序的风格类似于传统的css。可以根据自己的喜好自己设计。在这里，我只是把它变丑了，所以你会利用它。(题外话:受不了就自己做)

。block { border:8px solid # 71b 471；边距:20rpx 20rpx填充:10rpxbackground -颜色:# fffborder -半径:20rpxtext-align:居中；}.顶部{宽度:100rpx高度:100rpxline -高度:100rpxbackground -颜色:# fff位置:固定；底部:40rpx右:20rpxtext-align:居中；font -size:50 rpx；不透明度:. 8；边框-半径:50%；边框:1px solid # fff} applet文档中的样式介绍

逻辑部分

来到最后也是最重要的逻辑部分！照例在allJoke目录下新建一个allJoke.js文件，先粘贴代码再慢慢讲解:

Page({ data:{ listLi:[]，page:1，scrollTop:0，done: false，hidden: true }，onLoad:function(options){ this . getlist(1)；}，onpulldownresh:function(){ wx . show toast({ title:& amp；#39;正在加载&；#39;，图标:& amp#39;装载和运输。#39;});this.getList(1，true)；}、getList: function(page，stop pull){ var that = this wx . request({ URL:& amp；#39;https://wechat.sparklog.com/jokes&第39名；，数据:{ page: page，per:& amp；#39;20 & amp#39;}，方法:& amp#39;获取& amp#39;，success:function(RES){ if(page = = = 1){ that . setdata({ page:page+1，listLi: res.data，done:false })if(stop pull){ wx . stoppulldownresh()} } else { if(RES . data & lt；20){ that.setData({ page: page+1，list Li:that . data . list Li . concat(RES . data)，done:true }) } else { that . setdata({ page:page+1，list Li:that . data . list Li . concat(RES . data)} } }，})}，load more:function(){ var done = this . data . done；if(done){ return } else { wx . show toast({ title:& amp；#39;正在加载&；#39;，图标:& amp#39;装载和运输。#39;，时长:500 })；var page = this . data . page；this.getList(page) } }，scrll:function(e){ var scroll top = e . detail . scroll top if(scroll top & gt；600){ this.setData({ scrollTop: 1，hidden:false })} else { this . setdata({ scroll top:1，hidden:true })；}}，gotop:function(){ this . setdata({ scroll top:0，hidden: true}})你可以看到首先我们需要用page()函数注册页面，然后在数据中定义一些初始化数据。onLoad是这个页面的生命周期功能。它将在页面加载时被调用。当页面被加载时，我们调用定制的getList函数。这个函数接收两个参数，第一个参数是要加载的页面，第二个参数是布尔值，用来判断这个函数是下拉刷新调用的还是页面加载时调用的！接下来onPullDownRefresh是小程序提供的下拉刷新功能，其中wx.showToast显示消息提示框提醒用户正在加载，loadMore是滚动到底部触发的事件。该函数将检查是否所有列表项都已加载，如果所有列表项都已加载，它将返回。如果数据库中有列表项，将它们拉到底部以加载下一页！滚动时触发滚动功能。可以看出，该功能会判断滚动条位置是否大于600。如果它大于600，它将显示直接到底部的按钮。如果小于600，会隐藏直达顶部的按钮。同时，它会更新滚动条位置的参数。刚才我在讲wxml的时候说过，scroll-view组件在设置垂直滚动条位置的时候，如果参数相同，就不会重新渲染页面，这就是我们所利用的。如果我们要到达顶部，位置必须是' 0 '，滚动时会触发scrll函数。我们将位置信息设置为‘1’，因为滚动功能会反复触发，所以此时不会渲染页面。也就是说，由于位置设置参数都设置为‘1’不变，导致scroll-top设置项不作为goTop函数的直接top生效(将参数改为‘0’提供了机会)。最后是直接顶键的功能。可以看到，它把位置信息改为‘0’，参数改变scroll-top设置生效，页面直接到顶部。最后，它通过改变隐藏参数来隐藏自己(直接顶部按钮)!

结局

好了，通过以上步骤，我们终于实现了下拉刷新和上拉加载列表页面功能。从上面可以看出，微信提供的接口和api还是比较全面的，一般比原生的js实现更容易实现一个功能！

[相关建议]

1.特别推荐:下载php程序员工具箱V0.1版。

2.下载微信微信官方账号平台源代码

3.阿里分订单系统源代码下载

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：滚动-视图以完成列表页面的方法的详细说明（滚动-视图的用法） https://zhujicankao.com/115168.html