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 】

相关推荐： Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】  Laravel如何处理和验证JSON类型的数据库字段  🚀拖拽式CMS建站能否实现高效与个性化并存？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  Laravel如何发送邮件和通知_Laravel邮件与通知系统发送步骤  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  电视网站制作tvbox接口,云海电视怎样自定义添加电视源？  浏览器如何快速切换搜索引擎_在地址栏使用不同搜索引擎【搜索】  如何快速搭建高效WAP手机网站？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  Laravel如何实现本地化和多语言支持？（i18n教程）  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel安装步骤详细教程_Laravel环境搭建指南  网站建设保证美观性，需要考虑的几点问题！  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  lovemo网页版地址 lovemo官网手机登录  如何在腾讯云服务器快速搭建个人网站？  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  js实现点击每个li节点，都弹出其文本值及修改  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel如何使用Facades（门面）及其工作原理_Laravel门面模式与底层机制  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  如何快速搭建支持数据库操作的智能建站平台？  利用python获取某年中每个月的第一天和最后一天  微信小程序 wx.uploadFile无法上传解决办法  晋江文学城电脑版官网 晋江文学城网页版直接进入  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  如何在阿里云域名上完成建站全流程？  Swift开发中switch语句值绑定模式  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  如何挑选优质建站一级代理提升网站排名？  如何打造高效商业网站？建站目的决定转化率  如何在阿里云虚拟服务器快速搭建网站？  如何在HTML表单中获取用户输入并结合JavaScript动态控制复利计算循环  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  JavaScript如何实现倒计时_时间函数如何精确控制  html如何与html链接_实现多个HTML页面互相链接【互相】  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  公司网站制作价格怎么算,公司办个官网需要多少钱？  如何在不使用负向后查找的情况下匹配特定条件前的换行符  javascript基于原型链的继承及call和apply函数用法分析  Laravel如何实现API版本控制_Laravel API版本化路由设计策略  如何正确下载安装西数主机建站助手？  Laravel Docker环境搭建教程_Laravel Sail使用指南  如何用免费手机建站系统零基础打造专业网站？  C语言设计一个闪闪的圣诞树