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

Posted 2022-12-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了#yyds干货盘点#愚公系列2022年12月微信小程序-下拉刷新功能实现相关的知识，希望对你有一定的参考价值。

前言

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

一、下拉刷新功能实现

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="viewitem+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月微信小程序-下拉刷新功能实现的主要内容，如果未能解决你的问题，请参考以下文章

#yyds干货盘点#愚公系列2022年12月微信小程序-WebGL纹理材质的使用

#yyds干货盘点#愚公系列2022年12月微信小程序-项目篇(公交查询)-06站点查询

#yyds干货盘点#愚公系列2022年12月微信小程序-three.js绘制球体

#yyds干货盘点#愚公系列2022年12月微信小程序-WebGL画渐变色正方形

#yyds干货盘点#愚公系列2022年12月微信小程序-图片加载和全屏适配问题

#yyds干货盘点#愚公系列2022年12月微信小程序-项目篇(公交查询)-01周边站点

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

前言

一、下拉刷新功能实现

1.自定义下拉刷新

2.recycle-view的使用

3.案例

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