摘要：对话内容超过一屏，使对话内容上移，当然是改变父元素的值啦用户可以上下滑动对话框，就类似于滚动条效果，设置父元素高度并且，子元素高度即可。遇到问题局部滚动效果，以上想法设置父元素高度并且在端可以正常滑动，但在移动端失效。
起因
我司最近在做一个H5,有一个模拟微信对话框的需求，具体需求如下。
对话内容固定，但需要一句一句显示
对话内容超过一屏后，需要使对话内容上移
对话内容结束后，用户可以上下滑动对话框，查看详细对话内容
图中灰色头像表示获取的用户头像
示例： 请看第二屏
初步设想使对话内容一句一句显示，脑子里立马闪现出setInterval定时器。
对话内容超过一屏，使对话内容上移，当然是改变父元素的scrollTop值啦
用户可以上下滑动对话框，就类似于滚动条效果，设置父元素高度并且 overflow:hidden，子元素高度auto即可。
获取用户头像，这个薛微复杂，留做下一篇文章。
遇到问题局部滚动效果，以上想法（设置父元素高度并且 overflow:hidden）在PC端可以正常滑动，但 在移动端失效。
这种写法，多带带写没有问题，但是IOS端出现卡顿现象，可以添加 -webkit-overflow-scrolling:touch; 解决。
但是，我司的H5页面使用的swiper制作，大概是这个有一些影响，用户滑动屏幕首先触发了swiper的事件。（仅做设想，后续做进一步实践）
于是在网上查了几番，有以下几种解决方法
用户在解发touchmove事件时，改变元素的transform值
使用iscroll.js
使用swiper
改变元素的transform值改变元素的transform值，需要判断用户的滑动方向。
判断滑动方向时，先了解两个事件
touchstart :用户手指按在屏幕上时触发
touchmove：用户滑动屏幕时触发
了解了这两个事件，我们可以在用户触发touchstart事件时，记录手指位置，在touchmove记录获取手指最后停留的位置
判断 最后停留位置 - 初始位置= pageY- startY = 即用户滑动方向
(pageY-startY)为正数时，说明用户向下滑动;为负数时，说明用户向上滑动。
$(".message-wrapper").on("touchstart", function (e) {
startY = e.type === "touchmove" ? e.targetTouches[0].pageY : e.pageY;
})
$(".message-wrapper").on("touchmove", function (e) {
pageY = e.type === "touchmove" ? e.targetTouches[0].pageY : e.pageY;
})
使用iscroll.js
网上有很多关于iscroll的资料，但是我查了一下官方的github,最近的更新在5年前，果断不敢用~
使用swiper查了一番，swiper里的 swiper-scrollbar可以完美的实现这一功能，多带带写这一功能，在真机测试没有问题。然后移入到我们的项目中。出现以下几个问题
局部滚动后的slide元素不显示 分析原因出现这个问题的原因，是由于我司的H5项目也是由swiper制作，这意味着每一屏就相当于一个slide,当添加用swiper完成的局部滚动时，会造成后面父元素的slide元素不显示。
解决办法这涉及到多个swiper嵌套使用的问题，具体修改如下：
当页面存在多个swiper，初始化时，尽量避免使用一样的类名，如 .swiper-container,每个swiper有它多带带的类名
//父元素swiper//-------------------------------------------------------------swiper初始化
如果类名分开，父元素后续slide元素依然无法显示
将子元素的初始化，写在父元素初始化之前,加载时，优先初始化子元素swiper
//初始化子swiper
var scrollSwiper = new Swiper(".message-warp", {
observer: true,
observeParents: false,
scrollbar: ".swiper-scrollbar",
direction: "vertical",
slidesPerView: "auto",
mousewheelControl: true,
freeMode: true,
})
var swiper = new Swiper(".main-swiper", {
direction: "vertical",
touchRatio: 0.5,
loop: false,
on: {
init: function () {
swiperAnimate(this);
},
slideChangeTransitionEnd: function (e) {
swiperAnimate(this)
}
}
});
以上方法都不能使后续 元素显示
swiper运行时，会先给元素添加visiblity:hidden;使元素隐藏，只给当前页的visiblity设置为visible;而swiper中，改元素显示状态的依据就是swiper-slide-active;
swiper默认给当前的slide添加swiper-slide-active类名。当页面中存在swiper嵌套时，父元素的当前slide会添加该类名，子元素的当前slide也会添加该类名。
这样当用户滑出父元素的当前slide时父元素的swiper-slide-active被移除，而子元素的swiper-slide-active类名并没有移除，造成swiper混乱，所以父元素后续slide的元素会无法显示
解决办法
我的做法是在父元素切换slide后，判断页面中swiper-slide-active的个数，如果存在一个以上，则说明子元素的类名没有移除。
手动将子元素的swiper-slide-active类名移除即可。
暂时还没有想到更好的方法，如果你有更好的方法，欢迎一起讨论。
if ($(".swiper-slide-active").length == 2) {
$(".message-slide").removeClass("swiper-slide-active")
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104844.html
摘要：原文地址初衷如今移动端站点越来越多，滚动到底部加载数据和下拉刷新的需求非常的常见，即使现在很多站点也会有这样的需求，比如百度首页就有。 原文地址 https://github.com/fa-ge/Scrollload/blob/master/README.md 初衷 如今移动端站点越来越多，滚动到底部加载数据和下拉刷新的需求非常的常见，即使现在很多pc站点也会有这样的需求，比如百度首页...
摘要：使用方法首先看一下简易第一步，实例化滚动对象代码其实还是蛮简单的，首先我们初始化一个滚动的实例，构造函数拥有两个参数，第一个是一个负责管理页面滚动时需要处理事务的函数，这个函数接受三个参数，分别表示当前页面左移，向上移，缩放比信息。 ScrollerJS是什么 ScrollerJS是用于纯逻辑的滚动缩放组件，它独立于任何指定的渲染或者事件系统。上面是官方定义的，我再说一下我对这个库的理...
摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。 写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...
摘要：写着写着发现会写不少内容全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧下篇写完啦，感兴趣的朋友可以继续关注开发仿旅游站项目总结下温馨提示此文章，仅是做完项目后的个人觉得可以总结下来的操作思路，接触不久的朋友应该会有收获。 写着写着发现会写不少内容... 全部写在一篇文章里感觉太多了不方便看，所以分为上下篇吧...下篇写完啦，感兴趣的朋友可以继续关注 => Vue开发仿旅游站we...
阅读 3616·2023-04-25 23:32
阅读 2039·2019-08-30 15:55
阅读 2651·2019-08-30 15:52
阅读 3109·2019-08-30 10:54
阅读 839·2019-08-29 16:16
阅读 644·2019-08-29 15:09
阅读 3646·2019-08-26 14:05
阅读 1632·2019-08-26 13:22
