discounts-minapp/components/zs-title/index.vue

<template>
	<view class="section-name" :class="'class' + elIndex">
		{{title}}
	</view>
</template>

<script>
	import guid from '@/utils/guid.js';
	import {rpxTopx} from '@/utils/tool.js'
	export default {
		props: {
			title: {
				type: String,
				default:''
			},
			value: {
				type: String,
				default:''
			},
			
		},
		data() {
			return {
				elIndex: guid(),
			}
		},
		watch: {
			src(val,old) {
				if(val != old){
					this.isError = false
					this.url1 = val
				}
			}
		},
		
		methods: {
			error() {
				this.isError = true
			}
		},
		onReady() {
			this.Observer = uni.createIntersectionObserver(this)
			this.Observer.relativeToViewport({bottom: 200}).observe('.class' + this.elIndex, (res) => {
				this.$emit('changeTag',this.value)
			})
			// this.Observer = uni.createIntersectionObserver(this)
			// this.Observer.relativeTo('.test',{bottom: 0}).observe('.class' + this.elIndex, (res) => {
			// 	console.log(12312);
			// 	this.$emit('changeTag',this.value)
			// })
			// this.Observer = uni.createIntersectionObserver(this)
			// this.Observer.relativeTo('.test',{top: 0}).observe('.class' + this.elIndex, (res) => {
			// 	this.$emit('changeTag',this.value)
			// })
		},
		beforeDestroy() {
			this.Observer&&this.Observer.disconnect()
		}
	}
</script>

<style lang="scss" scoped>
	.zs-img-box{
		position: relative;
		.image{
			vertical-align: bottom;
			will-change: transform
		}
	}

</style>