開(kāi)發(fā)環(huán)境版本

“vue”: {
“version”: “2.6.14”
}
“uview-ui”: {
“version”: “1.8.7”
},

全局組件引用的問(wèn)題

用如上方式在H5端運(yùn)行時(shí)沒(méi)有問(wèn)題的，但在微信小程序端就找不到組件，所以修改為全部在main.js中引入

官方解釋如下

https://ask.dcloud.net.cn/question/145410

u-popup設(shè)置top彈出模式時(shí)H5端運(yùn)行正常，微信小程序端設(shè)置margin-top想不遮擋navBar卻無(wú)效

<u-popup class="info-top" v-model="show" z-index="10" mode="top" :style="{ 'margin-top': popTop + 'px' }">
			<view class="content">
				<view class="box">
					<view class="item u-flex u-font-28 color-666" style="border-bottom: 1rpx solid #F3F3F3;">
						<text>報(bào)貨時(shí)間</text>
						<text class="u-flex" style="color: #999999;" @click="choiceDate">{{ startTime }}至{{ endTime }}
							<i class='iconfont icon-xiangyou2'></i> </text>
					</view>
				</view>
				<view class="confrim-btn u-flex">
					<view class="reset button u-font-28 u-text-center" @click="reset">
						重置
					</view>
					<view class="ok button u-font-28 u-text-center" @click="ok">
						篩選
					</view>
				</view>
			</view>
		</u-popup>

if (!this.popTop) {
					this.popTop = await this.getNavBar()
				}
				console.log(this.popTop)
				this.show = !this.show

getNavBar() {
				return new Promise(resolve => {
					setTimeout(() => {
						this.$u.getRect('.header').then(res => {
							console.log('res.height', res.height);
							resolve(res.height)
						})
					}, 0)

				})
			}

H5端運(yùn)行效果

微信小程序端運(yùn)行效果

一開(kāi)始以為：style沒(méi)起作用，后面自己手寫(xiě)了一個(gè)popup后發(fā)現(xiàn)是u-popup可能存在兼容性問(wèn)題
修改代碼如下：

<!-- 頂部彈窗，解決微信小程序top從最頂端出來(lái)，margin-top不起作用 -->
		<view class="popup u-p-l-18 u-p-r-18" v-show="show" @click="show=false" @touchmove.prevent>
			<view class="content" :style="{ 'margin-top': popTop + 'px' }">
				<view class="box">
					<view class="item u-flex u-font-28 color-666" style="border-bottom: 1rpx solid #F3F3F3;">
						<text>報(bào)貨時(shí)間</text>
						<text class="u-flex" style="color: #999999;" @click="choiceDate">{{ startTime }}至{{ endTime }}
							<i class='iconfont icon-xiangyou2'></i> </text>
					</view>
				</view>
				<view class="confrim-btn u-flex">
					<view class="reset button u-font-28 u-text-center" @click="reset">
						重置
					</view>
					<view class="ok button u-font-28 u-text-center" @click="ok">
						篩選
					</view>
				</view>
			</view>
		</view>

/* 上彈框 */
	.popup {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9998;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	
	.content {
		position: relative;
		width: 100%;
		top: 0;
		background-color: #fff;
		z-index: 9999;
		.box {
			padding: 32rpx;
	
			.item {
				justify-content: space-between;
	
				padding-bottom: 32rpx;
			}
		}
	}
	
	.confrim-btn {
		.button {
			width: 50%;
			height: 80rpx;
			line-height: 80rpx;
		}
	
		.reset {
			background-color: #F3F3F3;
		}
	
		.ok {
			background-color: #F4613F;
			color: white;
		}
	}
	
	.btn {
		padding: 12rpx 20rpx;
		border-radius: 32rpx;
		background: linear-gradient(90deg, #F4613F 0%, #EA2E02 100%);
		margin-left: 16rpx;
		color: white;
		font-size: 28rpx;
	}

H5端運(yùn)行效果

微信小程序運(yùn)行效果

只是沒(méi)做折疊的過(guò)渡動(dòng)畫(huà)了，其他運(yùn)行正常文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-485765.html

自定義tabbar，windowHeight的高度包不包括設(shè)置的tabBar高度

async getHeight() {
				let header = await this.$u.getRect('.header')
				let bar = await this.$u.getRect('.bottomTab')


				let windowHeight = await uni.getSystemInfoSync().windowHeight
				console.log("offer-header", header)
				console.log("offer-bar", bar)
				console.log("offer-windowHeight", windowHeight)
				const type = uni.getSystemInfoSync().uniPlatform
				if (type == 'mp-weixin') {
					this.scrollViewHeight = parseFloat(windowHeight - header.height)
				} else {
					this.scrollViewHeight = parseFloat(windowHeight - header.height - bar.height)
				}

				console.log("offer-scrollViewHeight", this.scrollViewHeight)
				// this.scrollViewHeight = parseFloat(this.windowHeight) - res.height - 50			
}

到了這里，關(guān)于uniapp微信小程序兼容性問(wèn)題記錄（持續(xù)記錄）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！