精华内容
下载资源
问答
  • 微信小程序全屏背景设置

    千次阅读 2018-05-24 00:06:08
    微信小程序默认了page属性,只需要设置page{ min-height: 100%; background-color: black; }就是全屏黑色了

    微信小程序默认了page属性,

    只需要设置

    page{
      min-height: 100%;
      background-color: black;
    }
    就是全屏黑色了
    展开全文
  • 在做小程序的时候遇到以下几个问题,这里总结下,希望能给大家排排坑~ 1.图片如何铺满全屏 //wxml <view class="body" style="background-image:url('图片链接')" ></view> //wxss .body{ height: 100%; ...

    在做小程序的时候遇到以下几个问题,这里总结下,希望能给大家排排坑~

    1.图片如何铺满全屏

    //wxml
    <view class="body" style="background-image:url('图片链接')" ></view>
    //wxss
    .body{
      height: 100%;
      width: 100$;
      min-height: 100%;
      background-size: 100% 100%;
    }
    

    上面代码是我们平时经常写的,设background-image背景,height高度和width宽度都设了100%,100%是以父元素为标准,也就是小程序的屏幕的框框,都是你们真机测试的时候,它可能出现并没有铺满屏幕,这时候我们就需要用到小程序的vw,vh单位了.如下

    .body{
      height: 100vh;
      width: 100vw;
      min-height: 100vh;
      background-size: 100vw 100vh;
    }
    

    width设为100vw单位,height设为100vh单位,
    vw和vh是css3中的新单位,是一种视窗单位,在小程序中也同样适用。
    小程序中,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw
    小程序中,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh
    这样子就解决了背景图铺满全屏的问题了.

    1. 小程序为什么背景图失效
      小程序背景是没办法用本地图片的,所以就会出现本地测试成功,真机上线测试失败的结果
      在这里插入图片描述
      背景图在css中是没办法设置的,只能如图上设置,且需要是在网上的地址,本地图片不可以
    展开全文
  • 注意:微信小程序上线要用线上图片,因为本地打包后不能超过2M

    ONE:注意:微信小程序上线要用线上图片,因为本地打包后不能超过2M(这种方法是写死的,大多数情况下是不友好的) 往下看,介绍一种有好的方法~
    在这里插入图片描述
    TWO:根据设备高度自适应背景图片 的 写法

    html页面的写法在这里插入图片描述

    js页面的写法

    在这里插入图片描述

    用线上图片或将本地图片转码为base64格式

    用线上图片或将本地图片转码为base64格式

    ( 重要的事说两遍,否则真机调试不显示背景图片不怪我喽~)

    展开全文
  • <p>uni.app运行到微信小程序,用这种方法设置页面背景色,如果不设置min-height,页面没有高度支撑,没有效果,如果设置min-height,各种手机页面高度不同,min-height的值不好...
  • 页面的wxss里设置page page{ background-image:url(https://i.loli.net/2020/08/08/KIaQSMvrtEVCwOb.jpg); width:100%; height:100vh; background-size: 100% 100%; } 其中的图片url可以从SM.MS...

     在页面的wxss里设置page

    page{
      background-image:url(https://i.loli.net/2020/08/08/KIaQSMvrtEVCwOb.jpg);
      width:100%;
      height:100vh;
      background-size: 100% 100%;
    }

     其中的图片url可以从SM.MS(https://sm.ms/)网站上传,然后在下面的image url复制粘贴

    宽高设置,让图片保持比例

    背景大小,让图片填充屏幕,如果图片和屏幕比例不同,则直接填充

     

    调整app.json里面的window

    
      "window":{
        "navigationStyle":"custom" 
      },
    

    这一步设置是让图片覆盖整个手机,包括状态栏

     

    展示

    展开全文
  • 页面背景颜色和view高度占满全屏
  • 微信小程序设置背景铺满全屏

    千次阅读 2018-09-07 16:24:00
    参考方法: 新版本升级取消了默认page的100%的特性 需要在app.wxss文件中加入如下代码:  page{ height:100%;  } 转载于:https://www.cnblogs.com/pbblogs/p/9605499.html...
  • 小程序中视频作为页面背景

    千次阅读 2020-12-30 18:37:09
    业务背景:实现在小程序原生页面中以视频作为页面背景效果 wxml: <video id="myVideo" src="https://download.mia.com/newpc/home.mp4" loop muted controls="{{false}}" show-play-btn="{{false}}" show-...
  • 微信小程序背景图片铺满全屏

    万次阅读 2019-08-16 19:37:10
    效果图: 示例代码: 总结: 全屏的秘诀在于: background-size: 100% 100%; 阅读完有任何问题,联系我微信:ichatme002,备注来自【CSDN】
  • 微信小程序开发过程中,为了增加界面的美观程度,可以尝试将一张图片设置为背景。在网上最主要的方法为: index.wxml <view class="content"> <!--pics文件夹下的background.jpg文件--> <image ...
  • 微信小程序设置全屏的方法

    万次阅读 2018-07-15 23:50:01
    也许有些人没有发现,其实微信小程序是支持设置为全屏显示的。官方文档上没有直接提出 全屏 这个字眼。但是这个配置属性可以将页面全屏显示:即: navigationStyle: 'custom'不使用官方提供的默认导航栏: 而自己...
  • <image class="backgroundImg" src="../images/back4.jpg" style=...通过设置style="opacity:{{1}}" 调节背景图的透明度 范围为0-1,值越,透明度越高 全屏拉伸css: .backgroundImg { width: 100vw; he...
  • 最近开发微信小程序,遇见image全屏的问题,发现高度100%后图片还是无法铺满全屏,在屏幕最下方有一个白色的空白条。晚上有很多解决方法,比如样式设为absolute: .image{ width:100%; height: 100%; position:...
  • 小程序修改单页面背景颜色

    万次阅读 2018-07-20 15:02:09
    设置小程序页面背景颜色,一开始设置了一个全局的背景颜色,在app.json的widows对象中进行设置 "window": { "backgroundTextStyle": "light", "...
  • 解决微信小程序进入就全屏问题

    千次阅读 2019-12-19 23:05:17
    最新的设置安卓视频不全屏播放(不知道是否全部安卓机型都支持)的方法 前两天做了一个石头剪刀布的视频游戏项目,测试过程中找到了更加简便的方法,分享下,如下设置HTML代码: <video id="videoID" controls ...
  • 外层最大盒子宽高设置100%后,全屏设置背景颜色,背景颜色无效 解决方案: 样式文件加一个 page{height: 100%;} 转载于:https://www.cnblogs.com/xingxingzi/p/11586334.html...
  • 自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示)。 /** * 微信小程序图片预览组件 * 1.支持预览svg、png、jpeg、jpg、bmp等小程序支持的格式...
  • 上代码 wxml: <image wx:for="{{item.img.data}}" wx:for-item="items" src="{{items}}" bindtap='clickImg' id="{{item.index}}"></image> 此处是我的项目代码 主要看两个属性 src 以及bindtap 就够...
  • 微信小程序自定义全屏遮罩

    千次阅读 2018-10-10 10:19:33
    /* 设置背景遮罩层样式 */ .mask { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; flex-...
  • 很简单只需要给page设置高度就可以了 wxss: page{ height: 100%;/*生效*/ } .container{ width: 100%; height: 100%;/*不生效*/ background:red; }
  • *高端的食材,往往只需要最朴素的烹饪方式,本文用css旋转定位实现视频全屏...1.在原页面操作属实麻烦,需要点击全屏按钮跳转到新页面播放 2.由于需要保留侧边栏的点赞关注等功能,所以需要组件分离复用 3.由于存在横竖
  • 微信小程序--窗口背景颜色铺满页面

    千次阅读 2019-03-26 11:13:06
    编写一个页面 welcome.wxml文件: <view class="container"> <image src="/images/avatar/1.png" class='user-avatar'></image> <!--text \n可进行换行 包含在这个标签里面的文字在手机上...
  • 直接上代码: WXML: &amp;lt;view class=&quot;container&quot;&amp;gt; ... &amp;lt;/view&amp;gt; WXSS: .container::after { content: &quot;&quot;; ...
  • 微信小程序背景图片完全覆盖显示

    万次阅读 2017-12-06 10:22:29
    微信小程序中,背景图片全屏在微信小程序中需要设置背景图片全屏,这里用到css的知识我们可以: page { overflow:hidden; position:fixed; background-image:url('http://someweb.com/main.jpg'); margin: 0px...
  • 官方文档: { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "...back
  • 我们在做Android的时候想改变整个布局的颜色很简单,但是在微信小程序中如果你的内容没填充屏幕的话,你想改变整个布局的颜色在view的属性中去设置background-color是没有用的,这就相当于我们Android中设置的额wrap-...
  • 微信小程序侧边页面

    2019-07-22 17:56:47
    微信小程序侧边 参数 参数 类型 说明 默认值 mask Boolean 是否有遮罩 true fullScreen Boolean 是否全屏显示 false type String 左侧/右侧滑入 left background String 背景色 #fff header Boolean...
  • 小程序直播页面遮罩及按钮设置

    千次阅读 2018-10-17 20:15:11
    小程序的直播页面,一般我们都会遇到待直播状态时的处理,即对组件进行遮罩。 map、video、canvas、camera、live-player、live-pusher等组件,一般图片或其他组件是无法覆盖的,只能使用cover-view组件 和cov...
  • 最近在开发支付宝小程序,需求之一是登录页面导航栏变色。打开支付宝API并没有十分理解。写个博客记录解决流程与代码 如果急于看代码。请翻到最下 首先。先祭出支付宝API连接...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,077
精华内容 3,630
关键字:

小程序页面背景全屏