草庐IT

#yyds干货盘点#【愚公系列】2022年12月 微信小程序-下拉刷新功能实现

愚公搬代码 2023-03-28 原文

前言

下拉刷新是移动端的专有名词,是指通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。

一、下拉刷新功能实现

1.自定义下拉刷新

<wxs module="refresh"> var pullingMessage = "下拉刷新" module.exports = { onRefresh: function(e, instance) { // 此时手拉开了,进入了加载中的状态 pullingMessage = "更新中" console.log(pullingMessage) instance.callMethod("setData", { pullingMessage: pullingMessage, refresherTriggered: true }) instance.callMethod("willCompleteRefresh", {}) }, onAbort: function(e, instance) { // 异常状态,例如被事件突然打断,事件包括电话等,被迫松手了 pullingMessage = "下拉刷新" console.log(pullingMessage) }, onRestore: function(e, instance) { // 回去了,松手了,恢复原位了,不刷了 pullingMessage = "下拉刷新" console.log(pullingMessage) }, onPulling: function(e, instance) { // 80的高度,因为refresher-threshold设置的是80,手指按住往下拉的状态 var p = Math.min(e.detail.dy / 80, 1) // console.log(p) // 这里在视图层,不怕频繁操作DOM var icon = instance.selectComponent('#refresherIcon') icon.setStyle({ opacity: p, transform: "rotate(" + (90 + p * 180) + "deg)" }) var view = instance.selectComponent('.refresh-container') view.setStyle({ opacity: p, transform: "scale(" + p + ")" }) if (e.detail.dy >= 80) { if (pullingMessage == "下拉刷新") { pullingMessage = "释放更新" instance.callMethod("setData", { pullingMessage }) } } } } </wxs> <view class="page-section"> <view class="page-section-title">自定义下拉刷新</view> <scroll-view scroll-y style="width: 100%; height: 400px;overflow-anchor:auto;" bindscroll="onScroll" bindscrolltoupper="onScrolltoupper" scroll-top="{{scrollTopValue}}" scroll-into-view="{{scrollIntoViewId}}" scroll-with-animation enable-back-to-top enable-flex scroll-anchoring refresher-enabled refresher-threshold="{{80}}" refresher-default-style="none" refresher-background="#FFF" bindrefresherpulling="{{refresh.onPulling}}" bindrefresherrefresh="{{refresh.onRefresh}}" bindrefresherrestore="{{refresh.onRestore}}" bindrefresherabort="{{refresh.onAbort}}" refresher-triggered="{{refresherTriggered}}"> <view slot="refresher" class="refresh-container" style="display: block; width: 100%; height: 80px; background: #F8f8f8; display: flex; align-items: center;"> <view class="view1" style="position: absolute; text-align: center; width: 100%;display:flex;align-items:center;justify-content:center;color:#888;"> <mp-icon id="refresherIcon" icon="arrow" color="#888" size="{{20}}" style="margin-right:5px;transform:rotate(90deg)"></mp-icon> <text style="min-width:80px;text-align:left;">{{pullingMessage}}</text> </view> </view> <view wx:for="{{arr}}" id="view{{item+1}}" style="display: flex;height: 100px;"> <text style="position:relative;top:5px;left:5px;color:black;">{{item+1}}</text> <image src="https://img1.baidu.com/it/u=3749523982,1411558844&fm=253&fmt=auto&app=138&f=JPEG?w=1070&h=500"></image> <image src="https://img1.baidu.com/it/u=3749523982,1411558844&fm=253&fmt=auto&app=138&f=JPEG?w=1070&h=500"></image> <image src="https://img1.baidu.com/it/u=3749523982,1411558844&fm=253&fmt=auto&app=138&f=JPEG?w=1070&h=500"></image> <image src="https://img1.baidu.com/it/u=3749523982,1411558844&fm=253&fmt=auto&app=138&f=JPEG?w=1070&h=500"></image> <image src="https://img1.baidu.com/it/u=3749523982,1411558844&fm=253&fmt=auto&app=138&f=JPEG?w=1070&h=500"></image> </view> </scroll-view> <view class="btn-area"> <button bindtap="plusScrollUpValue">向上滚动</button> <button bindtap="scrollToView1">滚动到子视图</button> <button bindtap="unshiftOnePic">顶部添加一张图</button> </view> </view> const app = getApp() let viewId = 5 const createRecycleContext = require('miniprogram-recycle-view') function rpx2px(rpx) { return (rpx / 750) * wx.getSystemInfoSync().windowWidth } Page({ data: { arr: [], triggered: false, scrollTopValue:0, scrollIntoViewId:'', pullingMessage:'下拉刷新',//下拉刷新,释放更新,加新中... refresherTriggered:false,// tabs:[] }, willCompleteRefresh(){ console.log('更新中') let intervalId = setInterval(()=>{ let pullingMessage = this.data.pullingMessage console.log(pullingMessage,pullingMessage == '更新中') if (pullingMessage.length < 7){ pullingMessage += '.' }else{ pullingMessage = '更新中' } this.setData({ pullingMessage }) },500) setTimeout(()=>{ console.log('更新完成了') clearInterval(intervalId) this.setData({ pullingMessage:"已刷新", refresherTriggered:false, }) },2000) }, unshiftOnePic(){ let arr = this.data.arr arr.unshift(arr.length+1) this.setData({ arr }) }, scrollToView1(){ viewId += 2 this.setData({ scrollIntoViewId:'childview'+viewId }) console.log(this.data.scrollIntoViewId) }, plusScrollUpValue(){ this.setData({ scrollTopValue:this.data.scrollTopValue+50 }) }, onPulling(e) { console.log('onPulling:', e) }, onRefresh() { if (this._freshing) return this._freshing = true setTimeout(() => { this.setData({ triggered: false, }) this._freshing = false }, 3000) }, onRestore(e) { console.log('onRestore:', e) }, onAbort(e) { console.log('onAbort', e) }, onScroll(e){ console.log(e.detail.scrollTop, e.detail.scrollLeft, e.detail.scrollHeight,e.detail.scrollWidth) }, onScrolltoupper(e){ console.log('已达顶部后,小于50,是一种状态') }, })

2.recycle-view的使用

recycle-view是属于weui的组件,具体使用如下:

全局app.json

"useExtendedLib": { "weui": true } 页面的四个文件如下:

{ "component": true, "usingComponents": { "recycle-view": "miniprogram-recycle-view/recycle-view", "recycle-item": "miniprogram-recycle-view/recycle-item" }, "pageOrientation": "auto" } <view class="page-section"> <view class="page-section-title">使用recycle-view扩展组件</view> <recycle-view height="200" batch="{{batchSetRecycleData}}" id="recycleId" batch-key="batchSetRecycleData" style="background:white;"> <recycle-item wx:for="{{recycleList}}" wx:key="index" class='item'> <view> {{item.id}}: {{item.name}} </view> </recycle-item> </recycle-view> </view> const app = getApp() let viewId = 5 const createRecycleContext = require('miniprogram-recycle-view') function rpx2px(rpx) { return (rpx / 750) * wx.getSystemInfoSync().windowWidth } Page({ data: { }, onReady: function () { var ctx = createRecycleContext({ id: 'recycleId', dataKey: 'recycleList', page: this, itemSize: { width: rpx2px(650), height: rpx2px(100) } }) let newList = [] for (let i = 0; i < 20; i++) { newList.push({ id: i, name: `标题${i + 1}` }) } ctx.append(newList) const arr = [] for (let i = 0; i < 20; i++) arr.push(i) this.setData({ arr }) setTimeout(() => { this.setData({ triggered: true, }) }, 1000) // let activeTab = 0, page=1, res = {something:''} let tabsData = this.data.tabs[activeTab] || {list:[]} tabsData.page = page+1 tabsData.list.push(res) let key = `tabs[${activeTab}]` this.setData({ [key]: tabsData }) console.log(this.data.tabs) }, })

3.案例

//1 单击左侧菜单 menuListOnClick: function (e){ let me=this; me.setData ({ activeViewld:e.target.id, currentIndex:e.target.dataset.index }) } //滚动时触发,计算当前滚动到的位置对应的菜单是哪个 scrollFunc:function (e){ this.setData ({ scrollTop:e.detail.scrollTop }) for (let i= 0;i<this.data.heightList.length; i++){ let height1 = this. data.heightlist [il; let height2 = this.data.heightList [i + 1]; if (!height2ll (e.detail.scrollTop >= height1 && e.detail.scrollTop<height2)){ this.setData ({ currentIndex: i }) return; } } this.setData ({ currentIndex:0 }) }

有关#yyds干货盘点#【愚公系列】2022年12月 微信小程序-下拉刷新功能实现的更多相关文章

  1. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  2. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  5. ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2

    对于用户模型,我有一个过滤器来检查用户的预订状态,该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而,这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时,我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点? 最佳答案 假设booking_status是模型中的枚举字段,您可以使用:过滤器:booking

  6. ruby-on-rails - rails 功能测试 - 2

    在Rails自动生成的功能测试(test/functional/products_controller_test.rb)中,我看到以下代码:classProductsControllerTest我的问题是:方法调用products()在哪里/如何定义?products(:one)到底是什么意思?看代码,大概意思是“创建一个产品”,但是它是如何工作的呢?注意我是Ruby/Rails的新手,如果这些是微不足道的问题,我深表歉意。 最佳答案 如果您查看test/fixtures文件夹,您会看到一个products.yml文件。这是在您创建

  7. ruby-on-rails - 功能测试 Authlogic? - 2

    在我的一些Controller中,我有一个before_filter检查用户是否登录?用于CRUD操作。application.rbdeflogged_in?unlesscurrent_userredirect_toroot_pathendendprivatedefcurrent_user_sessionreturn@current_user_sessionifdefined?(@current_user_session)@current_user_session=UserSession.findenddefcurrent_userreturn@current_userifdefine

  8. ruby-on-rails - Scaffold Rails 3 View 中的外键下拉列表 - 2

    我使用脚手架和Rails3创建了2个模型。模型是位置和作业,每个作业都有一个位置。我在脚手架生成代码中创建了所需的引用调用,但是当我查看创建新作业的View时,我看到的只是一个文本框,我应该在其中添加location_id。我怎样才能让它变成下拉菜单以获得更好的用户体验? 最佳答案 想象一下,您有每个位置的titleAPI:http://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/collection_select 关于r

  9. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  10. 映宇宙2022年营收63亿元:同比下降三成,毛利率提升4.3个百分点 - 2

    3月26日,映宇宙(HK:03700,即“映客”)发布截至2022年12月31日的2022年度业绩财务报告。财报显示,映宇宙2022年的总营收为63.19亿元,较2021年同期的91.76亿元下降31.1%。2022年,映宇宙的经营亏损为4698.7万元,2021年同期则为净利润4.57亿元;期内亏损(净亏损)为1.68亿元,2021年同期的净利润为4.33亿元;非国际财务报告准则经调整净利润为3.88亿元,2021年同期为4.82亿元,同比下降19.6%。 映宇宙在财报中表示,收入减少主要是由于行业竞争加剧,该集团对旗下产品采取更为谨慎的运营策略以应对市场变化。不过,映宇宙的毛利率则有所提升

随机推荐