molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-06-08 12:33:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新众多VIP页面模板

Browse Source
This commit is contained in:
kert
2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vipPage/home/gravity/page1/page1.vue
+208
View File
@@ -0,0 +1,208 @@
<template>
<view class="vip-template-gyroscope-page">
<view style="color: #FFFFFF;position: absolute;top: 0;left: 0;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view>x轴数据:{{acceleronmeterX}}</view>
<view>y轴数据:{{acceleronmeterY}}</view>
<view>z轴数据:{{acceleronmeterZ}}</view>
</view>
<view class="background">
<image src="https://resource.tuniaokj.com/images/gravity/1/5.png"></image>
</view>
<view class="item__1 item__animation" :style="{transform: `translateX(${translateInfo[0].x}px)`}">
<image src="https://resource.tuniaokj.com/images/gravity/1/1.png" mode="widthFix"></image>
</view>
<view class="item__2 item__animation" :style="{transform: `translateX(${translateInfo[1].x}px)`}" @longtap.stop="toggleDirection">
<image src="https://resource.tuniaokj.com/images/gravity/1/2.png" mode="widthFix"></image>
</view>
<view class="item__3 item__animation" :style="{transform: `translateX(${translateInfo[2].x}px)`}">
<image src="https://resource.tuniaokj.com/images/gravity/1/3.png" mode="widthFix"></image>
</view>
<view class="item__4 item__animation" :style="{transform: `translateX(${translateInfo[3].x}px)`}">
<image src="https://resource.tuniaokj.com/images/gravity/1/4.png" mode="widthFix"></image>
</view>
<!-- 回到首页悬浮按钮-->
<nav-index-button></nav-index-button>
</view>
</template>
<script>
import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
import NavIndexButton from '@/libs/components/nav-index-button.vue'
export default {
name: 'GravityPage1',
mixins: [template_page_mixin],
components: { NavIndexButton },
data() {
return {
acceleronmeterX: 0,
acceleronmeterY: 0,
acceleronmeterZ: 0,
translateInfo: [
{max: 60, min: -60, speed: 0.8, x: 0},
{max: 45, min: -45, speed: 0.6, x: 0},
{max: 33.75, min: -33.75, speed: 0.45, x: 0},
{max: 25.31, min: -25.31, speed: 0.3375, x: 0}
],
positiveDirection: true
}
},
onLoad() {
this.initAccelerometer()
},
onUnload() {
this.stopAccelerometer()
},
methods: {
// 初始化加速度并设置监听函数
initAccelerometer() {
uni.onAccelerometerChange(this.listenerAccelerometerData)
},
// 停止监听加速度数据
stopAccelerometer() {
uni.stopAccelerometer()
},
listenerAccelerometerData(res) {
// console.log(res.x, res.y, res.z);
this.acceleronmeterX = res.x.toFixed(2)
this.acceleronmeterY = res.y.toFixed(2)
this.acceleronmeterZ = res.z.toFixed(2)
// let acceleronmeterX = Math.abs(this.acceleronmeterX) > 0.05 ? this.acceleronmeterX < 0 ? -0.05 : 0.05 : this.acceleronmeterX
// if (acceleronmeterX < 0) {
// for (let index in this.translateInfo) {
// let item = this.translateInfo[index]
// const x = item.speed * Math.abs(acceleronmeterX)
// item.x = item.x + x > item.max ? item.max : item.x + x
// this.$set(this.translateInfo, index, item)
// }
// } else if (acceleronmeterX > 0) {
// for (let index in this.translateInfo) {
// let item = this.translateInfo[index]
// const x = item.speed * acceleronmeterX
// item.x = item.x - x < item.min ? item.min : item.x - x
// this.$set(this.translateInfo, index, item)
// }
// }
if (this.positiveDirection) {
if (this.acceleronmeterX > 0) {
// 手机向左倾斜，图像向右移动
this.translateRightMove()
} else if (this.acceleronmeterX < 0) {
// 手机向右倾斜，图像向左移动
this.translateLeftMove()
}
} else {
if (this.acceleronmeterX < 0) {
// 手机向左倾斜，图像向右移动
this.translateRightMove()
} else if (this.acceleronmeterX > 0) {
// 手机向右倾斜，图像向左移动
this.translateLeftMove()
}
}
},
// 长按切换移动方向
toggleDirection() {
this.positiveDirection = !this.positiveDirection
},
// 向左移动
translateLeftMove() {
for (let index in this.translateInfo) {
let item = this.translateInfo[index]
// 计算当前图片位置和允许移动的边距距离
const distance = Math.abs(item.min - item.x)
const x = item.speed * (distance / 2)
item.x = item.x - x < item.min ? item.min : item.x - x
this.$set(this.translateInfo, index, item)
}
},
// 向右移动
translateRightMove() {
for (let index in this.translateInfo) {
let item = this.translateInfo[index]
// 计算当前图片位置和允许移动的边距距离
const distance = Math.abs(item.max - item.x)
const x = item.speed * (distance / 2)
item.x = item.x + x > item.max ? item.max : item.x + x
this.$set(this.translateInfo, index, item)
}
}
}
}
</script>
<style lang="scss" scoped>
.vip-template-gyroscope-page {
position: relative;
width: 100vw;
height: 100vh;
}
.background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
image {
width: 100%;
height: 100%;
}
}
.item {
&__1 {
position: absolute;
top: 210rpx;
left: 84rpx;
width: 100%;
// height: 100%;
z-index: 5;
}
&__2 {
position: absolute;
top: 885rpx;
left: 84rpx;
width: 100%;
// height: 100%;
z-index: 4;
}
&__3 {
position: absolute;
top: 138rpx;
left: 88rpx;
width: 100%;
// height: 100%;
z-index: 3;
}
&__4 {
position: absolute;
top: 390rpx;
left: 84rpx;
width: 100%;
// height: 100%;
z-index: 2;
}
&__animation {
transition: transform 1.6s ease;
}
}
</style>