uniapp-uni-popup-底部弹出

317 阅读1分钟

当时创建uniapp的时候选择的是标准版,在写uni-popup的时候报错,是因为没有uni-ui插件,去uni-cloud下载uni-ui插件后,按照官网的写法,发现不生效,看了终端,说是uni-ui依赖sass,下了sass之后,说uni-ui指定sass4.0版本,删了重新下也是不行

解决方法:

npm i sass -D   或   yarn add sass -D  
npm i sass-loader@10.1.1 -D   或   yarn add sass-loader@10.1.1 -D
npm i @dcloudio/uni-ui   或   yarn add @dcloudio/uni-ui

image.png

uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app 项目,需要在 HBuilderX 中安装 scss 插件;如果是使用 cli 创建的 uni-app 项目,需要在项目下npm安装 node-sass 和 sass-loader

按照以上这些版本下,并且在script标签当中引用你所需要的组件,就可以实现效果

或者,不在script标签当中引用你所需要的组件,在node_modules同级创建一个目录

image.png

将你所需要的组件复制进来,就可以不用在script标签当中引入了

再接着,我想实现一个从底部弹出的一个pop,但是发现在ios大部分机型上,底部导航条会出现一条空隙,如下

image.png

经过查询资料,得出,只需要在pop上写一个 :safe-area="false" 属性就可以了

image.png

如果你觉得很麻烦,那你可以找到uni-popup.vue文件,修改源码

image.png

image.png

在底部弹出样式处理这里,将paddingBottom这条删除

image.png

就好了