微信小程序如何获取组件实际高度
时间:2022-04-23
本文章向大家介绍微信小程序如何获取组件实际高度,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
viewscroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;"view id='#haha' class='all' style='width:{{menuWidth}}px;'block wx:key="lists" wx:for="{{li ...
<view>
-
<scroll-view
scroll-x
scroll-with-animation
scroll-left="{{menuIndex}}"
style="height:
100px; width:100%;">
-
<view
id='#haha'
class='all'
style='width:{{menuWidth}}px;'>
-
<block
wx:key="lists"
wx:for="{{lists}}">
-
<view
id="a{{index}}"
bindtap='jumpIndex'
class='menu'
data-menuindex='{{index}}'>{{item.list}}</view>
</block>
</view>
</scroll-view>
</view>
-
data:
{
// 初始化滑动条数据
menuIndex:0,
// 每个菜单的宽度
-
onlyWidth:
70,
// 右侧的margin
marginWidth:10,
// 菜单总长
menuWidth:0,
lists:[
-
{ list:
'a1'
},
-
{ list:
'a2'
},
-
{ list:
'a3'
},
-
{ list:
'a4'
},
-
{ list:
'a5'
},
-
{ list:
'a6'
},
-
{ list:
'a7'
}
],
},
jumpIndex:function(e){
-
var menuIndex =
(e.currentTarget.dataset.menuindex-1)*80;
this.setData(
{menuIndex:menuIndex}
)
},
/**
* 生命周期函数--监听页面加载
*/
-
onLoad:
function
(options)
{
let that=this;
-
let lists =
this.data.lists;
let onlyWidth=this.data.onlyWidth;
let marginWidth=this.data.marginWidth;
-
let menuWidth = lists.length *
(onlyWidth + marginWidth)
- marginWidth;
that.setData({
menuWidth: menuWidth
})
// 获取用户高度
let query = wx.createSelectorQuery();
query.select('#a0').boundingClientRect()
-
query.exec(function
(res)
{
console.log(res);
})
},
- 获取手机端验证码
- RESTful WCF
- android顶部导航条
- AggregateCacheDependency、CacheDependency、SqlCacheDependency Asp.net 2.0和Sql Server的缓存管理和使用ObjectBuil
- slidingmenu开源效果
- MySQL 5.0和PostgreSQL 8.1
- Python入门讲解
- DDM: 一个简洁的前端领域模型库
- 前后端分离之领域模型的思考
- 类选择符和ID选择符
- 仿网易新闻页面效果
- VS.Net 2005 Design-Time Integration
- XML Serializable Generic Dictionary
- MATLAB简易验证码识别程序介绍
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CVE-2020-14645 Weblogic远程代码执行漏洞分析
- PaGoDo:一款功能强大的被动式Google Dork
- 微软轻量级系统监控工具sysmon原理与实现完全分析
- 用Windows电脑训练深度学习模型?超详细配置教程来了
- rConfig中的远程代码执行漏洞分析
- CVE-2020-9964:iOS中的信息泄露漏洞分析
- ReconSpider:一款功能强大的高级OSINT框架
- Python 3.9来了!这十个新特性值得关注
- IRFuzz:一款基于YARA规则的文档文件扫描工具
- 内网渗透测试研究:从NTDS.dit获取域散列值
- 腾讯云大禹高防IP之客户端获取真实IP
- 终极解密输入网址按回车到底发生了什么
- Kafka核心原理的秘密,藏在这 17 张图中
- 国庆肝了8天整整2W字的数据库知识点
- MySQL事务与MVCC如何实现的隔离级别