swiper在里面滚动效果演示地址 http://www.swiper.com.cn/demo/99-inner-scroll.html
基于mui的区域滚动组件以及滑动事件实现组件
组件css代码
/分屏切换组件CSS/
.mui-scroll-splitScreen{
position: relative;
overflow: hidden;
}
.mui-scroll-splitScreen-group{
position: relative;
width: 100%;
height: 100%;
transition: all 0.5s;
}
.mui-scroll-splitScreen .mui-scroll-wrapper{
position: relative;
height: 100%;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .mui-scroll{
padding-bottom: 40px;
min-height: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper .slide-up-msg{
text-align: center;
opacity: 0;
height: 40px;
line-height: 40px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes] .slide-up-msg{
opacity: 1;
}
.mui-scroll-splitScreen .mui-scroll-wrapper[swipeupmore=yes1] .slide-up-msg{
opacity: 1;
}
/分屏切换组件CSS/
组件JS代码
//分屏切换组件功能代码
function splitScreenSlide(Json){
var _this=this;
var el=Json.el;
var slideUpMsg=Json.slideUpMsg || '上拉显示更多';
var $group=document.querySelector(el+' .mui-scroll-splitScreen-group');
var $wrapper=document.querySelectorAll(el+' .mui-scroll-wrapper');
this.initInsideScroll=function(){
//判断每屏内容是否超出，如果超出不启用滑动两次切屏效果，直接滑动一次切屏
for(var i=0;i<$wrapper.length;i++){
var $scroll=$wrapper[i].getElementsByClassName('mui-scroll')[0];
if($scroll.clientHeight<=$wrapper[i].clientHeight){
console.log(1);
$wrapper[i].setAttribute('swipeupMore','yes1');
$wrapper[i].setAttribute('swipedownMore','yes1');
}else{
$wrapper[i].setAttribute('swipeupMore','no');
$wrapper[i].setAttribute('swipedownMore','no');
}
}
}
this.goToSlideItem=function(index){
//跳转到指定屏，从0开始
$group.style.transform='translateY(-'+index100+'%)';
_this.initInsideScroll();
}
this.restoreEl=function(){
//复原组件
$group.style.transform='translateY(0)';
_this.initInsideScroll();
}
//组件生成代码
for(var i=0;i<$wrapper.length;i++){
//添加提示
var oP=document.createElement('p');
oP.className='slide-up-msg';
if(i==$wrapper.length-1){
$wrapper[i].endWrapper=true;
oP.innerHTML='没有更多内容了！';
}else{
oP.innerHTML=slideUpMsg;
}
$wrapper[i].appendChild(oP);
//添加索引下标
$wrapper[i].index=i;
//添加监听事件
$wrapper[i].addEventListener('swipeup',function(){
var xx=mui(this).scroll();
if(xx.y<=xx.maxScrollY){
if(this.endWrapper==true){
this.setAttribute('swipeupMore','yes');
this.setAttribute('swipedownMore','no');
return false;
}
if(this.getAttribute('swipeupMore')=='yes' || this.getAttribute('swipeupMore')=='yes1'){
if(this.getAttribute('swipeupMore')!='yes1'){
this.setAttribute('swipeupMore','no');
this.setAttribute('swipedownMore','no');
}
var x=(this.index+1)100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipeupMore','yes')
this.setAttribute('swipedownMore','no');
}
}
})
$wrapper[i].addEventListener('swipedown',function(){
var xx=mui(this).scroll();
if(xx.y>=0){
if(this.getAttribute('swipedownMore')=='yes' || this.getAttribute('swipedownMore')=='yes1'){
if(this.getAttribute('swipedownMore')!='yes1'){
this.setAttribute('swipedownMore','no');
this.setAttribute('swipeupMore','no');
}
var x=(this.index-1)*100;
$group.style.transform='translateY(-'+x+'%)';
}else{
this.setAttribute('swipedownMore','yes')
this.setAttribute('swipeupMore','no');
}
}
})
}
this.initInsideScroll();
}
使用方法 HTML代码
<div class="mui-scroll-splitScreen">
<div class="mui-scroll-splitScreen-group">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第一屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第二屏 内容
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
第三屏 内容
</div>
</div>
</div>
</div>
JS初始化代码
mui.init({
gestureConfig:{
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
}
});
mui('.mui-scroll-wrapper').scroll({
indicators:true
});
//实例化组件
var mSplitScreen=new splitScreenSlide({
el:'.mui-scroll-splitScreen'
});
附件有实例代码需要引用mui.css 和mui.js
