自定义导航条设置 customNavigation

This commit is contained in:
2022-04-24 15:27:52 +08:00
parent f2aeeed36c
commit e18188becc

View File

@@ -3,15 +3,15 @@
<div class="header" :class="[isFixed ? 'header-active' : '']"> <div class="header" :class="[isFixed ? 'header-active' : '']">
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div> <div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
<div class="nav-bar"> <div class="nav-bar">
<image src="/static/img/left.png" @click="back" /> <image src="/static/img/left.png" @click="back"/>
<h2>乡村相册</h2> <h2>乡村相册</h2>
</div> </div>
</div> </div>
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}"> <div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
<image src="/static/img/left.png" /> <image src="/static/img/left.png"/>
</div> </div>
<div class="photo-header"> <div class="photo-header">
<image :src="coverImg" mode="aspectFill" /> <image :src="coverImg" mode="aspectFill"/>
<h2>{{ name }}</h2> <h2>{{ name }}</h2>
</div> </div>
<div class="photo-info"> <div class="photo-info">
@@ -37,7 +37,7 @@
<h2>{{ group.name }}</h2> <h2>{{ group.name }}</h2>
<div class="photo-wrapper"> <div class="photo-wrapper">
<div class="photo-item" v-for="(item, i) in group.list" :key="i"> <div class="photo-item" v-for="(item, i) in group.list" :key="i">
<image :src="item.url" @click="preview(item.url)" mode="aspectFill" /> <image :src="item.url" @click="preview(item.url)" mode="aspectFill"/>
<div class="photo-item__text"> <div class="photo-item__text">
<span>{{ item.createUserName }} 上传</span> <span>{{ item.createUserName }} 上传</span>
</div> </div>
@@ -54,12 +54,13 @@
</template> </template>
<script> <script>
import { mapState } from 'vuex' import {mapState} from 'vuex'
export default { export default {
name:"AppPhotoAlbum", name: "AppPhotoAlbum",
appName:"乡村相册", appName: "乡村相册",
data () { customNavigation: true,
data() {
return { return {
isFixed: false, isFixed: false,
statusBarHeight: 20, statusBarHeight: 20,
@@ -78,7 +79,7 @@
...mapState(['user', 'token']) ...mapState(['user', 'token'])
}, },
onLoad (query) { onLoad(query) {
this.type = query.type this.type = query.type
this.name = query.name this.name = query.name
this.coverImg = query.url this.coverImg = query.url
@@ -89,18 +90,18 @@
this.getTotalInfo(query.type) this.getTotalInfo(query.type)
}, },
onUnload () { onUnload() {
// uni.$off('update') // uni.$off('update')
}, },
methods: { methods: {
back () { back() {
uni.navigateBack({ uni.navigateBack({
delta: 1 delta: 1
}) })
}, },
preview (url) { preview(url) {
let imgs = [] let imgs = []
this.list.forEach(item => { this.list.forEach(item => {
imgs = [...imgs, ...item.list.map(v => v.url)] imgs = [...imgs, ...item.list.map(v => v.url)]
@@ -146,7 +147,7 @@
}) })
}, },
uploadFile (img, total) { uploadFile(img, total) {
uni.uploadFile({ uni.uploadFile({
url: this.$http.baseURL + '/admin/file/add', url: this.$http.baseURL + '/admin/file/add',
filePath: img, filePath: img,
@@ -187,7 +188,7 @@
}) })
}, },
getTotalInfo (type) { getTotalInfo(type) {
this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => { this.$instance.post(`/app/appvillagepicturealbum/statistic?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.info = res.data this.info = res.data
@@ -195,7 +196,7 @@
}) })
}, },
getList (type) { getList(type) {
this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => { this.$instance.post(`/app/appvillagepicturealbum/queryAlbum?areaId=${uni.getStorageSync('areaId')}&type=${type}`).then(res => {
if (res.code === 0) { if (res.code === 0) {
this.list = Object.keys(res.data).map(v => { this.list = Object.keys(res.data).map(v => {
@@ -218,11 +219,11 @@
onPageScroll(params) { onPageScroll(params) {
this.isFixed = params.scrollTop > 60; this.isFixed = params.scrollTop > 60;
} }
} }
</script> </script>
<style lang="scss" socped> <style lang="scss" socped>
.photo { .photo {
padding-bottom: 130px; padding-bottom: 130px;
* { * {
@@ -300,7 +301,7 @@
height: 100%; height: 100%;
z-index: 1; z-index: 1;
color: #fff; color: #fff;
background: rgba(0,0,0, 0.1); background: rgba(0, 0, 0, 0.1);
font-size: 56px; font-size: 56px;
} }
} }
@@ -378,5 +379,5 @@
} }
} }
} }
} }
</style> </style>