topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化分类页面购物车图标移动区域和效果

This commit is contained in:
TOP糯米 2023-04-08 21:40:25 +08:00
parent 370adef803
commit b5390753a4
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/pages/service/cate.vue
View File

@ -13,10 +13,16 @@
@onScroll="onScroll" @onScroll="onScroll"
/> />
</view> </view>
<movable-area class="cart-icon-box"> <movable-area
class="cart-icon-box"
:style="{ height: movableAreaStyle.height, top: movableAreaStyle.top, bottom: movableAreaStyle.bottom }"
>
<movable-view <movable-view
class="cart-icon-view" class="cart-icon-view"
direction="all" direction="all"
:inertia="true"
:friction="5"
:animation="false"
:x="position.x" :x="position.x"
:y="position.y" :y="position.y"
@click="utils.toPage('/pages/service/cart')" @click="utils.toPage('/pages/service/cart')"
@ -42,6 +48,11 @@ export default {
data() { data() {
return { return {
utils: this.$utils, utils: this.$utils,
movableAreaStyle: {
height: 0,
bottom: 0,
top: 0,
},
position: { x: 300, y: 1000 }, position: { x: 300, y: 1000 },
currentId: 0, currentId: 0,
newId: 0, newId: 0,
@ -65,16 +76,22 @@ export default {
}), }),
}, },
async onLoad() { async onLoad() {
let pageConfig = getApp().globalData.pageConfig; const { windowWidth, windowHeight, safeAreaInsets } = getApp().globalData.pageConfig;
let x = pageConfig.windowWidth - this.$utils.rpx2px(94); let safeX = windowWidth,
let y = pageConfig.windowHeight - this.$utils.rpx2px(94); safeY = windowHeight - safeAreaInsets.top;
// H5平台减去tabBar高度 // --------------设置可移动范围--------------
this.movableAreaStyle.top = "auto";
this.movableAreaStyle.bottom = 0;
// #ifdef H5 // #ifdef H5
y = y - this.$utils.rpx2px(100); safeY -= this.$utils.rpx2px(100);
this.movableAreaStyle.top = 0;
this.movableAreaStyle.bottom = "auto";
// #endif // #endif
this.movableAreaStyle.height = safeY + "px";
// --------------设置可移动范围--------------
this.position = { this.position = {
x: x - this.$utils.rpx2px(20), x: safeX - this.$utils.rpx2px(94) - this.$utils.rpx2px(20),
y: y - this.$utils.rpx2px(40), y: safeY - this.$utils.rpx2px(94) - this.$utils.rpx2px(40),
}; };
// 加载分类 // 加载分类
this.data = [ this.data = [
@ -175,12 +192,11 @@ export default {
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.cart-icon-box { .cart-icon-box {
z-index: 15; z-index: 20;
position: fixed; position: fixed;
top: 0;
left: 0; left: 0;
right: 0;
width: 100%; width: 100%;
height: 100%;
pointer-events: none; pointer-events: none;
.cart-icon-view { .cart-icon-view {
position: relative; position: relative;