记一次小程序的遇到的问题（使用uniapp编写）

1.安卓视频调用pause()无效和视频封面无法设置大小

<template><view class="voide-box" :style="{ '--width': width, '--height': height }"><video v-if="!show" id="myVideo" @pause="onPause" @ended="ended" @play="play" @click="change()" :muted="true" :controls="false" :src="video"></video><image v-show="show||showPlay" src="../static/images/play.png" class="play-btn" @click="playVoide()"></image><image v-show="show" v-if="videoImg" :src="videoImg" class="voide-img"></image></view>
</template><script>
import api from '@/utils/common/api';
export default {name: 'custom-video',props: {width: {type: String,default: ''},height: {type: String,default: ''},video: {type: String,default: ''},videoImg: {type: String,default: ''}},data() {return {show: true,showPlay:true,videoNode: null};},onReady: function(res) {this.videoNode = uni.createVideoContext('myVideo',this);console.log(api.globalData.systemInfo.system);},methods: {playVoide() {this.show = false;this.showPlay = false;this.videoNode.play();},onPause(){this.showPlay = true;},ended(){this.show = true;this.showPlay = true;},play(){this.showPlay = false;},change(){if(this.showPlay){this.videoNode.play();}else{if(api.globalData.systemInfo.system=='android'){this.show = true;}else{this.videoNode.pause();}}}}
};
</script><style scoped>
.voide-box {position: relative;height: var(--height);width: var(--width);
}
video {height: var(--height);width: var(--width);
}
.voide-img {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 0;background-color: white;
}
.play-btn {position: absolute;width: 140rpx;height: 140rpx;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;
}
</style>

2.使用循环动态设置事假失效

简单的数组，没有id，key设置的就是本身

<divclass="select-item"v-for="(item, index) in time":key="item":class="activeTime == index ? 'selected' : ''"@click="changeTime(index)">{{ item}}
</div>

观察生成的节点发现是item重复的部分没有重新渲染，而新生成的index是重新从开始设置的：

后来修改为

this.time= [];
setTimeout(()=>{this.time = arr;
})

定时器的作用是想等空数组渲染让后再重新赋值，类似于强制重新渲染

记一次小程序的遇到的问题（使用uniapp编写）相关推荐

记一次小程序自定义导航栏及加载动画的解决方案
记一次小程序自定义导航栏及加载动画的解决方案主要逻辑就是动态获取设备的 statusBarHeight 和 titleBarHeight,来设置导航栏的高度和 paddingTop ip6 ipx ...
java基本微信小程序的快递代收派送系统 uniapp小程序
随着时代的发展,人们生活的节奏越来越快,但是快递已经成为人们生活中的一个重要组成部分,基本每个人都会收发快递,如果这些事情全部都到快递站点进行处理,是很浪费时间和精力的一件事情.为了能够让快递代收和派 ...
uni-app转小程序遇到的问题（组件使用插槽的问题）（跨端兼容、条件编译）（小程序自定义胶囊按钮封装）(uni-app挂载原型链)
1.uni-app转小程序组件使用插槽的问题 uni-app封装的组件使用问题 1.插槽样式:H5页面编译是有效果的,在小程序中编译的位置错误,它会跳出本来的插槽位置到最后. !!!解决方法: 使用父 ...
小程序跨端框架（taro/uni-app/kbone）横评之2020版
文章转自:https://www.cnblogs.com/hupingzui/p/12692509.html 微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发 ...
小程序跨端框架（taro/uni-app/kbone）横评之2020版（对比很到位！！）
小程序跨端框架(taro/uni-app/kbone)横评之2020版微信竟然推出了跨端的kbone,说明跨端的开发已经深入人心:又是新的一年过去了,小程序开发领域又有哪些新的变化?我们来看如下最新 ...
记一次小程序富文本的小小优化
背景记一次针对线上微信电竞小程序赛事富文本资讯模块进行优化. 原有的资讯采用管理端富文本编辑保存 HTML 文本,由于小程序提供的 rich-text 组件无法支持 video 标签等局限性,在小 ...
聊聊程序员如何学习英语单词：写了一个记单词的小程序
背景: 关于英文对程序员的重要性,就不多说了! 英语的学习,有很多,今天也不聊多,只聊英语单词! 关于单词的记忆,找过很多方法,下载过很多软件. 如图(其它不好用的都卸载了): 上图算是我以前用过软件 ...
linux httppost 请求接口参数被截断_记一次小程序图片安全接口和CountDownLatch的使用...
背景: 我们的小程序由于之前没接入微信官方提供的信息安全接口,导致被警告,下掉了被搜索的权限(手动狗头).然后这两天就花时间在接入上面了,遇到的坑还是挺多的. 微信原开发文档地址:https://de ...
记一次小程序接口本地可访问，真机不能访问的问题
先说结论:如果小程序访问的域名接口,各种配置没问题,本地可以访问,真机调试不通,那很大可能是服务器域名https的配置有问题确定以下内容: 小程序后台–开发管理–开发设置配置了接口的域名(http ...

记一次小程序的遇到的问题（使用uniapp编写）

记一次小程序的遇到的问题（使用uniapp编写）

1.安卓视频调用pause()无效和视频封面无法设置大小

2.使用循环动态设置事假失效

记一次小程序的遇到的问题（使用uniapp编写）相关推荐

最新文章

热门文章