微信小程序全屏背景图

white_poland

已于 2022-01-19 14:07:17 修改

阅读量1.2k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序前端

于 2022-01-19 12:30:26 首次发布

本文链接：https://blog.csdn.net/weixin_40169642/article/details/122578192

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

微信小程序全屏背景图，解决你在设置过程中出现的多次背景图重复出现的问题

wxml

<view class="container" style="height: {{phone_height}}px;">
</view>

wxss

.container { 
    width:100%;
    background-image: url('');
    background-size: cover;
}

上诉url里面的需要你填网络图片或者你本地图片拿去base64后把base64的编码填入，由于我用base64的，信息太长了，文章这里贴不了，你们就自行填写吧。
js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        //获取屏幕的高度
        phone_height: wx.getSystemInfoSync().windowHeight,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {

    },
})

效果图：
在这里插入图片描述