专栏首页疯狂的小程序微信小程序如何获取组件实际高度
原创

微信小程序如何获取组件实际高度

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 ...

  1. <view>
  2. <scroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style="height: 100px; width:100%;">
  3. <view id='#haha' class='all' style='width:{{menuWidth}}px;'>
  4. <block wx:key="lists" wx:for="{{lists}}">
  5. <view id="a{{index}}" bindtap='jumpIndex' class='menu' data-menuindex='{{index}}'>{{item.list}}</view>
  6. </block>
  7. </view>
  8. </scroll-view>
  9. </view>

  1. data: {
  2. // 初始化滑动条数据
  3. menuIndex:0,
  4. // 每个菜单的宽度
  5. onlyWidth: 70,
  6. // 右侧的margin
  7. marginWidth:10,
  8. // 菜单总长
  9. menuWidth:0,

  1. lists:[
  2. { list: 'a1' },
  3. { list: 'a2' },
  4. { list: 'a3' },
  5. { list: 'a4' },
  6. { list: 'a5' },
  7. { list: 'a6' },
  8. { list: 'a7' }
  9. ],
  10. },
  11. jumpIndex:function(e){
  12. var menuIndex = (e.currentTarget.dataset.menuindex-1)*80;
  13. this.setData(
  14. {menuIndex:menuIndex}
  15. )
  16. },

  1. /**
  2. * 生命周期函数--监听页面加载
  3. */
  4. onLoad: function (options) {
  5. let that=this;
  6. let lists = this.data.lists;
  7. let onlyWidth=this.data.onlyWidth;
  8. let marginWidth=this.data.marginWidth;
  9. let menuWidth = lists.length * (onlyWidth + marginWidth) - marginWidth;
  10. that.setData({
  11. menuWidth: menuWidth
  12. })
  13. // 获取用户高度
  14. let query = wx.createSelectorQuery();
  15. query.select('#a0').boundingClientRect()
  16. query.exec(function (res) {
  17. console.log(res);
  18. })
  19. },

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ASP获取微信小程序的OpenID服务器端代码

    尝试一下新鲜事物“微信小程序”,其中有一个业务场景,通过微信登陆小程序,这样需要获取小程序的用户ID(也就是openid)。微信小程序从安全角度考虑,不提供直接...

    疯狂的小程序
  • 微信小程序「学科排名」发布了

    前几天,教育部公布了《全国第四轮学科评估结果》,在手机上看起来不太方便,于是本人就“撸起袖子加油干”,写了一套脚本把数据收集了一下,做成了微信小程序,叫「学科排...

    疯狂的小程序
  • 如何打击“假货、高仿”类小程序

    近期,我们在平台上发现了一批“假货、高仿”类小程序,根据平台规则要求,我们对此类违规小程序的处理如下:

    疯狂的小程序
  • 再过半小时,你就能明白kafka的工作原理了

    周末无聊刷着手机,某宝网APP突然蹦出来一条消息“为了回馈老客户,女朋友买一送一,活动仅限今天!”。买一送一还有这种好事,那我可不能错过!忍不住立马点了去。于是...

    Java团长
  • 小程序开发基础-scroll-view 可滚动视图区域

    查看官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/

    达达前端
  • Java 线程的虚假唤醒

    最近在学习Java多线程设计的时候,在网上看到一个面试题目的讨论,虽然楼主所说有些道理,但感觉还是有些问题,故此在和同事讨论以后还是有了若干收获,在此略作总结。

    JavaEdge
  • 参加 HKOSC 2016 见闻

    这个拖了一个月才开始写,一部分原因是懒,开通了赞赏就没写了;还有就是想沉淀下,看看过这么久还有哪些是自己还印象深刻的。 HKOSC (Hong Kong Ope...

    温铭@APISIX
  • Percona XtraDB Cluster添加仲裁节点

    Galera Arbitrator是Percona XtraDB集群的成员,用于投票,以防您拥有少量服务器(通常为两个)并且不希望添加更多资源。Galera仲裁...

    Leshami
  • 超级实用:小而精,优而美的开源库,开年第一篇有意思的分享

    昨天是元旦,新年的第一天,估计细心的读者可能发现了,我昨天发起了一个抽奖送书活动,而且发布的时间正好是1月1号11点11分。这可不是一个巧合,这是我故意为之,是...

    非著名程序员
  • 企业该如何构建大数据平台【技术角度】

    问题导读 1.作为一个技术人员,你认为该如何搭建大数据平台? 2.构建大数据平台,你认为包括哪些步骤? 3.本文是如何构建大数据平台的? 亲身参与,作...

    用户1410343

扫码关注云+社区

领取腾讯云代金券