VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

本文主要介绍微信小程序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⇧</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.阿里分订单系统源代码下载

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 滚动-视图以完成列表页面的方法的详细说明(滚动-视图的用法)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!