- 1.tabbar 文字显示问题
- 视频播放ios黑屏
- 视频链接正常,有些黑屏有些正常播放
- 登录页跳转
- 全局使用自定义组件配置
- css安全距离,距离电量栏
- uniapp 配置tabbar后,app端只显示icon,不显示文字,其它端显示正常,原因:可能在配置的在pages.json中设置tabBar ,font-siez用的rpx为单位,在这里只能用px;
- uniapp 开发小程序,视频在Android正常播放,ios上黑屏?
粗暴解决法: 加一句代码: :controls="false" ,但可能造成掉帧现象
<video :id="'id'+index" object-fit='contain' :src="item.video_path"
:play-btn-position='center' :controls="false" :custom-cache="false"style="vertical-align: middle;">
</video>
- 做短视频小程序项目时,出现开发者工具播放正常,一些视频在手机预览或真机测试黑屏,url链接正常拿出来也能正常播放,并没有报错,排查很久不知道原因,直到看见这篇问答
但是因为赶进度,短视频只是项目中一个很小的模块,就没打算重构代码,好的思路是全局都只控制一个video显示播放,而不是像我代码中用v-if生成,判断swiper滑动时,当前显示的item，隐藏图片，生成video; 重点: 当我们暂停图片时,video标签就会移除,图片会显示,所以需要再判断一下当前item 下标是否变化
//这里通过判断是否播放的是当前视频 (item.istrue) 来将image隐藏,生成video
//index_是当前播放视频的index
<swiper :current="0" :circular="true" :vertical="true" @change="changefun"
@animationfinish="animationfinishfun">
<swiper-item v-for="(item,index) in PayVideo" :key="index">
<view >
<image v-show="!item.istrue&&index!=index_" :src="item.cover"></image>
<videov-if="item.istrue || index==index_" class="video" :id="'id'+index" object-fit='contain'
:src="item.video_path" binderror="onError" @ended="onEndPlay" :play-btn-position='center'
:controls="false" @click="click(item.istrue)" :custom-cache="false"
style="vertical-align: middle;"></video>
</view>
</swiper-item>
</swiper>
- 做app项目时,登录页面跳转要用uni.switchTab,不然跳转不了; 这是一个很普通,但是容易忽略的问题
-
自定义组件全局引入使用:
注意点: 自定义组件命名需规范,要放在目录: src/components/组件名称/组件名称.vue
官方加了中划线,rc-button是自定义的
//自定义组件 rc-button
<script>
export default {
name:"RcButton", //借鉴官方写法
}
</script>
//pages.json
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
"^uni-(.*)": "@/components/uni-$1/uni-$1.vue", //引入uView的匹配规则,
"^rc-(.*)": "@/components/rc-$1/rc-$1.vue" //自定义匹配规则,跟着上面官方写的嘿嘿
},
}
- 去除app nabbar后,会发现页面是从最顶部开始的,所以我们需要设置安全距离,官方有一个css变量: padding-top:var(--status-bar-height);可以使头部距离在电量栏下
- 页面跳转,url过长,跳转页面获取的url被裁剪
//跳转页面
let url = encodeURIComponent(JSON.stringify(data.url)) //将文本字符串编码为一个有效的统一资源标识符
uni.navigateTo({
url: `/pages/home/tbAuthorization/tbAuthorization?url=${url}` //这里跳转的页面是放webview的页面
})
//接收页面
onLoad(){
this.url = JSON.parse(decodeURIComponent(opt.url)); //解码URI 组件。
}
- 使用scrool-view 滚动定位
//scroll-into-view方法:
//:id 这里的绑定的值不能以数字开头,所以在前面拼接字符串,这个就是滚动定位的关键
<scroll-view :scroll-x="true" :scroll-into-view="selectId" >
<view v-for="(item, index) in goods" :key="index" :id='"id"+item.id' >
子元素
</view>
</scroll-view>
//script
data(){
return{
selectId:""
}
},
methods:{
//在点击要定位的事件绑定该方法
onScrool(){
this.$nextTick(()=> {
this.selectId = "id" + this..goods[0].id //我这里是恢复到第一个值所以选取的第一个,如果定位的话,就换成要定位元素的id即可定位
});
}
}
