做一个微信项目,使用MUI做框架,在使用scroll定位的时候,出现了定位不准确的问题,查询了好多资料,得知他是相对定位。折腾了好久,才搞定,现在做一个笔记。

  1. mui('body').on('tap', 'a', function (e) {
  2. var data = this.getAttribute('val');
  3. mui('.mui-scroll-wrapper').scroll().reLayout();//重新计算布局值,最大滚动的高度等等
  4. let y = 0;
  5. let current_top = mui('.mui-scroll-wrapper').scroll().y;
  6. switch (data) {
  7. case 'p'://商品
  8. mui('.mui-scroll-wrapper').scroll().scrollTo(0, y, 100);
  9. break;
  10. case 'i'://简介
  11. y = $('#dvpintro').offset().top-120; //计算位置
  12. y = parseInt(current_top - y);
  13. if (y > 0)
  14. y = -y;
  15. mui('#scroll1').scroll().scrollTo(0, y , 100);
  16. break;
  17. case 't': //套餐
  18. y = $('#dvpintro').offset().top + (- 1700);//计算位置
  19. y = current_top - y;
  20. if (y > 0)
  21. y = -y;
  22. mui('.mui-scroll-wrapper').scroll().scrollTo(0, y, 100);
  23. break;
  24. }
  25. });

 出事位置

参考文章:http://blog.csdn.net/sbt0198/article/details/51755843

http://www.cnblogs.com/CyLee/p/5324622.html

 

MUI scroll 定位问题的更多相关文章

  1. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  2. MUI - Scroll插件的使用

    http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体de ...

  3. MUI 实用教程

    MUI 实用JS教程: https://www.kancloud.cn/benhailong/mui/319751  MUI 实用教程: https://www.kancloud.cn/benhail ...

  4. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  5. mui 怎样监听scroll事件的滚动距离

    var scroll = mui('.mui-scroll-wrapper').scroll(); document.querySelector('.mui-scroll-wrapper' ).add ...

  6. mui 下拉刷新

    mui 下拉刷新 此文提供的是mui这种下拉刷新.悬浮于页面上,比较好用. <!DOCTYPE html> <html> <head> <meta chars ...

  7. MUI - 侧滑菜单

    各大APP必备的侧滑菜单栏,支持手势滑动.包含QQ式.美团式等 结构模板 这里是示例Html, 必须使用Mui框架才能使用. 主容器 <div class="mui-off-canva ...

  8. MUI - DIV窗体切换

    神坑记录: 1.js报错异常:没有找到"innerHeight"属性? 解决方案:暂时不知原因,通过对mui.view.js进行调试得知是跳转目标页没有 .mui-navbar-l ...

  9. MUI - 上拉刷新/下拉加载

    新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...

随机推荐

  1. MySQL配置和启动

    1.首先下载MySQl安装包,解压安装包 打开mysql下面的bin文件夹,双击如图标记的  .exe运行 2.配置Mysql (1)运行程序后点击 next (2)这里有精确配置和标准配置,根据情况 ...

  2. RL 编、解码(EncodedString、DecodedString) - iOS

    开发中对文本传输或二进制传输,都需要将传输的对象进行二进制字节的转化操作,所以无异于编.解码便会经常用到的操作; 当然除了这种方式之外,还有一种常用的 Base64,此文中不具体细谈, Base64 ...

  3. mix-blend-mode 混合模式 background-blend-mode 背景混合模式 isolation:isolate 隔离

    css3 mix-blend-mode 混合模式 该属性不仅可以作用于HTML,还可以作用于SVG 兼容性: IE 8~11 Edge 12~14 Firefox 41~47 chrome 45~51 ...

  4. 蒜头君学英语--set()练习

    题目描述 蒜头君快要考托福了,这几天,蒜头君每天早上都起来记英语单词.花椰妹时不时地来考一考蒜头君:花椰妹会询问蒜头君一个单词,如果蒜头君背过这个单词,蒜头君会告诉花椰妹这个单词的意思,不然蒜头君会跟 ...

  5. 首层nginx 传递 二级代理,三级代理......多级代理nginx 客户端真实IP的方法

    首层nginx(172.25.10.1):先获取真实IP($remote_addr),再将真实IP传递给X-Forwarded-For    proxy_set_header X-Real-IP $r ...

  6. Linux : centOS 与 Ubuntu 安装 Nginx

    源码下载: wget http://nginx.org/download/nginx-1.14.0.tar.gz 解压:tar –zxvf xxx 安装依赖: yum -y install  open ...

  7. 【tp5.1】微信公众号授权登录及获取信息录入数据库

    微信公众号开发文档链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432 微信公众号授权登录分为两种: 1.以 ...

  8. Git----将本地代码推送到远程仓库

    1.初始化本地 git init 2.添加文件 -A等于 -. 和-a的集合 git add -A 3.提交 git commit -m 'add' 4.关联到远程库 git remote add o ...

  9. admin添加用户时报错:(1452, 'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_l

    在stackoverflow找到答案: DATABASES = { 'default': { ... 'OPTIONS': { "init_command": "SET ...

  10. Java学习笔记九:Java的循环跳转语句

    Java的循环跳转语句 一:Java循环跳转语句之break: 生活中,我们经常会因为某些原因中断既定的任务安排.如在参加 10000 米长跑时,才跑了 500 米就由于体力不支,需要退出比赛.在 J ...