UNIAPP 宽屏适配响应式

Wn洋

已于 2023-05-30 11:16:25 修改

阅读量3k

点赞数 3

分类专栏：前端移动端布局文章标签： uni-app javascript 移动端布局前端

于 2023-05-29 21:26:29 首次发布

本文链接：https://blog.csdn.net/qq_43129072/article/details/130936969

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

移动端布局

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在uniapp中实现响应式布局，以适应不同尺寸的屏幕，包括手机和平板。作者通过监听窗口大小变化并使用Vuex存储数据，以及自定义w-row和w-col组件，实现了类似Bootstrap的栅格系统。由于uniapp不支持媒体查询，作者采用了动态类名的方式来处理不同屏幕尺寸的样式。同时，文章提到了在不同高度屏幕中的适配问题以及为何未选择uniapp的多window方案。

摘要由CSDN通过智能技术生成

UNIAPP 响应式

目的

由于公司老项目只适用于安卓 ios手机端，完全按照 750px 做的适配，现如今公司特殊屏幕需要使用1280*720。
需要进行适配，工期比较端中间可能还会有各种平板电脑的适配，因此采用的bootstrap 响应式布局，但是uniapp 无法使用媒体查询故自己实现了响应式布局

思路

使用 uni.onWindowResize(this.onsize) 在app.vue 监听屏幕大小发生变化的是动态响应并把值存储在vuex中方便后续使用

onsize(res) {
    if(res) {
        this.$store.commit("setScreenSize", {
            screenWidth: res.size.windowWidth,
            screenHeight: res.size.windowHeight
        })
        
    } else {
        this.$store.commit("setScreenSize", {
            screenWidth:  uni.getSystemInfoSync().screenWidth,
            screenHeight: uni.getSystemInfoSync().screenHeight
        })
    
    }
},

由于初次进入 app.vue 监听并不会触发故主动调用一次根据传入的值来判断是主动调用的还是动态响应的

封装 w-row

<template>
<view class="w-Row" :class="activeClass">
    <slot></slot>
</view>
</template>

<script>
    export default {
        name: 'w-row',
        props: {
            // 两个子item 的间距
            gutter: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                screenWidth: 360,
                screenHeight: 360,
            }
        },
        computed: {
            rowStyle() {
                let data = {}
                data.width = this.$store.state.screenWidth + 'px'
                return data
            },
            
            activeClass() {
                // xs	<768px 响应式栅格数或者栅格属性对象
                // sm	≥768px 响应式栅格数或者栅格属性对象
                // md	≥992px 响应式栅格数或者栅格属性对象
                // lg	≥1200px 响应式栅格数或者栅格属性对象
                // xl	≥1920px 响应式栅格数或者栅格属性对象x
                const w = this.$store.state.screenWidth;
                console.log(w)
                if(w < 768) {
                    return "xs"
                } else if(w >= 768 && w < 992) {
                    return "sm"
                } else if(w >= 992 && w < 1200) {
                    return "md"
                } else {
                    return "lg"
                }
            }
            
        },
    
        mounted() {
    
        },
        
        methods: {
        
        }
    }
</script>

<style lang="scss">
    .w-Row {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    
</style>

w-col 封装

<template>
	<view class="w-Col" :style="colStyle">
		<slot></slot>
	</view>
</template>

<script>
	// xs	<768px 响应式栅格数或者栅格属性对象
	// sm	≥768px 响应式栅格数或者栅格属性对象
	// md	≥992px 响应式栅格数或者栅格属性对象
	// lg	≥1200px 响应式栅格数或者栅格属性对象
	// xl	≥1920px 响应式栅格数或者栅格属性对象
	
	export default {
		props: {
			xs: {
				type: Number
			},
			sm: {
				type: Number
			},
			md: {
				type: Number
			},
			lg: {
				type: Number
			},
			// xl: {
			// 	type: Number
			// }
		},
		data() {
			return {
				screenWidth: 360,
				screenHeight: 360,
				gutter: 0
			}
		},
		computed: {
			colStyle() {
				let data = {}
				const w = this.$store.state.screenWidth;
				let objWidth = 0;
				
				// xs	<768px 响应式栅格数或者栅格属性对象
				// sm	≥768px 响应式栅格数或者栅格属性对象
				// md	≥992px 响应式栅格数或者栅格属性对象
				// lg	≥1200px 响应式栅格数或者栅格属性对象
				// xl	≥1920px 响应式栅格数或者栅格属性对象
				if(w < 768) {
					objWidth = this.xs / 24 * 100
				} else if(w >= 768 && w < 992) {
					objWidth = this.sm / 24 * 100
				} else if(w >= 992 && w < 1200) {
					objWidth = this.md / 24 * 100
				} else {
					objWidth = this.lg / 24 * 100
				}
				data.width = objWidth + '%'
				// #ifdef APP-PLUS
				data.paddingLeft = (this.$parent.gutter || 0 )/ 2 + 'px'
				data.paddingRight = (this.$parent.gutter || 0 )/ 2  + 'px'
				// #endif
				
				// #ifdef H5
				data.paddingLeft = (this.$parent.$parent.gutter || 0 )/ 2 + 'px'
				data.paddingRight = (this.$parent.$parent.gutter || 0 )/ 2  + 'px'
				// #endif
				
				return data
			}
			
			
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.w-Col{
		box-sizing: border-box;
	}
</style>

遇到的坑在 uniapp 中显示在浏览器时获取父节点gutter时需要往上找两个父节点，在app 中只需要找一个父节点就能找到父节点的 gutter 代码如下

// #ifdef APP-PLUS
data.paddingLeft = (this.$parent.gutter || 0 )/ 2 + 'px'
data.paddingRight = (this.$parent.gutter || 0 )/ 2  + 'px'
// #endif

// #ifdef H5
data.paddingLeft = (this.$parent.$parent.gutter || 0 )/ 2 + 'px'
data.paddingRight = (this.$parent.$parent.gutter || 0 )/ 2  + 'px'
// #endif