uniapp封装movable-area+movable-view组件，实现悬浮按钮可拖动，主动吸附 ...

兼容H5、App、微信小程序
子组件
/components/ShopCar/ShopCar.vue

1. <template>
2.         <view class="ShopCar">
3.                 <movable-area class="movableArea" v-if="isShow">
4.                         <movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
5.                                 :damping="damping" @change="onChange" @touchend="onTouchend">
6.                                 <view class="icon-box" @click="handleIcon()">
7.                                         <u-icon name="arrow-upward" color="#ff6a00" size="20"></u-icon>
8.                                 </view>
9.                         </movable-view>
10.                 </movable-area>
11.         </view>
12. </template>
14. <script>
15.         export default {
16.                 props: {
17.                         damping: {
18.                                 type: Number,
19.                                 default: 10
20.                         },
21.                         direction: {
22.                                 type: String,
23.                                 default: "all"
24.                         },
25.                         position: {
26.                                 type: Number,
27.                                 default: 4
28.                         },
29.                 },
30.                 data() {
31.                         return {
32.                                 x: 0,
33.                                 y: 0,
34.                                 x1: 0,
35.                                 x2: 0,
36.                                 y1: 0,
37.                                 y2: 0,
38.                                 move: {
39.                                         x: 0,
40.                                         y: 0
41.                                 },
42.                                 isShow: false
43.                         }
44.                 },
45.                 mounted() {
46.                         uni.getSystemInfo({
47.                                 success: (res) => {
48.                                         this.x1 = 0;
49.                                         this.x2 = parseInt(res.windowWidth) - 50;
50.                                         this.y1 = 0;
51.                                         this.y2 = parseInt(res.windowHeight) - 20;
52.                                         this.$nextTick(() => {
53.                                                 if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
54.                                                 if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
55.                                                 if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
56.                                                 if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
57.                                                 this.move.x = this.x;
58.                                                 this.move.y = this.y;
59.                                                 this.isShow = true
60.                                         })
61.                                 }
62.                         })
63.                 },
65.                 methods: {
66.                         onChange(e) {
67.                                 if (e.detail.source === "touch") {
68.                                         this.move.x = e.detail.x;
69.                                         this.move.y = e.detail.y;
70.                                 }
71.                         },
72.                         onTouchend() {
73.                                 this.x = this.move.x;
74.                                 this.y = this.move.y;
75.                                 this.$nextTick(() => {
76.                                         if (this.move.x < this.x2 / 2) this.x = this.x1;
77.                                         else this.x = this.x2;
78.                                 })
79.                         },
80.                         handleIcon() {
81.                                 uni.pageScrollTo({
82.                                         scrollTop: 0,
83.                                         duration: 0,
84.                                 });
85.                         }
86.                 },
87.         }
88. </script>
90. <style lang="scss" scoped>
91.         .ShopCar {
92.                 .movableArea {
93.                         position: fixed;
94.                         top: 0;
95.                         left: 0;
96.                         width: 100%;
97.                         height: 100%;
98.                         pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
99.                         z-index: 999;
101.                         .movableView {
102.                                 width: 70rpx;
103.                                 height: 70rpx;
104.                                 pointer-events: auto;
105.                                 padding: 0 30rpx;
107.                                 .icon-box {
108.                                         width: 100%;
109.                                         height: 100%;
110.                                         display: flex;
111.                                         align-items: center;
112.                                         justify-content: center;
113.                                         border: 1rpx solid #ff6a00;
114.                                         box-sizing: border-box;
115.                                         border-radius: 50%;
116.                                         background-color: #fff;
117.                                         animation: iconBox 5s linear infinite; //进行旋转
118.                                 }
120.                                 @keyframes iconBox {
121.                                         0% {
122.                                                 -webkit-transform: rotate(0deg);
123.                                         }
125.                                         25% {
126.                                                 -webkit-transform: rotate(90deg);
127.                                         }
129.                                         50% {
130.                                                 -webkit-transform: rotate(180deg);
131.                                         }
133.                                         75% {
134.                                                 -webkit-transform: rotate(270deg);
135.                                         }
137.                                         100% {
138.                                                 -webkit-transform: rotate(360deg);
139.                                         }
140.                                 }
142.                         }
143.                 }
144.         }
145. </style>

复制代码

父组件

1. <template>
2.    <ShopCar v-if="scrollTop>200" />
3. </template>
5. <script>
6.         export default {
7.                 data() {
8.             return {
9.                 scrollTop: 0
10.             }
11.         },
12.         onPageScroll(e) {
13.                     this.scrollTop = e.scrollTop
14.         },
15.     }
16. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。