129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<template>
|
|
<view class="mobile-index">
|
|
<view class="u-page upage">
|
|
<Home ref="home" :topLevel="topLevel" :siftList="siftList" v-if="current===0" />
|
|
<Work ref="work" :topLevel="topLevel" :siftList="siftList" v-else-if="current===1" />
|
|
<My ref="my" :topLevel="topLevel" v-else-if="current===2" />
|
|
</view>
|
|
<view class="navigation">
|
|
<view @click="changeCurrent(index)" class="nav-item" v-for="(item,index) in navicationList" :key="index">
|
|
<image :src="fileUrl+(current===index?item.select:item.icon)"></image>
|
|
</view>
|
|
</view>
|
|
<Loading :show="loading" />
|
|
<u-back-top :scrollTop="scrollTop" zIndex="100" :duration="500"
|
|
:iconStyle="{ color: '#fff' }" :customStyle="{background: 'linear-gradient(180deg, #96fe11 0%, #f0fdbf 100%)',filter: 'opacity(0.96)'}"></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Home from '@/pages/mobile_web/home/home.vue';
|
|
import Work from '@/pages/mobile_web/work/work.vue';
|
|
import My from '@/pages/mobile_web/my/my.vue';
|
|
import configService from '@/common/config.service.js';
|
|
export default {
|
|
components: {
|
|
Home, Work, My
|
|
},
|
|
data() {
|
|
return {
|
|
current: uni.getStorageSync('current')||0,// 当前页码下标
|
|
loading: false,
|
|
fileUrl: configService.fileUrl + 'pixel/navigation/',//导航栏图标基础路径
|
|
// 导航栏按钮
|
|
navicationList:[
|
|
{
|
|
name: '首页',
|
|
icon: 'home.png',
|
|
select: 'home-select.png'
|
|
},
|
|
{
|
|
name: '作品',
|
|
icon: 'work.png',
|
|
select: 'work-select.png'
|
|
},
|
|
{
|
|
name: '我的',
|
|
icon: 'my.png',
|
|
select: 'my-select.png'
|
|
}
|
|
],
|
|
topLevel: 0,// 页面是否滚动到顶
|
|
// 筛选项
|
|
siftList:[{label: "全部", value: 0},{label: "自由替换", value:1},{label: "保留模式", value:2},
|
|
{label: "证件照", value: 3},{label: "旧照修复", value: 4},{label: "人脸修复", value: 5},
|
|
{label: "涂抹重绘", value: 6},{label: "AI换装", value: 7}],
|
|
// 滚动顶部
|
|
scrollTop: 0,
|
|
}
|
|
},
|
|
onPageScroll(e) {
|
|
// #ifndef H5
|
|
const level = e.scrollTop/60;
|
|
if(level<=1) this.topLevel = level;
|
|
else this.topLevel = 1;
|
|
// #endif
|
|
this.scrollTop = e.scrollTop;
|
|
},
|
|
|
|
// #ifdef H5
|
|
mounted(){
|
|
let that = this;
|
|
window.onscroll = function () {
|
|
//为了保证兼容性，这里取三个值，哪个有值取哪一个
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
|
|
const level = scrollTop/60;
|
|
if(level<=1) that.topLevel = level;
|
|
else that.topLevel = 1;
|
|
}
|
|
},
|
|
// #endif
|
|
|
|
onLoad() {
|
|
},
|
|
methods:{
|
|
// 切换页面
|
|
changeCurrent(index){
|
|
this.current = index;
|
|
uni.setStorageSync('current',index);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mobile-index{
|
|
position: relative;
|
|
// width: 100%;
|
|
// min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
.upage{
|
|
width: 100%;
|
|
}
|
|
.navigation{
|
|
width: 80%;
|
|
height: 128rpx;
|
|
position: fixed;
|
|
bottom: 15rpx;
|
|
z-index: 85;
|
|
display: flex;
|
|
background-color: #ffffff;
|
|
border-radius: 40rpx;
|
|
justify-content: space-around;
|
|
padding: 25rpx;
|
|
align-items: center;
|
|
background-size: cover;
|
|
filter: drop-shadow(0 0 10rpx rgba(0,0,0,0.4));
|
|
.nav-item{
|
|
width: 54rpx;
|
|
height: 85rpx;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |