feat: detail new prev and next

pages/details/details.vue

 <template>		
 	<view class="viewport-wrapper" :style="[styleObject]">
-		<u-icon class="left-button" name="arrow-left" @click="handleLeftAction()"></u-icon>
-		<u-icon class="right-button" name="arrow-right" @click="handleRightAction()"></u-icon>
+		<view class="float-button" :style="{bottom: bottom + 'px'}" @click="showMenus()" :animation="animation">
+			<u-icon name="list" size="26" v-if="!isShow"></u-icon>
+			<u-icon name="plus" size="26" v-else></u-icon>
+		</view>
+		<view class="menu" :class="[menuClass(1)]" :style="{bottom: (bottom + 50) + 'px'}">
+			<u-icon name="arrow-left" size="24" @click="handleLeftAction()"></u-icon>
+		</view>
+		<view class="menu" :class="[menuClass(2)]" :style="{bottom: bottom + 'px'}">
+			<u-icon name="reload" size="24" @click="handleReolad()"></u-icon>
+		</view>
+		<view class="menu" :class="[menuClass(3)]" :style="{bottom: (bottom - 50) + 'px'}">
+			<u-icon name="arrow-right" size="24" @click="handleRightAction()"></u-icon>
+		</view>
+
 		<template v-for="(element, index) in reportInfo.list">
 			<view
 				class="view-element"
@@ -68,7 +80,6 @@
 		></ModelData>
 
 		<MySelect></MySelect>
-
 	</view>
 </template>
 
@@ -88,8 +99,10 @@
 				popupShow: false,
 				popupData: [],
 				customRender: {},
-				currentIndex: 0
-				
+				currentIndex: 0, 
+				animation: '',
+				isShow: false,
+				bottom: 100
 			}
 		},
 		computed: {
@@ -214,11 +227,15 @@
 			async getReportCharts() {
 				clearInterval(this.timename)
 				const that = this 
-				let res = await that.$u.api.getReportCharts({id: that.detailId})
 				uni.stopPullDownRefresh()
 				uni.$emit('handlePullDownRefresh')
+				uni.showLoading({
+					title: '加载中...'
+				})
+				let res = await that.$u.api.getReportCharts({id: that.detailId})
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
+					uni.hideLoading()
 					if(info.dataUrl) {
 						that.getGlobalData(info, list)
 						if(info.dataPollingInterval) {
@@ -241,7 +258,11 @@
 					}
 					that.reportInfo = res.data.Result
 					uni.setStorageSync('reportInfo', JSON.stringify(res.data.Result))
+					uni.setNavigationBarTitle({
+						title: info.name
+					})
 					that.getStickyTables()		
+					
 				}
 			},
 			/**
@@ -304,11 +325,11 @@
 			 * 点击向左切换按钮
 			 */
 			handleLeftAction() {
-				this.indexs--
-				if (this.indexs<0) {
-					this.indexs = 0
+				this.showMenus()
+				if (this.indexs === 0) {
 					return
 				}
+				this.indexs--
 				this.handlePage()
 			},
 			
@@ -316,11 +337,11 @@
 			 * 点击向右切换按钮
 			 */
 			handleRightAction() {
-				this.indexs++
-				if (this.indexs>this.idList.length-1) {
-					this.indexs--
+				this.showMenus()
+				if (this.indexs>=this.idList.length-1) {
 					return
 				}
+				this.indexs++
 				this.handlePage()
 			},
 
@@ -335,6 +356,33 @@
 				})
 			},
 			
+			showMenus() {
+				var animation = uni.createAnimation({
+					duration: 200,
+					timingFunction: 'ease',
+				})
+				this.isShow = !this.isShow
+				var rotate = this.isShow ? 135 : 0
+				animation.rotate(rotate).step()
+				this.animation = animation.export()
+			},
+			
+			menuClass(number) {
+				let num = this.isShow ? number : 0;
+				return 'menu' + num;
+			},
+			
+			handleReolad () {
+				this.showMenus()
+				// 让list数据做下改变，下拉刷新后才能触发页面的渲染，让组件里面的接口调用
+				this.reportInfo.list = this.reportInfo.list.map(item => {
+					item.value = "2022"
+					return item
+				})
+				this.getReportCharts()
+			},
+
+			
 			/**
 			 * 请求下一页的列表id
 			 */
@@ -361,6 +409,7 @@
 				}
 			}
 		},
+							
 		onPullDownRefresh() {
 			// 让list数据做下改变，下拉刷新后才能触发页面的渲染，让组件里面的接口调用
 			this.reportInfo.list = this.reportInfo.list.map(item => {
@@ -418,15 +467,64 @@
 .left-button {
 	position: fixed;
 	bottom: 50%;
-	left: 10px;
+	left: 1px;
 	z-index: 99;
 }
 
 .right-button {
 	position: fixed;
 	bottom: 50%;
-	right: 10px;
+	right: 1px;
+	z-index: 99;
+}
+
+.float-button {
+	position: fixed;
 	z-index: 99;
+	width: 40px;
+	height: 40px;
+	bottom: 15%;
+	right: 10px;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.7);
+	justify-content: center;
+	align-content: center;
+	display: flex;
+	border: 1rpx solid #ccc;
+}
+
+.menu {
+	position: fixed;
+	z-index: 90;
+	width: 30px;
+	height: 30px;
+	border-radius: 50%;
+	background-color: rgba(255, 255, 255, 0.7);
+	justify-content: center;
+	align-content: center;
+	display: flex;
+	border: 1rpx solid #ccc;
+}
+
+.menu0 {
+	right: 10px;
+	opacity: 0;
+	transition: top 0.2s, right 0.2s, opacity 0.2s;
+}
+
+.menu1 {
+	right: 30px;
+	transition: top 0.2s, right 0.2s, opacity 0.2s;
+}
+
+.menu2 {
+	right: 60px;
+	transition: top 0.2s, right 0.2s, opacity 0.2s;
+}
+
+.menu3 {
+	right: 30px;
+	transition: top 0.2s, right 0.2s, opacity 0.2s;
 }
 
 </style>