Taro 小程序拖拽排序

具体效果如下:
因CSDN无法上传mp4文件 点击查看效果演示
详细可见小程序,内有部分网络图片,需要打开

不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书
代码路径

实现步骤

1. 拖拽排序实现

这一块不是难点,主要是movable-view,movable-area及一些页面逻辑的计算(当前拖拽的控件,拖拽到什么地步进行排序)。

需要注意:排序时setState/setData的延时,可能会引起多次排序错乱

2. 性能优化

在简单的拖拽排序基本实现后,我们需要关注它的性能及流畅度。
由于我们的contents(拖拽排序数组)中设计textareavideo等原生控件。

  1. 页面滑动的时候,可能出现textareavideo凌驾于navigator或其他高层级组件上

这是因为textareavideo为原生组件,脱离在 WebView 渲染流程外,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,
为了解决原生组件层级最高的限制,小程序专门提供了 cover-view 、 cover-image组件,可以覆盖在部分原生组件上面。我们需要把在textareavideo层次上的组件写到cover-view中。

  1. 滑动页面的时候,当滑动落在textarea上时,可能出现页面卡顿的现象

这是因为我们把contents(拖拽排序数组)写在了scroll-view 中,而滑动手势落在textarea上时,textarea的层级在scroll-view之上,操作会被textarea拦截,就不会作用到scroll-view滚动上,这时,两者只能选其一,textarea是我们必须要有的功能,如果用伪多行输入又会造成更多的性能问题,如果你有更好的方案,可以试一下,这里我们去除scroll-view

出现的问题: 获取页面滚动问题

由于我们通过页面的clientY以及scrollY来得到当前拖拽控件及拖拽路径,而不使用scroll-view后无法scroll-view滚动的距离,这时,需要使用页面的onPageScroll方法

onPageScroll () {
    let that = this;
    var query = Taro.createSelectorQuery()
    query.select('.content-view').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function(res) {
      that.setState({
        scrollPosition: {
          scrollTop: res[1].scrollTop,
          scrollY: that.state.scrollPosition.scrollY
        },
      })
    })
  }
  1. 文本控件拖拽时,textarea没有跟随移动

由于textarea不是position: fixed的,所以fixed={true}无效,我这里的解决方法是把拖拽的时movable-view的文本框设为text组件。

3. 后续

后续如果继续优化,我会不断更新,感谢你的阅读

你可能感兴趣的:(小程序,Taro)