微信小程序封装列表上拉加载,下拉刷新组件(粘贴可用)

组件wxml代码

<!--pages/component/pullRefresnView/pullRefreshView.wxml-->
<scroll-view enable-flex scroll-y="{
  {scrollY}}" 
style="height:{
  { height }}"
class="prv-container"
 refresher-enabled="{
  {refresherEnable}}"
 bindrefresherrefresh="_onRefresh"
 refresher-triggered="{
  {refreshing}}"
 bindscrolltolower="_onLoadmore"
 bindrefresherpulling="_onPulling"
 refresher-default-style="none"
 bindrefresherrestore="_onClose"
 bindscrolltoupper="_onScrollTop"
 refresher-threshold="{
  {pullDownHeight}}"
 scroll-into-view="{
  {scrollToView}}"
 scroll-with-animation="{
  {scrollWithAnimation}}"
 scroll-top='{
  {topNum}}'
 bindscroll="getScrollPosition"
 bindtouchend="handlerTouchend"
 lower-threshold="70"
>
 <slot slot="refresher" name="refresher" wx:if="{
  {refresherType=='custom'}}"></slot>
 <view slot="refresher" class="prv-pulldown" style="height:{
  {pullDownHeight}}px;line-height:{
  {pullDownHeight}}px;" wx:else>
  <view wx:if="{
  {refresherType=='default'}}">
   <block wx:if="{
  {pullState==0||pullState==1}}">
    <view class="prv-pull-icon" style='transform:rotate({
  {pullState==0?0:180}}deg);'></view>
    <text class="text" wx:if="{
  {pullState==0}}"> {
  {pullText}}</text>
    <text class="text" wx:if="{
  {pullState==1}}" space="nbsp"> {
  {releaseText}}</text>
   </block>
   <block wx:if="{
  {pullState==2}}">
    <view class="prv-loading"></view><text> {
  {refreshText}}</text>
   </block>
  </view>
  <view wx:elif="{
  {refresherType=='circle'}}" class="prv-loading prv-dot-loading">
  </view>
 </view>
 <slot></slot>
 <slot name="loader" wx:if="{
  {loadType=='custom'&&!isEmpty&&showLoading}}"></slot>
 <view class="prv-loadmore" wx:elif="{
  {!isEmpty&&showLoading}}">
  <block wx:if="{
  {nomore}}">
   <text class="load-text">{
  {nomoreText}}</text>
  </block>
  <block wx:else>
   <view
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值