uniApp 开发nvue页面踩过的坑

  • 开发nvue页面踩过的坑
  1. nvue页面不能使用背景图片
  2. 布局不能使用百分比、没有媒体查询
  3. 背景颜色不支持简写,准确写法:background-color: red;
  4. nvue中不支持z-index控制层级,越靠后的代码层级越高
  5. 不能使用阴影,可以使用模拟阴影
  6. 子元素超出父元素大小是不会显示的,可以加大父元素的大小来让子元素显示
  7. nvue的css,在选择器方面支持的较少,只支持简单的类名控制class=“classA”
  8. 文字内容,必须、只能在text标签下,只有text标签可以设置字体大小,字体颜色,并且不支持text标签嵌套
  9. nvue 页面只能使用 flex 布局,不支持其他布局方式,布局排列方向默认为竖排(column),如需改变布局方向可以使用flex-direction: row;改变为横排
  10. 边框不支持简写,准确写法:
 	border-width: 1px;
	border-style: solid;
	border-color: red; 
  1. 在 nvue 里面不能给 image 设置 border-radius,想要将矩形图案变为圆形需要在 image 外面包一层 div,代码如下:
    <div style="width: 400px;height: 400px;border-radius: 400px;">
   	   <image style="width: 400px;height: 400px;" src="https://uni@2x.png"></image>
    </div>
  1. 在 nvue 里面不能在 style 节点下使用 @import “xxx.css” 这样的方式引入外部 css,需要使用如下方式引入 css:
 	<style src="@/common/test.css"></style>
  1. 在 nvue 里面不能直接在css中 通过 @font-face 这样的方式引入字体文件的,需要在js中使用 dom 模块引入字体文件,src字段的url的括号内一定要使用单引号
 	const domModule = weex.requireModule('dom');
   	domModule.addRule('fontFace', {
   		'fontFamily': "iconfont",
   		'src': "url('../../static/iconfont.ttf')"
   	});
  • 14
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值