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

 mui('body').on('tap', 'a', function (e) {
var data = this.getAttribute('val');
mui('.mui-scroll-wrapper').scroll().reLayout();//重新计算布局值,最大滚动的高度等等
let y = 0;
let current_top = mui('.mui-scroll-wrapper').scroll().y;
switch (data) {
case 'p'://商品
mui('.mui-scroll-wrapper').scroll().scrollTo(0, y, 100);
break;
case 'i'://简介
y = $('#dvpintro').offset().top-120; //计算位置
y = parseInt(current_top - y);
if (y > 0)
y = -y;
mui('#scroll1').scroll().scrollTo(0, y , 100);
break;
case 't': //套餐
y = $('#dvpintro').offset().top + (- 1700);//计算位置
y = current_top - y;
if (y > 0)
y = -y;
mui('.mui-scroll-wrapper').scroll().scrollTo(0, y, 100);
break;
}
});

 出事位置

参考文章: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. 轻量ORM-SqlRepoEx (五) 存储过程操作

    .Net平台下兼容.NET Standard 2.0,一个实现以Lambda表达式转转换标准SQL语句,使用强类型操作数据的轻量级ORM工具,在减少魔法字串同时,通过灵活的Lambda表达式组合,实现 ...

  2. WKWebView进度及title

    WKWebView进度及title WKWebView进度及title WKWebView 的estimatedProgress和title 都是KVO模式,所以可以添加监控: [webView ad ...

  3. Webpack4 学习笔记七 跨域服务代理

    webpack 小插件使用 webpack 监听文件变化配置 webpack 处理跨域问题 Webpack 小插件使用 clean-webpack-plugin: 用于在生成之前删除生成文件夹的Web ...

  4. Vue--- mint-UI 穿插

    Vue-mint-UI库 概述:就是一个 封装好的库 安装/下载:npm install  --save mint-ui 常用 1) Mint UI:a. 主页: http://mint-ui.git ...

  5. jQuery获取data-*属性值

    下面就详细介绍四种方法获取data-*属性的值 <li id="getId" data-id="122" data-vice-id="11&qu ...

  6. 使用webBrowser进行C#和JS通讯

    .前台调用后台: 在webBrowser使用过程中为了C#和js通讯,webBrowser必须设置ObjectForScripting的属性,它是一个object,这个object可以提供给webBr ...

  7. 做 JAVA 开发,怎能不用 IDEA!

    用了 IDEA,感觉不错.决定弃用 Eclipse 入门教程: www.cnblogs.com/yangyquin/p/5285272.html

  8. python3 练习题100例 (二十二)输入两个字符串,输出两个字符串集合的并集

    题目内容: 输入两个字符串,输出两个字符串集合的并集. 为保证输出结果一致,请将集合内元素排序之后再输出, 如对于集合aset,可输出sorted(aset). 输入格式: 共两行,每一行为一个字符串 ...

  9. 嵌入式linux系统移植(一)

    内容:   交叉编译环境   bootloader功能子系统   内核核心子系统   文件系统子系统要点:  搭建交叉编译环境  bootloader的选择和移植  kernel的配置.编译.移植和调 ...

  10. C++代码理解 (强制指针转换)

    #include<iostream> using namespace std; class A { public: A() { a=; b=; c=; f=; } private: int ...