uniapp悬浮可拖拽按钮

<template>

<view class="content" :style="{height:QHeight + 'px', backgroundImage: `url(${bgUrl})` }">

<view class="" @click="msgClick()" style="">
<view class="badge-box" :style="{top:jnTop + 'px'}">
<image :src="xiaoxiUrl" class="xiaoxi-img" mode=""></image>
<u-badge numberType="overflow" :offset="[10,jnLeft]" type="error" :absolute="true" max="99"
:value="msgValue"></u-badge>
</view>
</view>
<view class="box">
<!-- <image :src="bannerUrl"  mode=""></image> -->
<view class="pjpm-box1">
<view class="left">
<view class="pm-icon-box">
<image :src="iconUrl1" class="pm-icon-new" mode=""></image>
</view>
<view class="pm-name">
评价排名
</view>
</view>
<view class="right" @click="goRanking()">
<view class="" style="margin-right: 10px;">
查看
</view>
<image :src="jtNewUrl" class="jt-img" mode=""></image>
</view>
</view>
<!-- 我的评价 -->
<view class="pjpm-box-content">
<view class="pjpm-box">
<view class="left">
<view class="pm-icon-box">
<image :src="iconUrl2" class="pm-icon" mode=""></image>
</view>
<view class="pm-name">
我的评价
</view>
</view>
<view class="right" @click="goEvaluateRecord()">
<view class="">
更多
</view>
<image :src="jtUrl" class="jt-img" mode=""></image>
</view>
</view>
<view class="mescorll-box">
<view class="pj-content">

<swiper class="swiper" v-if="recordList&&recordList.length > 0"
:style="{ height: swiperHeightMine + 'px' }" circular :vertical="false"
:indicator-dots="false" :autoplay="true" :interval="interval" :duration="duration">
<swiper-item v-for="item in recordList" :key="item.id">
<view class="card-mine" @click="detailPage(item)">
<view class="status-box">
<image :src="ytjUrl" v-if="item.evaluationStatus === 0" class="status-icon"
mode=""></image>
<image :src="slzUrl" v-if="item.evaluationStatus === 1" class="status-icon"
mode=""></image>
<image :src="ybhUrl" v-if="item.evaluationStatus === 2" class="status-icon"
mode=""></image>
<image :src="slzUrl" v-if="item.evaluationStatus === 3" class="status-icon"
mode=""></image>
<image :src="ywcUrl" v-if="item.evaluationStatus === 4" class="status-icon"
mode=""></image>
<image :src="ygbUrl" v-if="item.evaluationStatus === 5" class="status-icon"
mode=""></image>

</view>
<view class="line ">
<view class="name-text">
被评价单位类型：
</view>
<view class="text-value">
{
  
  {item.evaluatedType}}
</view>

</view>
<view class="line ">
<view class="name-text">
评价时间：
</view>
<view class="text-value">
{
  
  {item.createTime}}
</view>

</view>
<view class="line ">
<view class="name-text">
处理结果：
</view>
<view class="text-value">
<view class="line-two" v-if="item.evaluationStatus === 0"></view>
<view class="line-two"
v-if="item.evaluationStatus === 1&&item.circulationReason != null">
{
  
  {item.circulationReason}}
</view>
<view class="line-two"
v-if="item.evaluationStatus === 2&&item.rejectReason != null">
{
  
  {item.rejectReason}}
</view>
<view class="line-two"
v-if="item.evaluationStatus === 3&&item.handleReason != null">
{
  
  {item.handleReason}}
</view>
<view class="line-two"
v-if="item.evaluationStatus === 4&&item.checkReason != null">
{
  
  {item.checkReason}}
</view>
<view class="line-two"
v-if="item.evaluationStatus === 5&&item.checkReason != null">
{
  
  {item.checkReason}}
</view>
</view>
</view>

</view>
</swiper-item>
</swiper>
<view v-else class="card-class-null">
<image :src="nullUrl" class="null-class" mode=""></image>
<view class="null-name">
暂无评价内容
</view>
</view>
</view>
</view>
</view>

<!-- 评价标准 -->

