HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni app环境下解决video无法跟随div滚动条滚动的问题

video

uni app环境下vue文件中,video因为用的是原生组件,所以只能跟随页面的滚动条。

假如你写了一个带滚动条的div,里面写了一个video标签,那对不起,video不会跟着滚动。

废话不多说,解决代码如下:

video组件的代码如下,实现思路就是借助iframe,通信就采用手动去触发事件

<template>  
    <iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank" style="border:1px solid;height: 300px;width: 100%"></iframe>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onloadCode: `  
                const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `  
            }   
        },  
        onShow() {  

        },  

        methods: {  
            event1(a) {  
                console.log(a)  
            },  
            event2(a) {  
                console.log(a)  
            }  
        }  
    }  
</script>  

<style>  
</style>  

以下是调用video,解决div滚动时video不跟随的代码

<template>  
    <view class="content">  
        <view class="text-area">  
            <div class="pos">  
                <Video />  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            </div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
        </view>  
    </view>  
</template>  

<script>  
    import Video from './video/index.vue'  
    export default {  
        components: {  
            Video  
        }  
    }  
</script>  

<style>  
    .pos {  
        position: fixed;  
        bottom: 0;  
        background: red;  
        left: 0;  
        right: 0;  
        height: 500px;  
        overflow: auto;  
    }  
    .zw {  
        word-break: break-all;  
        height: 800px;  
    }  
</style>

app运行效果图如下,可以看出video是可以跟随div滚动的

继续阅读 »

uni app环境下vue文件中,video因为用的是原生组件,所以只能跟随页面的滚动条。

假如你写了一个带滚动条的div,里面写了一个video标签,那对不起,video不会跟着滚动。

废话不多说,解决代码如下:

video组件的代码如下,实现思路就是借助iframe,通信就采用手动去触发事件

<template>  
    <iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank" style="border:1px solid;height: 300px;width: 100%"></iframe>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                onloadCode: `  
                const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='  
                this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';  
                const iframe = top.document.getElementsByTagName('iframe')[0]  
                var evObj = document.createEvent('MouseEvents');  
                evObj.initEvent( 'event1', true, false );  
                iframe.dispatchEvent(evObj)  
                `  
            }   
        },  
        onShow() {  

        },  

        methods: {  
            event1(a) {  
                console.log(a)  
            },  
            event2(a) {  
                console.log(a)  
            }  
        }  
    }  
</script>  

<style>  
</style>  

以下是调用video,解决div滚动时video不跟随的代码

<template>  
    <view class="content">  
        <view class="text-area">  
            <div class="pos">  
                <Video />  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
                <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            </div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
            <div class="zw">占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用占位专用</div>  
        </view>  
    </view>  
</template>  

<script>  
    import Video from './video/index.vue'  
    export default {  
        components: {  
            Video  
        }  
    }  
</script>  

<style>  
    .pos {  
        position: fixed;  
        bottom: 0;  
        background: red;  
        left: 0;  
        right: 0;  
        height: 500px;  
        overflow: auto;  
    }  
    .zw {  
        word-break: break-all;  
        height: 800px;  
    }  
</style>

app运行效果图如下,可以看出video是可以跟随div滚动的

收起阅读 »

vue3编译到微信小程序,报错

bug提交

// 我在设置里面选了vue3版本其他没问题就是使用不了jsx
export default {
setup() {
const msg = ref(123);
const change = param => {
console.log(param);
msg.value ;
};
const dianWo = <button type="primary" onTap={change}>点我</button>

return () => (  
  <view class="index">  
    <view onTap={change.bind(null, 221)}>{msg.value}</view>  
    <button type="primary" onTap={change}>  
      {obj.zxc?.length}  
    </button>  
    {dianWo}  
  </view>  
);  

}
};

继续阅读 »

// 我在设置里面选了vue3版本其他没问题就是使用不了jsx
export default {
setup() {
const msg = ref(123);
const change = param => {
console.log(param);
msg.value ;
};
const dianWo = <button type="primary" onTap={change}>点我</button>

return () => (  
  <view class="index">  
    <view onTap={change.bind(null, 221)}>{msg.value}</view>  
    <button type="primary" onTap={change}>  
      {obj.zxc?.length}  
    </button>  
    {dianWo}  
  </view>  
);  

}
};

收起阅读 »

不小心点到大数据的控制台文件,导致HBX启动就卡死,解决办法。

打开这个路径 :C:\Users\Administrator\AppData\Roaming\HBuilder X\autosaves
里面有几个文件,看一下哪个最大。比如我的 是 1.43M 跟那些差距比较大,,直接拷贝出来桌面。再启动 就没有那个卡死的文件了
再删除即可。
我这个的文件名没有后缀 c9b43b5121437ec2868cb22cdc559342_

继续阅读 »

打开这个路径 :C:\Users\Administrator\AppData\Roaming\HBuilder X\autosaves
里面有几个文件,看一下哪个最大。比如我的 是 1.43M 跟那些差距比较大,,直接拷贝出来桌面。再启动 就没有那个卡死的文件了
再删除即可。
我这个的文件名没有后缀 c9b43b5121437ec2868cb22cdc559342_

收起阅读 »

安卓华为手机,设置了亮度,系统亮度调节app亮度不改变?

plus.screen.setBrightness(0.8);
if(that.brightness > 0.8){
return false
}
uni.setScreenBrightness({
value: 0.8,
success: function () {
console.log('success');
}
});

继续阅读 »

plus.screen.setBrightness(0.8);
if(that.brightness > 0.8){
return false
}
uni.setScreenBrightness({
value: 0.8,
success: function () {
console.log('success');
}
});

收起阅读 »

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码

咨询下Hbuilder版本问题

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码这该怎么办,一个个改回来工程量有点大

今天一更新版本他把我几个页面的代码里的中文全部改成了乱码这该怎么办,一个个改回来工程量有点大

【北京】个人项目,之前做了2年了。现在有些功能需要修改。

外包

使用的nvue开发的。 要求高手,2年以上uniapp相关开发经验。

最好在北京,可以在你附近 或者你指定一个方便的地方现场开发。

可选远程开发。远程开发可能效率不太好。

有意请加我VX: xiaoxuetong888 。联系我时请友情出示一下 开发过的作品。我不懂技术 只能通过开发过的作品来判断。

继续阅读 »

使用的nvue开发的。 要求高手,2年以上uniapp相关开发经验。

最好在北京,可以在你附近 或者你指定一个方便的地方现场开发。

可选远程开发。远程开发可能效率不太好。

有意请加我VX: xiaoxuetong888 。联系我时请友情出示一下 开发过的作品。我不懂技术 只能通过开发过的作品来判断。

收起阅读 »

process.env.TZ = 'Asia/Shanghai'在云函数里无法成功设置

所以涉及到时间的转换,最好在前端,云端0时区太蛋疼了

所以涉及到时间的转换,最好在前端,云端0时区太蛋疼了

项目简要 uniapp 框架会员移动网页客户端

外包

项目简要
uniapp框架会员移动网页客户端

工作要求

  1. 增加功能, 优化和长期维护.
  2. 迁移 uniapp vue2 到 vue3.

开发者要求:
全职独立开发者, 谢绝团队.
至少2年 uniapp 项目开发经验.
至少1年 typescript 项目开发经验.
熟悉或使用过 thorui 优先.
有 迁移 uniapp vue2 到 vue3 的项目经验优先
使用过Gitflow
具备英文读写能力.

三,待遇:

  1. 基本底薪,月结 (考虑到接任何项目如果想提升代码质量,都需要熟悉,需要能优化,模块化代码)
  2. 底薪之外,按页面和功能付钱,多劳多得.
继续阅读 »

项目简要
uniapp框架会员移动网页客户端

工作要求

  1. 增加功能, 优化和长期维护.
  2. 迁移 uniapp vue2 到 vue3.

开发者要求:
全职独立开发者, 谢绝团队.
至少2年 uniapp 项目开发经验.
至少1年 typescript 项目开发经验.
熟悉或使用过 thorui 优先.
有 迁移 uniapp vue2 到 vue3 的项目经验优先
使用过Gitflow
具备英文读写能力.

三,待遇:

  1. 基本底薪,月结 (考虑到接任何项目如果想提升代码质量,都需要熟悉,需要能优化,模块化代码)
  2. 底薪之外,按页面和功能付钱,多劳多得.
收起阅读 »

uniapp框架 外包 | 长期开发和维护项目1

项目简要
项目是跨小程序, H5, APP, CRM APP 包括推广营销和独立外卖.

开发者要求:

  1. 全职独立开发者, 谢绝团队.
  2. 有 uniapp 项目开发经验
  3. 熟悉 Git 和 Gitflow
  4. 拥有较强的学习能力,良好的沟通与理解能力及逻辑思维能力
    5.l联系方式微信18872319732 邮箱xuqu911@126.com
继续阅读 »

项目简要
项目是跨小程序, H5, APP, CRM APP 包括推广营销和独立外卖.

开发者要求:

  1. 全职独立开发者, 谢绝团队.
  2. 有 uniapp 项目开发经验
  3. 熟悉 Git 和 Gitflow
  4. 拥有较强的学习能力,良好的沟通与理解能力及逻辑思维能力
    5.l联系方式微信18872319732 邮箱xuqu911@126.com
收起阅读 »

uni-app npm update 更新项目后报错

uni-app npm update 更新项目后报错 internal/modules/cjs/loader.js:596
并:throw err:
Cannot find module '@dcloudio/uni-cli-i18n';
巴拉巴拉等
直接npm下载对应缺失的包就行了
npm i @dcloudio/uni-cli-i18n
再重新运行就可以了

继续阅读 »

uni-app npm update 更新项目后报错 internal/modules/cjs/loader.js:596
并:throw err:
Cannot find module '@dcloudio/uni-cli-i18n';
巴拉巴拉等
直接npm下载对应缺失的包就行了
npm i @dcloudio/uni-cli-i18n
再重新运行就可以了

收起阅读 »