特别注意:
※:在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
来源:oschina
链接:https://my.oschina.net/u/4386695/blog/4287379