从图中分析，左下角的购物车按钮应该是可以拖拽的，以免挡住后面的内容。首先想到了uni-app的movable组件，movable-area控制拖拽的范围，而movable-view则是拖拽的具体控件，这里就是这个购物车，因为要全屏滚动，所以我爱模板网一开始将movable-area包含住了所有的内容，发现，并不好用。以前也使用过movable-view，没有遇到过这个问题，是因为那时页面简单，直接将movable-area套在最外层，里面放个movable-view就能到处拖拽了，不像这个页面，侧边栏也是滚动，商品列表也是滚动，外面套了movable-area，拖拽冲突，没用。
然后，干脆将movable-area和movable-view都独立出来，设置movable-area的z-index，盖住整个页面，这时，拖拽非常好用了，但是，后面的商品、分类都点击不了了。这时，给movable-area设置一个css样式：pointer-events:none，这个的意思说白了就当movable-area不存在，被他挡住的内容仍然正常操作，不受任何影响。然后再给购物车movable-view加上pointer-events:auto;的样式，不然购物车也行同虚设，不能拖动了。
代码如下：
<movable-area style="width: 100vw; height: 100vw; pointer-events:none; z-index: 9999;">
<movable-view direction="all" style="width: 100rpx; pointer-events:auto; height: 100rpx;">购物车</movable-view>
</movable-area>
至此，完美解决了这个问题。
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
