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 API资源类怎么用_Laravel API Resource数据转换  Java遍历集合的三种方式  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  如何在阿里云虚拟主机上快速搭建个人网站？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  详解阿里云nginx服务器多站点的配置  开心动漫网站制作软件下载,十分开心动画为何停播？  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  如何用景安虚拟主机手机版绑定域名建站？  高防服务器租用如何选择配置与防御等级？  Laravel安装步骤详细教程_Laravel环境搭建指南  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  如何在宝塔面板中修改默认建站目录？  如何快速使用云服务器搭建个人网站？  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  Laravel如何部署到服务器_线上部署Laravel项目的完整流程与步骤  JavaScript常见的五种数组去重的方式  php静态变量怎么调试_php静态变量作用域调试技巧【解答】  重庆市网站制作公司,重庆招聘网站哪个好？  什么是javascript作用域_全局和局部作用域有什么区别？  uc浏览器二维码扫描入口_uc浏览器扫码功能使用地址  如何使用 jQuery 正确渲染 Instagram 风格的标签列表  如何快速建站并高效导出源代码？  如何快速生成凡客建站的专业级图册？  如何用已有域名快速搭建网站？  如何在云虚拟主机上快速搭建个人网站？  Laravel如何升级到最新版本？（升级指南和步骤）  香港服务器租用费用高吗？如何避免常见误区？  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  IOS倒计时设置UIButton标题title的抖动问题  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  如何在建站之星绑定自定义域名？  Laravel如何实现API资源集合？（Resource Collection教程）  极客网站有哪些,DoNews、36氪、爱范儿、虎嗅、雷锋网、极客公园这些互联网媒体网站有什么差异？  网站广告牌制作方法,街上的广告牌，横幅，用PS还是其他软件做的？  bootstrap日历插件datetimepicker使用方法  Laravel如何使用Sanctum进行API认证？（SPA实战）  详解Nginx + Tomcat 反向代理 如何在高效的在一台服务器部署多个站点  Linux系统命令中tree命令详解  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  大连企业网站制作公司,大连2025企业社保缴费网上缴费流程？  nginx修改上传文件大小限制的方法  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Laravel怎么集成Log日志记录_Laravel单文件与每日日志配置及自定义通道【详解】  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊，能赚钱吗？  Laravel路由怎么定义_Laravel核心路由系统完全入门指南