微信小程序全屏背景图

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

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) {},
})

效果图：

每天进步一点点，开心也多一点点

微信小程序全屏背景图相关推荐

电脑版微信小程序全屏显示方法，手机横屏方法。
电脑版微信小程序全屏显示方法: 在app.json中加入:"resizable": true 注意要与"pages"同级,网上有许多错误方法! 手机横屏方法: ...
微信小程序开发坑背景图之微博图床
这几天在弄微信小程序,哇,那是一个深不见底的坑.唉~三番五次被腾讯拒之门外所以,最后我把我们最核心的东西(类似于朋友圈的备忘录)删除了,花了多少心血啊~ 这个先不提了,回到今天的主题,图床. 大家有 ...
微信小程序全屏轮播（仿北京环球）
空闲时间看见北京环球的微信小程序,感觉首页效果挺好看的,所以就动手做了一下.仅供参考! 文章目录 1.效果预览 2.代码实现 2.1 HTML 2.2 CSS 2.3 JSON 2.4 JS 1.效果 ...
微信小程序展示动态背景图(含三目运算符)
微信小程序展示背景图片一.微信小程序展示背景图片的类型二.语法书写 1.简单展示 2.动态背景图片一.微信小程序展示背景图片的类型当在小程序开发中,本地的背景图片也是可以展示的,但是在真机运行 ...
微信小程序页面添加背景图，图片全屏显示
前言微信的wxss里面不允许使用使用 background: url(),只能另外找方法进行背景图片显示. 方法 1.wxss页面里面设置页面的全屏宽高,以及view添加宽高 page{height ...
微信小程序全屏预览视屏、取消全屏预览
前言 bindfullscreenchange 函数可以监听到视频进入和退出全屏时的事件, 利用次函数,可以实现全屏预览和取消全屏预览的功能. 首先看下bindfullscreenchange回调的参 ...
去除微信小程序导航栏存在，添加全屏背景图
单页面下不需要window 直接在.json文件中 {"navigationBarBackgroundColor": "#ffffff","navig ...
uniapp小程序开发设置系统状态栏高度、全屏背景图设置
效果: uniapp小程序开发设置系统状态栏高度/全屏背景图设置 <view class="login"><view class="status_bar ...
angularjs全栈开发知乎_1-4【微信小程序全栈开发课程】原生小程序框架介绍
1.打开小程序目录打开微信开发者工具,我们上一节新建的项目,我圈出来的这个地方就是小程序的目录结构(如果你那里没有显示,可以点击左上方的编辑器来显示) 2.原生小程序框架介绍给大家画了一张图,重要 ...

微信小程序全屏背景图

微信小程序全屏背景图相关推荐

最新文章

热门文章