优化分类页面购物车图标移动区域和效果
This commit is contained in:
parent
370adef803
commit
b5390753a4
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue