小程序——movable-view被穿透覆盖+scroll-view自定义下拉刷新

作者: 小疯子 分类: 小程序 发布时间: 2020-04-03 10:23

问题描述

前面讲了树状图页面,要加上个浮动小按钮用来跳转到添加页面,但是如果树状图展开了就会盖住movable—view组件的拖动操作,所以只能将所有内容都放到movable-area组件中来避免这种情况;
如果都放到movable-area中,会导致page的onPullDownRefresh或其他页面下拉操作不生效,由此页面中的内容将由scroll-view代替view组件;
然后呢问题又来了,用scroll-view是触顶滚动会触发事件,但是我的下拉刷新需要和page的onPullDownRefresh差不多,下拉一定距离才触发刷新操作;
参考连接:https://blog.csdn.net/qq_36437172/article/details/83055774
https://my.oschina.net/u/3460260/blog/3141631

最终代码

首先wxml:

<!--miniprogram/pages/categoryManage/categoryManage.wxml-->
<movable-area style="width:{{windowWidth}}px;height:{{windowHeight}}px;">
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{windowHeight}}px;" bindtouchstart='touchStart'
  bindtouchend='touchEnd'
  bindtouchmove='touchMove' bindscroll="scroll">
  <view wx:if="{{showRefresh}}" style='width:100%;position:relative;padding:60rpx 0;'>
    <view class="text-gray" style='position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);font-size:10px;'>
      <view wx:if="{{freshStatus == 'fresh'}}" class="flex">
        <view class="lzy-loading"></view>
        <view>刷新中…</view>
      </view>
      <view class="text" wx:elif="{{freshStatus == 'more'}}">
        <!-- 使用到了 colorUI 下拉箭头图标 -->
        <text class="cuIcon-refresharrow"></text> 下拉更多…
      </view>
      <view class="text" wx:else>
        刷新完成…
      </view>
    </view>
  </view>
      <treeMenu model='{{categories}}' isedit='true' bind:tapitem='tapItem' bind:toggle="toggle"
      bind:edit='edit' bind:deleteitem='deleteitem'></treeMenu>
      <movable-view x="{{x}}" y="{{y}}" direction="all" style="z-index:1004" bindtap="clickadd">+</movable-view>
  </scroll-view>
</movable-area>

然后js中实现的和刷新有关的:

 data: {
    freshStatus: 'more', // 当前刷新的状态
    showRefresh: false,   // 是否显示下拉刷新组件
}
// 触摸开始
  touchStart(e) {
    this.setData({
      startY: e.changedTouches[0].pageY,
      freshStatus: 'more'
    })
  },
  // 触摸移动
  touchMove(e) {
    let endY = e.changedTouches[0].pageY;
    let startY = this.data.startY;
    let dis = endY - startY;
    // 判断是否下拉
    if (dis <= 0) {
      return;
    }
    let offsetTop = e.currentTarget.offsetTop;
    if (dis > 20) {
      this.setData({
        showRefresh: true
      }, () => {
        if (dis > 50) {
          this.setData({
            freshStatus: 'end'
          })
        } else {
          this.setData({
            freshStatus: 'more'
          })
        }
      })
    } else {
      this.setData({
        showRefresh: false
      })
    }
  },
  // 触摸结束
  touchEnd(e) {
    if (this.data.freshStatus == 'end') {
      // 延迟 500 毫秒,显示 “刷新中”,防止请求速度过快不显示
      setTimeout(() => {
        util.updateCategories().then(res => {
          this.onShow()
        }).catch(res => {
          }).finally(() => {
            this.setData({
              showRefresh: false
            })});
      }, 500);
    } else {
      this.setData({
        showRefresh: false
      })
    }
  },

})

最后页面样式wxss:

.lzy-loading{
  margin-right: 20rpx;
  float: left;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 1px solid #f0f0f0;
  border-left: 1px solid #6190E8;
  animation: load 1s linear infinite;
  -webkit-animation: load 1s linear infinite;
}
@-webkit-keyframes load
{
  from{-webkit-transform:rotate(0deg);}
  to{-webkit-transform:rotate(360deg);}
}
@keyframes load
{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
0