101 lines
1.3 KiB
Vue
101 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
|
|
<view v-for="index in 100">{{ index }}</view>
|
|
</MessageNavBar>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import MessageNavBar from '@/components/message/message-nav-bar.vue'
|
|
import {
|
|
ref,
|
|
reactive
|
|
} from 'vue'
|
|
import {
|
|
onLoad,
|
|
onPageScroll
|
|
} from "@dcloudio/uni-app";
|
|
import {
|
|
util
|
|
} from '@/utils/common.js';
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
title: '信息',
|
|
bgColor: '#FFFFFF',
|
|
},
|
|
phone: 'iphone',
|
|
isScroll: false
|
|
})
|
|
|
|
onLoad((options) => {
|
|
if (options.phone) {
|
|
data.phone = options.phone
|
|
}
|
|
})
|
|
|
|
onPageScroll((e) => {
|
|
console.log(e.scrollTop)
|
|
if (e.scrollTop > 60) {
|
|
data.isScroll = true
|
|
} else {
|
|
data.isScroll = false
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style>
|
|
@import '@/common/main.css';
|
|
|
|
page {
|
|
background-color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style lang="less">
|
|
::v-deep .uni-navbar__header-btns {
|
|
width: 100px !important;
|
|
flex: 1;
|
|
}
|
|
|
|
.iphone-style {
|
|
.mg-r-30 {
|
|
margin-right: 60rpx;
|
|
}
|
|
|
|
.mg-r-5 {
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.left-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.left-text {
|
|
font-size: 32rpx;
|
|
color: #0278E2;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.center-text {
|
|
font-size: 32rpx;
|
|
color: #1a1a1a;
|
|
}
|
|
}
|
|
|
|
.mi-style {
|
|
.right-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
</style>
|