uni-app开发中的各种问题处理

点点圈 提交于 2020-08-05 13:56:00

特别注意:

  ※:在components下的组件,图片路径用 /static/img/back.png  这样的根路径形式,不要用../static  或者 ../../static 的形式,不然很坑,有些平台不报错也不显示,有些找不到路径。

 

tips:防止弹窗遮罩时页面可滚动,在弹窗的外层view标签加上 @touchmove.stop.prevent=""

 

1、关于自定义导航栏中的刘海屏适配问题:

官方提供了一个CSS变量可以直接引用:

var(--status-bar-height)

该变量自动匹配设备平台状态栏高度

此变量可以用calc() 加上其他单位数值来使用

具体参数和说明:官方使用自定义导航栏注意事项

 

2、swiper中高度无法自适应时,采用动态获取节点赋值给外层swiper组件

uni.createSelectorQuery()后加.in(this)可以防止app端出错

 

<swiper :indicator-dots="true" :style="{height:listHeight+'px'}" :autoplay="false" :interval="3000" :duration="1000"></swiper>
  var _self;
    export default {
        data() {
            return {
                listHeight:215
            }
        },
        onLoad() {
            _self=this;
            _self.getEleHeight('.swiper-item');
        },
        onShow() {
            
        },
        methods: {
            getEleHeight(list){
                let info = uni.createSelectorQuery().in(_self).select(list);
              info.boundingClientRect(function(data) { //data - 各种参数
                  if(data != null){
                        _self.listHeight = data.height;
                    }else{
                        setTimeout(function(){
                            _self.getEleHeight('.swiper-item');
                        },300)
                    }
              }).exec()
            }
            
        }
    }

 3、横向scroll-view随子元素宽度自适应

      关键在于给scroll-view的直接下一层view设置如下css:

  width:auto;

  display: inline-block;

  white-space: nowrap;

<scroll-view scroll-x="true" class="scroll_box">
                    <view class="list">
                        <view class="item" v-for="(item,index) of 4" :key="index">
                           
                        </view>
                    </view>
                </scroll-view>

 

.scroll_box{
    width: 100%;
    height: auto;
}

.list{
    width: auto;
    height: 100upx;
    display: inline-block;
    white-space: nowrap;
}

.item{
    width:320upx;
    display: inline-block;
    height: 100%;
}

 

4、部分组件向上滑动超出屏幕时固定在顶部,仿饿了么吸顶

给该组件设置css定位元素position的值为sticky,可以结合top和left值来调节位置。

 

5、关于tabbar的一些情况

建议使用配置的tabbar,自定义的view没有缓存机制。

原生tabbar其实很多功能,参考读完以下知识点能实现大部分需求:

tabbar文档API方法:https://uniapp.dcloud.io/api/ui/tabbar

tabbar官网详解:https://uniapp.dcloud.io/collocation/pages?id=tabbar

 

6、保存图片到本地

真机亲测至少安卓有用,更多请查看:uni图片保存本地(app和微信小程序端)

                uni.showModal({
                    title: '提示',
                    content: '确定保存到相册吗',
                    success: function (res) {
                        if (res.confirm) {
                            
                            uni.downloadFile({
                                    url: _self.ewmImg,//图片地址
                                    success: (res) =>{
                                        if (res.statusCode === 200){
                                            uni.saveImageToPhotosAlbum({
                                                filePath: res.tempFilePath,
                                                success: function() {
                                                    uni.showToast({
                                                        title: "保存成功",
                                                        icon: "none"
                                                    });
                                                },
                                                fail: function() {
                                                    uni.showToast({
                                                        title: "保存失败",
                                                        icon: "none"
                                                    });
                                                }
                                            });
                                        } 
                                    }
                                })
                            
                            
                        } else if (res.cancel) {
                            
                        }
                    }
                });

 

 7、部分常用功能参考地址如下

  登录和图片批量上传可借鉴下方链接

  uni-app 前后端实战课 - 《悦读》:http://www.hcoder.net/tutorials/info_1371.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!