uniapp小程序端适配屏幕宽度/图片居中

前言：

在Uniapp项目开发之中，如果在小程序上需要做屏幕的宽度适配，如：做image的时候，让宽度拉伸到所有image标签，左右隔10px。用width=“100%”是不行的，只能显示一半。因此，按如下去获取宽度：

<view class="journa_view" v-show="item.isImageShow">
<image :style="{'width':xw_whith-20+'px'}" :src="item.allimage" @click="TanPreviewImage(index)" mode="scaleToFill"></image>
</view>

1.动态定义宽度

:style="{‘width’:xw_whith-20+‘px’}"

data() {return {xw_whith: ''}}onLoad: function(e) {_self = thislet res = wx.getSystemInfoSync()this.xw_whith = res.screenWidth}

2.css

.journa_view {margin-left: 10px;margin-right: 10px;margin-top: 10upx;}

3.图片适配于所有移动设备机型，左右宽度10像素。

效果图预览

uniapp小程序端适配屏幕宽度/图片居中相关推荐

uniapp 小程序左右滑动切换不同图片序列帧，实现3d效果
uniapp 小程序左右滑动切换不同图片序列帧,实现3d效果最近接了个新的需求,将多张序列帧图片,通过程序滑动加载不同的序列帧,给用户看到的效果就好像3d那样,360度顺逆时针旋转,一开始尝试了两种 ...
找茬小游戏，uniapp小程序端+pc端操作静态页
需求: 做一个类似找茬的答题小程序: 提交后根据坐标返回值在图中标识出点对.点错.未点的茬: pc端页面也要写一个,用于用户设置点位. 难点: pc端和小程序端宽高比例的问题: 如何判定是否选对: 干 ...
uni-app小程序加载页面出现图片拉长再变正常的原因
在使用uniapp写微信小程序的页面样式的时候,你会发现一个现象就是加载图片的时候回先变长然后在正常显示,在pc端和app端没有问题. 这个原因是因为图片高度是自适应的,没有给固定高度. 解决方案就是 ...
uniapp小程序发布过程中，图片跟音频资源超过200K无法上传
uniapp开发小程序,项目中图片跟音频资源太多造成小程序上传失败,可进行静态资源分包处理. 1.打开项目,在项目静态资源文件夹下创建多个存放静态资源的文件夹 2.每个文件夹内存放的静态资源不不可超过 ...
uniapp小程序端使用腾讯地图
一.获取腾讯地图密钥 1. 找到腾讯地图API 腾讯地图A地址PI 注册并登录后点击开发文档选择微信小程序JavaScript SDK 进入后按照 Hello world! 中的步骤进行 2. 申请密 ...
uniapp之小程序端生成分享海报（带自定义参数的二维码）
内容需求: 小程序端生成一个海报,海报内容包括当前授权账号的头像,当前授权账号的邀请码,一张特定图片,分享页面的带对应参数的小程序二维码:生成的海报需要保存到本地功能方法: 1.前端用canvas绘 ...
uniapp小程序适配异形屏
uniapp小程序适配异形屏 App.vue写入底部适配横线小程序自定义顶部适配 App.vue写入 globalData: { // 适配刘海屏test: false,statusBarHeig ...
uni-app 微信小程序端-AirKiss一键配网
uni-app 微信小程序端-AirKiss一键配网发现网上很多关于微信小程序配网的文章都是微信小程序原生开发,uni-app少之又少.这篇文章就介绍一下怎么在HBuilder X使用airkiss ...
小程序实现image标签的图片铺满整个屏幕，高度自适应
小程序实现image标签的图片宽度铺满整个屏幕,高度自适应微信小程序官方文档里image标签有mode属性(图片裁剪.缩放模式),而mode="widthFix"是保持宽度不变, ...

uniapp小程序端适配屏幕宽度/图片居中

前言：

效果图预览

uniapp小程序端适配屏幕宽度/图片居中相关推荐

最新文章

热门文章