diff --git a/pages/squareDynamic/index.vue b/pages/squareDynamic/index.vue index 8f24a63..a1d7472 100644 --- a/pages/squareDynamic/index.vue +++ b/pages/squareDynamic/index.vue @@ -46,7 +46,15 @@ 暂无动态 暂无动态 - + 发布 @@ -58,6 +66,8 @@ import * as Api from '@/api/squareDynamic/index.js' export default { + components: { + }, data() { return { tabList: ['推荐', '精选', '晒单', '日常', '文章'], @@ -88,6 +98,16 @@ loading: false, finished: false, showFullCont: [], + top:0, + left:0, + width: 0, + height: 0, + offsetWidth: 0, + offsetHeight: 0, + windowWidth: 0, + windowHeight: 0, + isMove: true, + edge: 20, }; }, watch: { @@ -104,8 +124,20 @@ frontColor: '#000000', backgroundColor: '#E7F1FC', }); - console.log(this.dynamicList, this.dynamicList[0]); this.getDynamicList(); + const sys = uni.getSystemInfoSync(); + this.windowWidth = sys.windowWidth; + this.windowHeight = sys.windowHeight; + if (sys.windowTop) { + this.windowHeight += sys.windowTop; + } + const query = uni.createSelectorQuery().in(this); + query.select('#publish').boundingClientRect(data => { + this.width = data.width; + this.height = data.height; + this.offsetWidth = data.width / 2; + this.offsetHeight = data.height / 2; + }).exec(); }, methods: { async getDynamicList() { @@ -203,6 +235,69 @@ url: '/pages/squareDynamic/publish', }) }, + spred(e){ + const animation = uni.createAnimation({ + duration: 200, + timingFunction: 'ease', + }); + this.animationData = animation.export(); + + if(this.isShow){ + animation.rotate(135).step(); + } + else{ + animation.rotate(0).step(); + } + this.animationData = animation.export(); + }, + touchmove(e) { + // 单指触摸 + if (e.touches.length !== 1) { + return false; + } + this.isMove = true; + this.isShow=false + this.spred() + this.left = e.touches[0].clientX - this.offsetWidth; + let clientX = e.touches[0].clientX; + let clientY = e.touches[0].clientY - this.offsetHeight; + let edgeBottom = this.windowHeight - this.height - this.edge; + // 左右触及边界 + if (clientX < this.edge) { + this.left = this.edge; + } else if (clientX > this.windowWidth - this.offsetWidth - this.edge) { + this.left = this.windowWidth - this.width - this.edge; + } else { + this.left = clientX - this.offsetWidth; + } + // 上下触及边界 + if (clientY < this.edge) { + this.top = this.edge; + } else if (clientY > edgeBottom) { + this.top = edgeBottom; + } else { + this.top = clientY + } + + }, + touchend(e) { + if (this.isDock) { + let edgeRigth = this.windowWidth - this.width - this.edge; + + if (this.left < this.windowWidth / 2 - this.offsetWidth) { + this.left = this.edge; + } else { + this.left = edgeRigth; + } + if(this.left>200){ + this.postitionName=false + }else{ + this.postitionName=true + } + } + + this.isMove = false; + }, }, }; @@ -356,8 +451,8 @@ } .publish { position: fixed; - right: 24rpx; - bottom: 140rpx; + left: 626rpx; + top: calc(100% - 300rpx); width: 100rpx; height: 100rpx; background: #F34A40;