uniapp图片自适应

小蓝 • 2024-12-22 15:44 • 编程

一、uniapp自适应布局

uniapp框架自带的flex布局可以很方便地实现图片自适应，即使在不同大小的屏幕上也能保持良好的比例。

首先，在布局容器的样式中添加display:flex;justify-content:center;align-items:center;可以使图片在容器中水平和垂直居中。

<template>
  <view class="container">
    <image src="../assets/image.png" class="img-item" />
  </view>
</template>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
  }
  .img-item {
    width: 50%;
    height: auto;
  }
</style>

上面的代码中，将容器的宽度设置为100vw和高度为100vh，确保容器始终为整个屏幕的大小。同时，图片的宽度为50％，高度自适应，以确保在不同大小的屏幕上图片的比例始终保持不变。

二、uniapp自适应配置

1. viewport配置

uniapp框架提供了viewport配置，可以让我们在不同屏幕分辨率上获得一致的显示效果。在HTML文件的head部分添加下面的代码即可：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

其中，width=device-width表示将Viewport的宽度设为设备的等宽视口（也就是视口宽度等于设备宽度），initial-scale=1、minimum-scale=1、maximum-scale=1、user-scalable=no表示禁止用户缩放网页。

2. rem适配配置

rem是相对于根元素（即html元素）字体大小的单位，使用rem可以解决手机屏幕分辨率不同的问题，保证页面的自适应，uniapp框架提供rem适配，只需要在项目初始化的时候设置你的设计稿宽度即可，比如我的设计稿是375px，那么就需要设置下面的代码：

uni.setMatchedSize({
    width: 375,
    height: 667
})

注意，这里的宽度和高度需要和设计稿保持一致，这样，uniapp框架就可以根据设计稿的尺寸自适应。

3. 图片懒加载

图片懒加载可以减少页面加载时间，提高用户的体验，uniapp框架提供了lazy-load属性，只需要在image标签中添加lazy-load即可实现图片的懒加载，如下所示：

<image src="../assets/image.png" class="img-item" lazy-load />

4. 使用阿里巴巴矢量图标库

在移动端应用中，使用矢量图标库可以提高应用的性能并减小应用体积，uniapp框架提供了方便的安装和使用方法。首先需要安装阿里巴巴矢量图标库，安装方法可以通过命令行运行下面的代码：

npm install uni-icons -S

然后在需要使用图标的页面中引入css文件，如下所示：

import 'uni-icons/css/uni-icons.css';

之后即可在页面中使用矢量图标库中的图标了，如下所示：

<uni-icons type="icon-back">

5. 使用图片CDN加速

如果我们的应用中使用了大量的图片资源，为了让用户加载速度更快，可以考虑使用CDN加速技术，uniapp框架提供了易于使用的CDN加速方法。

首先需要在项目根目录下的vue.config.js文件中添加对应的url，如下所示：

module.exports = {
  chainWebpack: (config) => {
    config.plugin('html').tap((args) => {
      args[0].cdn = {
        css: [
        ],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js',
          'https://cdn.bootcss.com/axios/0.18.0/axios.min.js'
        ]
      };
      return args;
    });
  }
};

在以上的例子中，我们可以将vue js框架和axios js库的url地址设置为CDN引用，这样就可以加速我们的应用加载速度。

三、总结

本文介绍了uniapp框架中图片自适应的方法，包括使用flex布局、viewport配置、rem适配等相关技术，同时还介绍了使用阿里巴巴矢量图标库、图片懒加载、使用CDN加速等技术。通过以上的方法，可以让我们的应用在不同屏幕上都能够保持良好的显示效果，并提升应用的性能和用户的体验。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/285535.html