uni-app 组件里面获取元素宽高的实现

遇到的问题：直接在组件的mounted里面创建选择器，获取元素的宽高，即使扔到定时器里面执行，还是偶尔会有获取不到的情况

解决办法：

// 写法一：
getDescBox() {
  uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => {
   if (result) {
     console.log('==========',result)
   }else {
     this.getDescBox();
 }
  }).exec();
},

// 写法二：
getDescBox() {
  uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect().exec((res)=>{
   if (res\[0\]) {
     this.descHeight \= res\[0\].height;
 }else {
     this.$nextTick(()=>{
      this.getDescBox();
 })
   }
  })
},

两种写法一模一样...

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • 使用uni-app开发微信小程序的实现

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

  • 微信小程序自定义tabBar在uni-app的适配详解

    微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • uni-app实现点赞评论功能

    模拟朋友圈实时点赞及评论功能 点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口 评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引.同时调用获取评论列表的接口 html <view class="toolbar"> <view class="timestamp">{{item.timetype}}</view> <

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • 微信小程序实现动态获取元素宽高的方法分析

    微信小程序实现动态获取元素宽高的方法分析

    本文实例讲述了微信小程序实现动态获取元素宽高的方法.分享给大家供大家参考,具体如下: 我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用呢? 首先,这个接口会返回一个对象实例. var obj=wx.createSelectorQuery(); 下面的就是返回的对象实例 obj 的所有内容. 返回的 obj 有五个方法: 1.  obj.in(co

  • js获取隐藏元素宽高的实现方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>test</title> </head> <bo

  • 各情景下元素宽高的获取实现代码

    情景一,元素style属性设置了width/height 复制代码 代码如下: <div style="width:100px;">test<div> <script> var div = document.getElementsByTagName('div')[0]; alert(div.style.width); </script> 如上,使用el.style.width即可.如果没有在style属性中设置width,那么使用el.s

  • vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法

    this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect(); //示例: 获取元素距离顶部的距离 this.$refs.journalUpward.getBoundingClientRect().top 以上这篇vue获取元素宽.高.距离左边距离,右,上距离等还有XY坐标轴的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • javascript获取网页宽高方法汇总

    document.body.clientWidth - 网页可见区域宽 document.body.clientHeight - 网页可见区域高 document.body.offsetWidth - 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight - 网页可见区域高,包括边线和滚动条的高[FF,chrom下是整个页面高,IE opera 下正常] document.body.scrollWidth - 网页总宽 document.body.scrol

  • js获取图片宽高的方法

    js获取图片宽高的方法

    本文分享多种js获取图片宽高的方法,并且通过实例进行分析,希望大家从中有所收获. 一.简陋的获取图片方式 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'

  • Android编程获取屏幕宽高与获取控件宽高的方法

    本文实例讲述了Android编程获取屏幕宽高与获取控件宽高的方法.分享给大家供大家参考,具体如下: 获取屏幕宽高 // 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素,如:480px) int screenHeight = getWindowManager().getDefaultDisplay().getHeight(); // 屏幕高(像素,如:800p) L

  • 4种Android获取View宽高的方式

    有时我们会有基于这样的需求,当Activity创建时,需要获取某个View的宽高,然后进行相应的操作,但是我们在onCreate,onStart中获取View的大小,获取到的值都是0,只是由于View的绘制工程还未完成,和在onCreate中弹出Dialog或者PopupWindow会报一个Activity not running原理类似. 接下来就为大家介绍几种获取View宽高的方法: 第一种方式:重写Activity中的onWindowFocusChanged,当Activity获取到焦点的

随机推荐