移动端上下滑动swiper,第二个页面内容大于屏幕尺寸，现在的问题是，超出部分无法通过滚动条下滑查看。
来源：互联网 发布：c语言软件测试 编辑：程序博客网 时间：2024/05/13 02:49
相关链接：
https://segmentfault.com/q/1010000005605451
上下滑动的swiper，有两页，第二个slider是列表页，内容会超出屏幕高度，现在的问题是，超出部分无法通过滚动条下滑查看。
想要的效果是，第二页slider不受影响，出现滚动，正常下滑查看内容。
（如果禁用swiper某个方向的移动，会导致无法滑动到上一页）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--swiper-->
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
</head>
<body>
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide second">
<div class="swiper-container swiper-container-scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3>title</h3>
<p>this is a p tag</p>
.....
.....
.....
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
</div>
</div>
<script src="js/swiper-3.4.2.min.js"></script>
<script>
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical'
});
var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
nested: true
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--swiper-->
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
</head>
<body>
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide second">
<div class="swiper-container swiper-container-scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3>title</h3>
<p>this is a p tag</p>
.....
.....
.....
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<div class="swiper-slide">Vertical Slide 3</div>
<div class="swiper-slide">Vertical Slide 4</div>
</div>
</div>
<script src="js/swiper-3.4.2.min.js"></script>
<script>
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical'
});
var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
nested: true
});
</script>
</body>
</html>
阅读全文
1 0
- 移动端上下滑动swiper,第二个页面内容大于屏幕尺寸，现在的问题是，超出部分无法通过滚动条下滑查看。
- 利用swiper移动端上下滑动
- swiper入门小练习-移动端实现上下滑动翻整个页面（一）
- Swiper常用于移动端网站的内容触摸滑动
- Swiper常用于移动端网站的内容触摸滑动
- Swiper移动端网站的内容触摸滑动
- swiper移动端无法滑动问题
- 通过ImageView的点击监听事件来滑动ScrollView的滚动条，进而改变屏幕显示内容
- JavaScript ---- swiper超出高度允许滚动条
- CSS---前端通过 css如何实现overflow:auto滚动超出部分的同时隐藏滚动条？
- swiper.js中内容超出一屏可滑动
- 关于swiper在移动端，快速上下滑动出现白边的解决办法
- Swiper内容超出添加横向/纵向滚动
- 移动端H5页面，上下滑动翻页
- 利用DragTopLayout实现上下两部分页面整体滑动，不影响下面部分页面的滚动效果
- swiper-移动端网页触摸内容滑动js插件
- swiper：前应用较广泛的移动端网页触摸内容滑动js插件
- 轮播组件Swiper实现移动端网站的内容触摸滑动使用方法
- 苹果疯了，现在又开始坑支付宝！
- Android客制化------7.0设置壁纸存在的一些问题
- Liferay7.0的安装初始化与使用
- myeclipse10配置maven
- android aidl oneway用法
- 移动端上下滑动swiper,第二个页面内容大于屏幕尺寸，现在的问题是，超出部分无法通过滚动条下滑查看。
- Tornado
- UVa201
- dcloud------mui 点击底部选项卡，获取文本内容
- 五分钟让你全面理解ADO.NET连接池
- CBoard BI 数据可视化 支持国产开源
- 机器学习之决策树实现隐形眼镜预测
- 知识总结之 插件化学习 Hook系统方法分析
- 足迹001