<view class="pjpm-box-content">
<view class="pjpm-box">
<view class="left">
<view class="pm-icon-box">
<image :src="iconUrl3" class="pm-icon" mode=""></image>
</view>
<view class="pm-name">
评价标准
</view>
</view>
<view class="right" @click="goEvaluate()">
<view class="">
更多
</view>
<image :src="jtUrl" class="jt-img" mode=""></image>
</view>
</view>
<view class="mescorll-box">
<view class="pj-content">
<swiper class="swiper" :style="{ height: swiperHeight + 'px' }" circular :vertical="false"
:indicator-dots="false" :autoplay="true" :interval="interval" :duration="duration">
<swiper-item v-for="item in entryEntitylist" :key="item.id">
<view class="card-class" id="swiperHeight">
<view class="line ">
<view class="ms-name">
评价单位类型：
</view>
<view class="text-value">
{
  
  {item.evaluationType}}
</view>

</view>
<view class="line ">
<view class="ms-name">
被评价单位类型：
</view>
<view class="text-value">
{
  
  {item.evaluatedType}}
</view>

</view>
<view class="line ">
<view class="ms-name">
业务阶段：
</view>
<view class="text-value">
{
  
  {item.stage}}
</view>

</view>
<view class="line ">
<view class="ms-name">
评价指标：
</view>
<view class="text-value">
{
  
  {item.target}}
</view>

</view>
<view class="line ">
<view class="ms-name">
指标描述：
</view>
<view class="text-value line-two">
{
  
  {item.content}}
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>


</view>
<view class="home-content">



</view>
<!-- <view id="floatingImg" class="float-btn" :style="{ position: 'absolute', left: imgX + 'px', top: imgY + 'px' }"
@mouseover="stopFloat" @mouseout="startFloat" @click="goAddEvaluation()">
<view class="">
我要
</view>
<view class="">
评价
</view>
</view> -->
<!-- 悬浮按钮 -->
<!--movable-area 必须设置width和height属性，不设置默认为10px**-->
<!--下面的out-of-bounds允许绿块超过可移动区域，overflow: hidden是为了隐藏超出的部分-->
<movable-area class="movable-area">
<movable-view direction="all" inertia x="1200rpx" y="1200rpx" out-of-bounds class="xf-btn">
<view style="margin: 0 auto;text-align: center;pointer-events:auto;" @click="goAddEvaluation()">
<image :src="addPjUrl" style="width: 60px;height: 60px;" mode=""></image>

</view>
</movable-view>
</movable-area>
</view>


</template>

