我们在开发小程序的过程中,onShow和previewImage是很常见的操作
onShow : 每次进入页面都执行的周期函数
previewImage : 预览图片时的操作
但是previewImage预览图片时,我们发现会每次都执行onShow,这肯定不是我们需要的,所以我定义了refreshAsync用来判断是否要真的执行 onShow
定义refreshAsync.js
//refreshAsync.js
import {mapGetters,mapActions} from 'vuex'
export const refreshAsyncJS = {
computed :{
...mapGetters(['refreshAsync'])
},
methods:{
...mapActions(['setRefreshAsync'])
}
}
引入混入对象
<template>
<section class="wrap"></section>
</template>
<script>
import api from '$api'
import {refreshAsyncJS} from "$models/mixins/refreshAsync.js"
export default {
mixins:[refreshAsyncJS],
data() {
return {
};
},
onShow (){
//如果refreshAsync 为true时不打印
if(this.refreshAsync){
//设置refreshAsync为false
this.setRefreshAsync(false);
return false
}
//打印
console.log('这里打印了')
}
}
</script>
<style lang="scss" scoped>
</style>
预览时 设置refreshAsync为true
<template>
<image
class="c-img"
@click.stop="previewImage"
src="https://www.baidu.com"
></image>
</template>
<script>
import {mapActions} from 'vuex'
export default {
methods:{
...mapActions(['setRefreshAsync']),
//放大图片
previewImage(){
//设置refreshAsync为true
this.setRefreshAsync(true);
let imgArr = [];//预览的图片数据
uni.previewImage({
current:0, //预览的数据下标
urls:imgArr
});
}
}
}
</script>
<style lang="scss" scoped>
.c-img{
width: 100%;
height: 100%;
display: block;
}
</style>