uniapp小程序端适配屏幕宽度/图片居中/图片全屏图片适配于所有移动设备机型,

前言:

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

  • uniapp中想要实现图片自适应手机宽度且不失真(不模糊),得按照下面这样操作,这也是我本人实际项目中遇到的(给出主要代码)。全屏的图片尺寸是:1080px
<image :src="br('/static/kur/1080_02.jpg')" :style="{'width':wx_width+'px','height':'75px'}" class="serve-img" mode="aspectFit"></image>

onLoad(){
    let res = uni.getSystemInfoSync()
    this.wx_width = res.screenWidth;
}

因此,按如下去获取宽度:

<view class="kur-img">
	<image 
	:style="{'width':xw_whith+'px','height':xw_height-220+'px'}" 
	:src="br('/static/kur/kur.jpg')" mode="scaleToFill">
	</image>
	<view class="button">
		<view class="btn" @click="a('/pagesB/ucenter/kur')">申请额度</view>
	</view>
</view>

1.动态定义宽度

:style="{'width':xw_whith-20+'px'}"
export default { 
      data() {
         return {
            xw_whith: '',
            xw_height: '',
          }
        },
	onLoad() {
		let res = wx.getSystemInfoSync()
		console.log(res)
		this.xw_whith = res.screenWidth
		this.xw_height = res.screenHeight
	},
        methods: {
			
        }
    }

2.css

.button{
	   text-align: center;
	   .btn{
		   width: 360rpx;
		   background-color: #E02925;
		   border-radius: 8rpx;
		   padding: 16rpx 0rpx;
		   margin: auto;
		   color: #fff;
		   font-weight: bold;
		   letter-spacing: 4px;
		   margin-top: 66rpx;
	   }
   }

若不想图片铺满全屏,左右有间距 则加上以下css (左右宽度10像素。)

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

效果图预览

图片[1]孙先森资源|专注优质网络资源教程分享uniapp小程序端适配屏幕宽度/图片居中/图片全屏图片适配于所有移动设备机型,孙先森资源|专注优质网络资源教程分享孙先森资源教程
© 版权声明
THE END
喜欢就支持一下吧
点赞6赞赏
分享
评论 抢沙发
孙先森资源的头像孙先森资源|专注优质网络资源教程分享孙先森资源教程

昵称

取消
昵称表情代码图片