<script>
import configService from "@/utils/config.js";
import moment from 'moment';
import request from "@/utils/request.js";
import businessApi from '../../api/business.js'
import {
data
} from "../../uni_modules/uview-ui/libs/mixin/mixin.js";
export default {
components: {

},
data() {
return {
imgX: 50,
imgY: 60,
step: 1,
delay: 10,
xin: true,
yin: true,
intervalPf: null,


pmHeight:0,
pmWidth:0,
ytjUrl: configService.imgUrl + '/ytj.png',
ywcUrl: configService.imgUrl + '/ywc.png',
ybhUrl: configService.imgUrl + '/ybh.png',
slzUrl: configService.imgUrl + '/slz.png',
ygbUrl: configService.imgUrl + '/ygb.png',
jnLeft: 328,
jnTop: 50,
recordList: [],
swiperHeightMine: 150,
swiperHeight: 230,
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
queryParams: {
pageNo: 1,
pageSize: 10,
readFlag: 'N',
},
msgValue: 0,
xiaoxiUrl: configService.imgUrl + '/xiaoxi.png',
nullUrl: configService.imgUrl + '/null.png',
addPjUrl: configService.imgUrl + '/addpj.png',
bgUrl: configService.imgUrl + '/bg.png',
iconUrl1: configService.imgUrl + '/pm.png',
iconUrl2: configService.imgUrl + '/2.png',
iconUrl3: configService.imgUrl + '/jl.png',
jtNewUrl: configService.imgUrl + '/jtnew.png',
jtUrl: configService.imgUrl + '/jt.png',
pmUrl: configService.imgUrl + '/pm.png',
bannerUrl: configService.imgUrl + '/banner.png',
firstDay: '',
lastDayOfNextMonth: '',
currentDate: new Date(),
dataForm: {
pageNo: 1,
pageSize: 10,
startTime: '',
endTime: '',
},
entryEntitylist: [],
phone: '',
time: 5,
timeS: 5,
QHeight: 0,
loginForm: {
tenantId: '000000',
account: '',
password: '',
},

agreementChecked: false,
code: '',

password: '',
//验证码
codeText: '获取验证码',
//验证码已发
readonly: false,
btnShow: false,
clearTime: null,
}
},
computed: {

},
created() {},

onReady() {
//获取当前header高度
//具体需要放到onReady中
setTimeout(() => {
this.$nextTick(() => {
uni.createSelectorQuery().select('#swiperHeight').boundingClientRect(data => {
console.log('11111111data---', data.height);
if (data) {
this.swiperHeight = data.height + 40
}
}).exec()

})

}, 2000)




},
onShow() {
this.getMsg()
this.init()
//进入页面不触发获取数据  改变的时候触发
const windowResizeCallback = (res) => {
  console.log('变化后的窗口宽度=' + res.size.windowWidth)
  console.log('变化后的窗口高度=' + res.size.windowHeight)
  this.pmWidth=res.size.windowWidth
  this.pmHeight=res.size.windowHeight
}
uni.onWindowResize(windowResizeCallback)



},
onLoad(e) {
this.startFloat();

let rect = wx.getMenuButtonBoundingClientRect();
console.log(rect)
this.jnTop = rect.top - 5
this.jnLeft = rect.right - 30



uni.getSystemInfo({
success: (res) => {
console.log('res---', res.windowWidth,res.windowHeight);

let height = res.windowHeight - uni.upx2px(0);
this.QHeight = height;
}
})

},
onUnload() {

},
methods: {
float() {
const L = 0;
const T = 0;
const R = uni.getSystemInfoSync().windowWidth - 80; // 50为图片宽度
const B = uni.getSystemInfoSync().windowHeight - 80; // 50为图片高度

this.imgX += this.step * (this.xin ? 1 : -1);
this.imgY += this.step * (this.yin ? 1 : -1);

if (this.imgX < L) {
this.xin = true;
this.imgX = L;
}
if (this.imgX > R) {
this.xin = false;
this.imgX = R;
}
if (this.imgY < T) {
this.yin = true;
this.imgY = T;
}
if (this.imgY > B) {
this.yin = false;
this.imgY = B;
}
},
startFloat() {
this.intervalPf = setInterval(this.float, this.delay);
},
stopFloat() {
clearInterval(this.intervalPf);
},
detailPage(item) {
uni.navigateTo({
url: '/pages/evaluateRecord/details?id=' + item.id
});
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
},
goAddEvaluation() {
uni.navigateTo({
url: '/pages/evaluateRecord/addEvaluation'
});

},
// 未读消息数量
getMsg() {
businessApi.getTzMsg(this.queryParams).then((res) => {
this.msgValue = res.data.totalRows
}).catch(res => {


})

},
firstDayOfLastMonth() {
const currentYear = this.currentDate.getFullYear();
const currentMonth = this.currentDate.getMonth() - 1;
this.firstDay = new Date(currentYear, currentMonth, 1);
return this.firstDay;
},
lastDayOfLastMonth() {
const currentYear = this.currentDate.getFullYear();
const currentMonth = this.currentDate.getMonth() - 1;
const nextMonth = currentMonth + 1;
this.lastDayOfNextMonth = new Date(currentYear, nextMonth, 0);
return this.lastDayOfNextMonth;
},
init() {
this.firstDayOfLastMonth()
this.lastDayOfLastMonth()
this.dataForm.startTime = moment(this.firstDay).format('YYYY-MM-DD')
this.dataForm.endTime = moment(this.lastDayOfNextMonth).format('YYYY-MM-DD')
businessApi.getStandardHome(this.dataForm).then((res) => {
this.entryEntitylist = res.data.rows
})
this.recordForm = {
pageNo: 1,
pageSize: 999,
evaluationTitle: '',
// startTime: moment(this.currentDate).format('YYYY-MM-DD HH:mm:ss'),

}
businessApi.getEvaluationList(this.recordForm).then((res) => {
this.recordList = res.data.rows


}).catch(res => {


})


},
msgClick() {
uni.navigateTo({
url: '/pages/message/message'
});

},
onNavigationBarButtonTap(e) {
uni.navigateTo({
url: '/pages/message/message'
});

},
goRanking() {
uni.navigateTo({
url: '/pages/ranking/ranking'
});
},
goEvaluateRecord() {
uni.switchTab({
url: '/pages/evaluateRecord/evaluateRecord'
});

},
goEvaluate() {
uni.navigateTo({
url: '/pages/evaluate/evaluate'
});

},


}
}
</script>
<style>
page {
background-color: #EFEFEF;
}
</style>

