微信浏览器不支持scroll|微信浏览器不支持scroll,scrollTo,scrollBy
安卓微信浏览器对scroll,scrollTo, scrollBy不支持问题,在苹果微信浏览器中正常。
【微信浏览器不支持scroll|微信浏览器不支持scroll,scrollTo,scrollBy】原功能代码:
/**
* 设置tab偏移
*/
function setTabWrapOffsetX(){
if (this.couponActs.length > 4) {
let tabEl = document.getElementById('tab-wrap'), offsetLeft = tabEl.scrollLeft;
let tabItemWidth = window.document.body.clientWidth/4;
//超出左边
if (tabEl.scrollLeft > this.active*tabItemWidth){
offsetLeft = this.active*tabItemWidth;
}
//超出右边
else if (tabEl.scrollLeft < ((this.active - 3) * tabItemWidth)) {
offsetLeft = ((this.active - 3) * tabItemWidth);
}
//中间
else {}
tabEl.scrollTo(offsetLeft, 0);
}
},
滚动没有效果。
修改代码:
tabEl.scrollLeft = offsetLeft;
替换
tabEl.scrollTo(offsetLeft, 0);
偏移大致功能实现没有动画效果。
继续修改:
/**
* 滚动动画
* @param {numeber} currentX 需要移动的dom当前位置离网页左端的距离
* @param {number} targetX 需要移动的dom当前位置离要移到的位置的距离
* @param {number} duration 每一步移动的时间
*/
function scroll_Left(el, targetX, duration) {
let _duration = duration?duration:1;
//计算需要移动的距离
let needScrollLeft = targetX - el.scrollLeft;
let _currentX = el.scrollLeft, $this = this;
setTimeout(function () {
//一次调用滑动帧数,每次调用会不一样
const dist = Math.ceil(needScrollLeft / 10);
_currentX += dist;
el.scrollLeft = _currentX;
//如果移动幅度小雨十个像素,直接移动,否则递归
if (needScrollLeft > 10 || needScrollLeft < -10){
$this.scroll_Left(el, targetX, _duration);
}
else {
el.scrollLeft = _currentX;
}}, _duration)
},
最后修改:
this.scroll_Left(tabEl, offsetLeft, 1);
替换
tabEl.scrollTo(offsetLeft, 0);
简单的滑动完事~~~
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 员工的微信朋友圈是公司的宣传阵地吗()
- 操作系统|[译]从内部了解现代浏览器(1)
- FBI怎么和恐怖分子谈判
- 分享!如何分分钟实现微信扫二维码调用外部浏览器打开指定页面的功能
- 微信小程序基础知识
- 使用Promise对微信小程序wx.request请求方法进行封装
- 今日份H5
- 茶事|茶事 | 单丛里的一泡奇葩
- 微信小程序请求接口格式