Uniapp用法小结

设置相对父元素距离

父view

position: relative;

子view

position: absolute;
z-index: 1;
width: calc(100% - 64px);
top:0;

动态设置css

:class='{ tool_select: item.flag ,tool_unselect: !item.flag }'

.tool_select {}
.tool_unselect {}

:style="{ 'height': popHeight + 'px' }"

:style="{color: textColor}"

注意：
要加scoped 防止被父布局误染

<style lang="scss" scoped>

父子组件传值

子组件 在props中定义父组件要传过来的参数名
watch:监听传过来参数变化
methods中yearListIndex 是子组件的按键点击 通过this.$emit(“send”, item) 传参给父组件

props: {
			maintitle: {
				type: String,
				default: ''
			},			
			selYear: {
				type: String,
				default: ''
			},			
			yearList: {
				type: Array,
				default: [			
				]
			}
		},
watch: {
			title(val) {
				console.log('watch title：' + title)
			},			
			yearList: {
				handler: function(val, oldVal) {
					console.log('watch yearList：' + val)			
				},
				deep: true,
				immediate: true
			},
		},

methods: {	
			//年份名称的选中
			yearListIndex(item) {
				console.log(item);
				this.selYear = item+"年";
				this.$emit("send", item)
			},
		},

父组件 NavRightClick为子组件传过来的参数 send名称要和子组件一致

<customNavBar :maintitle="maintitle" :selYear="selYear" :yearList="yearList"
				@send="NavRightClick">
			</customNavBar>


data() {
			return {
				maintitle: '',				
				selYear: '',			
				yearList: [],			
			}
		},
methods: {
			NavRightClick(e) {
				console.log("NavRightClick:" + e)
			},
}

获取控件高度，屏幕高度

<scroll-view scroll-y :style="{ 'height': popHeight + 'px' }">
					<view id="lineid" class="listBar">
						<view class="listli" :class='{ list_select: item.flag ,list_unselect: !item.flag }'
							v-for="(item,index) in lineList" :key="index" @click="goLine(item,index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>

refreshPopView() {
				var that = this
				uni.getSystemInfo({
					success: function(res) {
						var screen = res.windowHeight - uni.upx2px(270 + 44)
						console.log("screen - top:" + screen)
						console.log(screen)
						setTimeout(function() {
							uni.createSelectorQuery().select("#lineid")
								.boundingClientRect(data => {
									console.log('bar height:' + data.height)
									if (data.height >= screen) {
										that.popHeight = screen
									} else {
										that.popHeight = data.height
									}
									console.log('popHeight' + that.popHeight)
									that.$forceUpdate()
								}).exec();
						}, 100);
					}
				})
			},

文件下载预览

toDetail() {
				uni.showLoading({
					title: '下载中...'
				});
				uni.downloadFile({
					url: this.detailUrl, 
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							console.log('下载成功' + JSON.stringify(res));
							uni.saveFile({
								tempFilePath: res.tempFilePath, //临时路径
								success: function(res) {
									console.log(JSON.stringify(res));
									//打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
										success: function(res) {
											console.log('打开文档成功');
										}
									});

								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.hideLoading();
					}

				});

页面嵌套WebView

<template>

</template>

<script>
	import sPullScroll from '@/components/s-pull-scroll/index.vue';
	import customNavBar from '@/components/custom/CustomNavBar';
	export default {
		components: {
			sPullScroll,
			customNavBar,
		},
		data() {
			return {
				maintitle: '',
				url: '',
				wv: null,
				canBack: false,
			}
		},
		onLoad(options) { //页面第一次进入时触发
			console.log(options)
			this.maintitle = options.title
			this.url = options.url
			if (!this.url) {
				return
			}

			uni.setNavigationBarTitle({
				title: this.maintitle
			})


			// #ifdef APP-PLUS  
			const url = "https://www.baidu.com/"
			const wv = plus.webview.create("", "custom-webview", {
				plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止  
				'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突  
				top: uni.getSystemInfoSync().statusBarHeight +
					44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值  
			})
			wv.loadURL(url)

			const currentWebview = this.$scope
				.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()  
			currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭  			
			const self = this
			wv.addEventListener('loaded', e => {
				wv.canBack(e => { 
					self.canBack = e.canBack
					currentWebview.setTitleNViewButtonStyle(0, {
						color: e.canBack ? '#000' : '#fff',
					});
				})
			})
			this.wv = wv
		},

		onBackPress(e) {
			console.log(e)
			if (e.from === 'navigateBack') {
				return false
			}
			// #ifdef APP-PLUS  
			if (this.wv && this.canBack) {
				this.wv.back()
				return true
			}
			// #endif  
		},
		onNavigationBarButtonTap(e) {
			uni.navigateBack()
		},

		onshow() { // 每次进入页面都触发
			console.log("onshow")
		},
		methods: {

			handleMessage(evt) {
				console.log('接收到的消息：' + JSON.stringify(evt.detail.data));
			},

			loadData() {

			},

		},

	}
</script>

<style lang="scss">
	.page {
		display: flex;
		flex-direction: column;
		top: 0;
		width: 100%;
		bottom: 0;
		position: absolute;
		background-color: #F2F6FA;
	}
</style>