用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

8

主题

8

帖子

131

积分

实习版主

Rank: 7Rank: 7Rank: 7

积分
131
2021-1-22 11:47:08 林恒 实习版主 楼主 0723
本帖最后由 林恒 于 2021-1-25 10:54 编辑

这里总结一些uni-app开发时我遇到的坑uni-app获取元素高度及屏幕高度(uni-app不可使用document)
[XHTML] 纯文本查看 复制代码
uni.getSystemInfo({
                          success: function(res) { // res - 各种参数
                             console.log(res.windowHeight); // 屏幕的宽度 
                              let info = uni.createSelectorQuery().select(".元素");
                             info.boundingClientRect(function(data) { //data - 各种参数
                                                that=data.height// 获取元素高度
                                      console.log()  
                              }).exec()
                            }
                        });
只获取屏幕宽高也可:
const { windowHeight } = uni.getSystemInfoSync()

uni-app之touch事件方向判断
[XHTML] 纯文本查看 复制代码
//template
<view 
                        style="width: 100%;height: 500rpx;border: 1px solid red;box-sizing: border-box;"
                        @touchstart='touchstart' 
                        @touchend='touchend'>
</view>


[XHTML] 纯文本查看 复制代码
//data中初始化
                touchDotX : 0,
                touchDotY : 0,
                time :0,
                touchMoveX:'',
                touchMoveY:'',
                tmX:'',
                tmY:''


[XHTML] 纯文本查看 复制代码
//事件
touchstart(e){
                                // console.log(e)
                                this.touchDotX = e.touches[0].pageX 
                                this.touchDotY = e.touches[0].pageY 
},
        touchend(e){
                // console.log(e)
                this.touchMoveX = e.changedTouches[0].pageX;
                this.touchMoveY = e.changedTouches[0].pageY;
                this.tmX = this.touchMoveX - this.touchDotX;
                this.tmY = this.touchMoveY - this.touchDotY;
                if (this.time < 20) {
                          let absX = Math.abs(this.tmX);
                          let absY = Math.abs(this.tmY);
                          console.log(absX)
                          if (absX > 2 * absY) {
                                if (this.tmX<0){
                                  console.log("左滑=====")
                                }else{
                                  console.log("右滑=====")
                                }
                          }
                }
        }

js查找替换字符串之replace
[XHTML] 纯文本查看 复制代码
1.普通单个替换只执行一次
var str=“Visit Microsoft Microsoft Microsoft Microsoft”
console.log(str.replace(/Microsoft/, “W3School”)) 将Microsoft替换为W3School
2.全部替换
console.log(str.replace(/Microsoft/g, “W3School”))
3.查找变量,场景:将输入的字符串查找匹配文字高亮加粗
var content = input输入的字符串
console.log(str.replace(new RegExp(content,‘g’), “ ”+content+" ")
3.1解析标签,此类名给个样式

资讯类型项目swiper嵌套scroll-view1.图文混排用rich-text
[XHTML] 纯文本查看 复制代码
<rich-text :nodes="nodes"></rich-text>
data() {
        return {
                                 nodes: '<div style="text-align:center;">
                                                         <img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png"/>
                                 </div>'
        }
    }


[XHTML] 纯文本查看 复制代码
2.视频列表
2.1video层级过高,此时还是vue文件无法通过z-index修改,官网也有说明,此时要用nvue文件。
2.2 为什么nvue文件就可控,vue文件不可控?
编译不同,nvue文件基于wexx编译模式更接近app原生,但是要注意的是,style样式只能用felx布局。
此时你会发现nvue的样式好难用!!!
2.3如果你选择的是nvue文件,打包和真机调试安卓还算顺利,但是ios你会发现一个怀疑人生的问题,列表无法渲染但是能接收到后端的数据,各种调试最后发现是拦截器的事,我门项目拦截器是自己封装的Promise,直接用官网的api才可以uni.request({})
2.4测试发现可以同时播放多个视频,那么问题来了,如何点击当前来暂停上一个视频呢?
官网给出api uni.createVideoContext(videoId, this)
但是并没有解决,点击几个视频之后有奔溃显现总是报 未定义的对象id,最终是以ref解决


[XHTML] 纯文本查看 复制代码
<video 
                        :id="'videoa'+item.id" 
                        :ref="'videoa'+item.id" 
                        :src="item.content" 
                        :poster='item.imgUrl' 
                        @pause='video_pause' 
                        @play='target_play'>
                </video>
        data:{
                videoId:null,
        }
        target_play(e) {
                // 播放时触发
                if(this.videoId != null){
                        var oldvideoid = this.videoId;
                        this.$refs[oldvideoid][0].pause();
                }
                var videoId = e.target.id;
                this.videoId = videoId;
        },
        video_pause(e) {
                if(e.target.id == this.videoId){
                        this.videoId = null
                }else{
                        console.log('暂停的上一个')
                }
        }

后续会持续更新,如果对你有帮助,请你点个关注,也希望和你一起进步(*^▽^*)。

QQ图片20210122114641.jpg




发新帖
您需要登录后才可以回帖 登录 | 立即注册