nvue写法和vue写法是差不多的,但是限制会比较多,不到万不得已,不想写nvue页面!!!
这些都只是个人在使用nvue做app页面遇到的问题,欢迎讨论交流

1.css只支持flex布局,默认 flex-dedirection 为 column
2.不支持 % vw vh 布局
3.宽度设置 100% 可以使用 flex 1,自动铺满整屏
4.css不支持嵌套语法
5.小数点 0.5 0不能少,写成 .5 会导致不生效
6.nvue页面无法使用vue.prototype定义的全局变量,可以通过vuex或者app.vue页面定义globalData去定义全局变量
7.本地图片资源需要放到static目录下面(好烦)
8.在使用map组件的时候,和他同一级的元素可以层级相同,但是不同级的元素,内部使用absolute定位时,map的层级更高
9.picker mode为selector时,搜索图标不显示
10.iconfont图标在nvue页面中不显示(已解决)
11.文字设置字体样式的时候,只能通过text标签进行设置,其他标签不生效
12.目前nvue页面不支持text-shadow样式
13.页面不支持v-if,使用v-show替代或者将元素高度设为0,使用 height:0 方案会有margin问题,需要处理
14.与map组件同级的元素覆盖在map上面时,上面未绑定事件的区域,它的滑动和点击等等事件都会穿透到map组件上,可以通过给整个元素添加一个事件去阻止改现象(具体原因不清楚)

10.图标问题解决方案:参考官网
iconfont在线链接:
@font-face {
font-family: ‘iconfont’; /* Project id 3057581 */
src: url(‘//at.alicdn.com/t/font_3057581_cvuyt30wy7i.woff2?t=1645429986629’) format(‘woff2’),
url(‘//at.alicdn.com/t/font_3057581_cvuyt30wy7i.woff?t=1645429986629’) format(‘woff’),
url(‘//at.alicdn.com/t/font_3057581_cvuyt30wy7i.ttf?t=1645429986629’) format(‘truetype’);
}
使用的时候:(具体使用哪一个看情况,注意需要添加https:)
const domModule = uni.requireNativePlugin(‘dom’)
domModule.addRule(‘fontFace’, {
‘fontFamily’: ‘myIconfont’,
“src”: “url(‘https://at.alicdn.com/t/font_3057581_cvuyt30wy7i.ttf?t=1645429986629’)”,
})

template:<text class="iconfont">&#xe63a;</text>
css:font-family: myIconfont !important; // myIconfont 不能加引号

作为开发记录,一起交流学习进步(qq:1643391875)

Logo

前往低代码交流专区

更多推荐