<style lang="scss" scoped>
/* 可以根据需要添加样式 */
.float-btn {
// width: 100rpx;
height: 100rpx;
text-align: center;
letter-spacing: 6px;
font-weight: 900;
padding: 10px 5px 5px 11px;
font-size: 18px;
color: rgb(220, 2, 2);
background: #fff;
box-shadow: 3rpx 4rpx 8rpx 4rpx rgba(231, 68, 52, 0.54);
border-radius: 4px;
position: fixed;
}
.movable-area {
  //  可移动的范围
  height: 100vh;
  width: 750rpx;
  top: 0;
  position: fixed;
  pointer-events: none; //鼠标事件可以渗透
}
.xf-btn {
width: 120rpx;
height: 110rpx;
color: #fff;
font-size: 14px;
border-radius: 10px
}

.centermain {
flex: 1;
color: #fff;
display: flex;
align-items: center;
}

.pm-icon-new {
margin-right: 10px;
width: 48px;
height: 48px;
padding: 5px 0;

}

.uni-swiper {
height: 500px;
/* 你想要的高度 */
}

.badge-box {
// display: flex;
// justify-content: end;
padding: 15px 0 10px 0;
position: relative;
left: 10px;
// text-align: right;
// margin-right: 15px;
// position: relative;

.xiaoxi-img {
position: absolute;
left: 0px;
top: 15px;
margin-right: 10px;
width: 25px;
height: 25px;
}


}


.img-msg {
width: 20px;
height: 20px;

}

.item {
flex: 1;
background: #1E70EF;
}

.item1 {
flex: 1;
background: #1E70EF;
}

.item2 {
flex: 1;
background: #1E70EF;
}

.item3 {
flex: 1;
background: #1E70EF;
}

