uniapp微信小程序系列（4）零散知识点总结

知识点1：style与class调整样式的几种方法

Style调整方式，以设置 margin-right 属性为例：

// 方法1：内嵌方式
<view style="margin-right: 100rpx"></view>
 
// 方法2：变量绑定数值
<view :style="{marginRight: mright+'rpx'}"></view>
 
data() {
	return {
		mright: 100
	}
}
 
// 方法3：变量绑定对象
<view :style="[mright]"></view>
data() {
	return {
		mright: {
			marginRight:'100rpx'
		}
	}
}

Class调整方式，以设置 margin-right 属性为例：

// 方法1：直接引用
<view class="mright"></view>
 
<style lang="scss" scoped>
	.mright {
		margin-right: 100rpx;
	}
</style>
 
// 方法2：变量绑定，两种写法效果一致
<view :class="[isActive?'mleft':'', 'mright']"></view>
<view :class="[{'mleft': isActive}, 'mright']"></view> 
 
data() {
	return {
		isActive: true
	}
}
 
<style lang="scss" scoped>
	.mleft {
		margin-left: 100rpx;
	}
 
	.mright {
		margin-right: 100rpx;
	}
</style>

知识点2：使用uView组件时，如何阻止事件冒泡

默认情况下，组件是允许内部向外事件冒泡的。如果您想避免事件冒泡，那么您可以在组件外面嵌套一个view，同时给它加上@tap.stop即可。

// 添加点击事件，本例使用的是uView2.0版本
<template>
	<view class="container" @click="viewClick">
		<view @tap.stop>
			<u--image 
                :showLoading="true" 
                :src="src" 
                width="500rpx" 
                height="500rpx" 
                mode="aspectFill" 
                @click="imgClick">
            </u--image>
		</view>
	</view>
</template>

// 函数实现，此时触发<u--image>点击事件imgClick，并不会冒泡至viewClick
methods: {
	imgClick(e) {
		console.log('imgClick'); // 点击打印“imgClick”
	},
	viewClick(e) {
		console.log('viewClick'); // 不会执行，冒泡已被阻止
	}
}