scroll-view组件介绍

scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端经常会看到的上拉加载下拉刷新列表页!下面就以<摇出微笑>为例来讲解一下这个组件的使用吧!

为app导入新page页面

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

 {
  "text": "列表",
  "pagePath": "pages/allJoke/allJoke",
  "iconPath": "images/note.png",
  "selectedIconPath": "images/noteHL.png"
 },

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

json配置页

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

{
 "navigationBarTitleText": "笑话集锦",
 "enablePullDownRefresh": true
}

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

wxml视图页

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

<view>
 <view>
 <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll" bindscrolltolower="loadMore">
  <view class="block" wx:for="{{listLi}}" wx:for-item="item">
  <text>{{item.text}}</text>
  </view> 
 </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">⇧</view>
</view>

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

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

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

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

wxss样式

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

.block {
 border: 8px solid #71b471;
 margin: 20rpx 20rpx;
 padding: 10rpx;
 background-color: #fff;
 border-radius: 20rpx;
 text-align: center;
}
.top {
 width: 100rpx;
 height: 100rpx;
 line-height: 100rpx;
 background-color: #fff;
 position: fixed;
 bottom: 40rpx;
 right: 20rpx;
 text-align: center;
 font-size: 50rpx;
 opacity: .8;
 border-radius: 50%;
 border: 1px solid #fff; 
}

小程序文档中关于样式的介绍

逻辑部分

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

Page({
 data:{
 listLi:[],
 page:1,
 scrollTop:0,
 done: false,
 hidden: true
 },
 onLoad:function(options){
 this.getList(1);
 },

 onPullDownRefresh: function(){
 wx.showToast({
  title: '加载中',
  icon: 'loading'
 });
 this.getList(1,true);
 },

 getList: function(page, stopPull){
 var that = this
 wx.request({
  url: 'https://wechat.sparklog.com/jokes',
  data: {
  page: page,
  per: '20'
  },
  method: 'GET', 
  success: function(res){
  if(page===1){
   that.setData({
   page: page+1,
   listLi: res.data,
   done: false
   })
   if(stopPull){
   wx.stopPullDownRefresh()   
   }
  }else{
   if(res.data<20){
   that.setData({
    page: page+1,
    listLi: that.data.listLi.concat(res.data),
    done: true
   }) 
   }else{
   that.setData({
    page: page+1,
    listLi: that.data.listLi.concat(res.data)
   }) 
   } 
  }
  },
 })
 },

 loadMore: function(){
 var done = this.data.done;
 if(done){
  return
 }else{
  wx.showToast({
  title: '加载中',
  icon: 'loading',
  duration: 500
  });
  var page = this.data.page;
  this.getList(page)
 }
 },

 scrll: function(e){
 var scrollTop = e.detail.scrollTop
 if(scrollTop>600){
  this.setData({
  scrollTop: 1,
  hidden: false  
  })
 }else{
  this.setData({
  scrollTop: 1,
  hidden: true 
  });
 }
 },

 goTop: function(){
 this.setData({
  scrollTop:0,
  hidden: true 
 })
 }
})

大家可以看到首先我们需要用page()函数注册页面,然后在data里面定义一些初始化数据.onLoad是这个页面的生命周期函数,页面加载时会调用到它.我们在页面加载时调用了自定义的getList函数.这个函数接收两个参数,第一个参数是要加载的页面,第二个参数是布尔值,用来判断是下拉刷新调用的这个函数,还是页面加载时调用的这个函数!接下来onPullDownRefresh是小程序提供的下拉刷新函数,里面wx.showToast显示消息提示框,用来提示用户正在加载,loadMore是滚动到底部触发的事件.函数里面会检查是否已经加载了全部列表项,如果已经加载了全部列表项会return掉,如果数据库还有列表项,上拉到底部加载下一页!scrll函数是滚动时触发的函数,可以看到这个函数会判断滚动条位置是否大于六百,如果大于六百显示点击直达底部的按钮,如果小于六百隐藏直达顶部的按钮.同时会更新滚动条位置的参数.刚刚在讲wxml时已经讲过scroll-view组件设置竖向滚动条位置scroll-top设置项时如果参数一样,页面不会重新渲染,我们就是利用了这一点,如果要到达顶部,位置必定是'0',滚动时触发scrll函数,我们把位置信息设置为'1',因为滚动函数会反复触发,所以此时页面是不会渲染的.也就是说由于位置设置参数都是设置为'1'不变,导致scroll-top设置项不会生效为goTop函数的直达顶部(把参数变为'0'提供机会).最后就是直达顶部按钮的函数了,可以看到它是把位置信息变为'0',参数变化scroll-top设置生效,页面直达顶部.最后再通过改变hidden这个参数把自己(直达顶部按钮)给隐藏掉了!

结尾

ok,通过上面的步骤我们终于实现了下拉刷新上拉加载的列表页功能了,从上面我们可以看到微信提供的接口和api还是挺全面的,要实现一个功能总体来说要比原生js实现要简单一些!

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# 微信小程序  # scroll-view  # 解决微信小程序scroll-view组件无横向滚动的问题  # 微信小程序scroll-view组件实现滚动动画  # 微信小程序（九）scroll-view组件详细介绍  # 微信小程序view与scroll-view组件的使用介绍  # 加载  # 可以看到  # 滚动条  # 文档  # 目录下  # 新建一个  # 设置为  # 的是  # 都是  # 来了  # 加载中  # 在这个  # 第一个  # 下一页  # 丰衣足食  # 周期函数  # 也在  # 最重要  # 可以用  # 它是 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  jQuery 常见小例汇总  JavaScript如何实现类型判断_typeof和instanceof有什么区别  制作旅游网站html,怎样注册旅游网站？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  千库网官网入口推荐 千库网设计创意平台入口  个人网站制作流程图片大全,个人网站如何注销？  Laravel如何使用Contracts（契约）进行编程_Laravel契约接口与依赖反转  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  电商网站制作价格怎么算,网上拍卖流程以及规则？  如何为不同团队 ID 动态生成多个“认领值班”按钮  如何在IIS中新建站点并配置端口与物理路径？  Laravel如何实现多对多模型关联？（Eloquent教程）  购物网站制作费用多少,开办网上购物网站，需要办理哪些手续？  如何快速搭建高效简练网站？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  Laravel用户密码怎么加密_Laravel Hash门面使用教程  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何有效防御Web建站篡改攻击？  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  如何破解联通资金短缺导致的基站建设难题？  网站制作企业,网站的banner和导航栏是指什么？  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  Laravel如何实现数据库事务？（DB Facade示例）  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  长沙企业网站制作哪家好,长沙水业集团官方网站？  活动邀请函制作网站有哪些,活动邀请函文案？  如何在云主机上快速搭建网站？  如何快速搭建虚拟主机网站？新手必看指南  如何在IIS7中新建站点？详细步骤解析  如何用狗爹虚拟主机快速搭建网站？  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  EditPlus 正则表达式 实战(3)  如何用已有域名快速搭建网站？  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  linux top下的 minerd 木马清除方法  javascript基于原型链的继承及call和apply函数用法分析  移动端脚本框架Hammer.js  如何解决hover在ie6中的兼容性问题  高端建站如何打造兼具美学与转化的品牌官网？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  如何用低价快速搭建高质量网站？  LinuxShell函数封装方法_脚本复用设计思路【教程】  三星、SK海力士获美批准：可向中国出口芯片制造设备  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Laravel如何集成Inertia.js与Vue/React？（安装配置）  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？