// 表单
.login-form {
width: 96%;
padding-top: 50px;
margin: 0 auto;

.foget-text {
height: 30rpx;
font-size: 26rpx;

margin: 40rpx;
text-align: right;
color: #3F86F5;
}

.input_box {

// display: flex;
align-items: center;
height: 104rpx !important;
// background-color: #f8f9fb;
// border-radius: 8rpx;
border-bottom: solid 2rpx #efeef4;
padding: 20rpx 0rpx;
margin: 20rpx 20px 0px 20px;

.btn-color {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #004FFF;
line-height: 20px;
text-align: right;
font-style: normal;
text-transform: none;
}

.phone-name {
margin-right: 20px;
font-family: "Source Han Sans CN Medium";
font-weight: 500;
font-size: 16px;
color: #000;
line-height: 30px;
text-align: left;
font-style: normal;
text-transform: none;

}

image {
width: 36rpx;
height: 24rpx;
}

input {
flex: 1;
font-size: 28rpx;
color: #333;
height: 60rpx;
}

.input_item {
font-size: 28rpx;
border: 0px;
flex: 1;
background-color: #f8f9fb;
height: 88rpx;
width: 100%;
outline: none;
//margin-left: 32rpx;
}

button {
height: 60rpx;
background-color: #f8f9fb;
font-size: 28rpx;
padding: 0 14rpx;
// color: $themeColor;
line-height: 60rpx;
margin-left: 20rpx;
//margin-right: 40rpx;
}

.grey {
color: #999999;
}
}

.btn_box {
margin-top: 60rpx;

button {
width: 319px;
height: 46px;
color: #fff;
border-radius: 23px;
background: linear-gradient(126.22deg, #279bff 0%, #2c84f6 100%);

}
}

.btn_zc {
margin-top: 40rpx;

uni-button:after {
border: none !important;
}

button {
width: 319px;
height: 46px;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 16px;
letter-spacing: 0;
text-align: center;
color: #909090;
border-radius: 23px;
background: #f1f1f1;

}
}

}

.content {
width: 100%;
// background: url("http://18.0.13.195:443/miniProgramImage/homebg.png") center center no-repeat;
background-size: cover;
position: relative;

.box {
width: 100%;
height: auto;
position: absolute;
top: 30%;
// padding-bottom: 50px;

.banner {
width: 100%;
height: 220px;

// margin-top: 10px;
}

.pm-img-box {
margin: 10px auto;
width: 100%;

.pm-img {
width: 100%;
height: 80px;

}
}

.pjpm-box-content {
width: 96%;
margin: 10px auto;

.mescorll-box {
width: 100%;
overflow-y: scroll;
box-sizing: border-box;
// overflow: scroll;
background: #fff;
padding-bottom: 10px;
height: auto;
// padding-bottom: 60px;
// height: calc(100vh - 360px);

.pj-content {
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
// padding: 10px;
box-sizing: border-box;

.card-class-null {
margin: 10px;
padding: 3px 8px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
height: auto;

.null-class {
width: 60px;
height: 60px;
margin-top: 30px;
}

.null-name {
margin-bottom: 30px;
font-size: 12px;
color: #828282;
}

}



.card-class {
margin: 10px;
padding: 3px 8px;
box-shadow: rgba(0, 128, 255, 0.11) 0px 0px 3px 1px;
height: auto;
}

.name-text {
min-width: 80px;
}

.card-mine {
margin: 10px;
padding: 3px 8px;
box-shadow: rgba(0, 128, 255, 0.11) 0px 0px 3px 1px;
height: auto;
position: relative;
}

.status-box {
position: absolute;
top: 0;
right: 0;

.status-icon {
width: 47px;
height: 47px;
}

}

.line {
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.02px;
text-align: left;
color: #909090;
margin: 10px 0;
display: flex;

.ms-name {
min-width: 85px;
}

.line-two {
overflow: hidden;
text-overflow: ellipsis;
/*将对象作为弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制文本行数*/
-webkit-line-clamp: 2;
/*子元素的排列方式*/
-webkit-box-orient: vertical;
/*将对象作为弹性伸缩盒子模型显示*/

}


.text-value {
color: #000;
}

}
}


}


}

.pjpm-box {
height: 50px;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;

.left {

display: flex;
align-items: center;

.pm-name {
font-family: "Source Han Sans CN Medium";
font-weight: 900;
font-size: 14px;
letter-spacing: 0.02px;
text-align: left;
color: #000;

}


.pm-icon {
margin-right: 10px;
width: 28px;
height: 28px;


}

}

.right {

display: flex;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02px;
text-align: right;
color: #909090;

align-items: center;

.jt-img {
height: 16px;
width: 16px;

}
}

}

.pjpm-box1 {
height: auto;
border-radius: 4px;
width: 96%;
box-sizing: border-box;
padding: 0 10px;
margin: 0px auto;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;

.left {

display: flex;
align-items: center;

.pm-name {
font-family: "Source Han Sans CN Medium";
font-weight: 900;
font-size: 16px;
letter-spacing: 0.02px;
text-align: left;
color: #000;

}

.pm-icon {
margin-right: 10px;
width: 28px;
height: 28px;


}

}

.right {

display: flex;
font-family: "Source Han Sans CN";
font-weight: 400;
font-size: 14px;
letter-spacing: 0.02px;
text-align: right;
color: #909090;

align-items: center;

.jt-img {
height: 16px;
width: 16px;

}
}

}


.info-box {
display: flex;
margin: 0 auto;

.info-img {
position: absolute;
width: 42px;
height: 42px;
right: 10px;
bottom: 0px;

}

.title-one {
font-weight: 900;
font-size: 16px;
}

.title-two {
color: #ADADAD;
font-size: 12px;
margin: 5px 0;
}

.info-left {
width: 50%;
position: relative;
box-sizing: border-box;
padding: 10px;
margin: 0 5px 0 10px;
height: 86px;
background: linear-gradient(135.31deg, #f9fdff 0%, #e8f5fc 58.92%, #d8f1ff 100%);
filter: drop-shadow(0 0 6px #0000000f);


}

.info-right {
width: 50%;
box-sizing: border-box;
padding: 10px;
margin: 0 5px 0 10px;
height: 86px;
background: linear-gradient(135.31deg, #fffef9 0%, #fbf2de 57.58%, #faeed4 100%);
filter: drop-shadow(0 0 6px #0000000f);

}
}
}

.home-content {
padding-bottom: 60px;



.title-box {
display: flex;
width: 100%;
align-items: center;
padding: 0 10px;
margin: 10px 0;

.text-name {
font-family: "Source Han Sans CN Medium";
font-weight: 900;
font-size: 16px;
text-align: left;
color: #000;

}

.sign {
margin-right: 8px;
width: 3px;
height: 16px;
border-radius: 1.5px;
background: #0b8eff;
}
}



}

.login-title {
padding: 10% 18px;
line-height: 40px;
font-family: "FZZhengHeiS-B-GB";
font-weight: 400;
font-size: 20px;
text-align: left;
color: #fff;
}
}
</style>

原文地址：https://blog.csdn.net/m0_52769924/article/details/145287991

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！