从图中分析,左下角的购物车按钮应该是可以拖拽的,以免挡住后面的内容。首先想到了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>至此,完美解决了这个问题。