如何用iscroll制作水平滚动的list布局

使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js（这里lz用了zeptoJS或者大家可以用jquery）

假设我们有这么一段html

[html] view plaincopy

<div id="wrapperIndexActivity" class="wrapperIndexActivity">

<div class="scrollerActivity" id="scrollerActivity">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

</div>

</div>

首先先对ID（wrapperIndexActivity）加载iscroll

[javascript] view plaincopy

var homeScroll = new iScroll("wrapperIndexActivity", {

snap : true,

momentum : false,

hScrollbar : false,

vScrollbar : false,

checkDOMChanges : true,

onScrollEnd : function() {

}

});

对Id所属class附加样式：

[css] view plaincopy

wrapperIndexActivity{ width:100%;height:100%;position:relative; z-index:1;overflow:hidden;display: block;}

然后需要对ID（scrollerActivity）计算有几幅屏幕可以切换（这里假设有4幅）

[javascript] view plaincopy

$("#scrollerActivity")style({

'width' : documentbodyclientWidth 4 + 'px'

});

对应class需附加样式：

[css] view plaincopy

wrapperIndexActivity scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}

再然后对li 让每一个列表项都撑满屏幕

[javascript] view plaincopy

$('#wrapperIndexActivity ul li ')style({

'width' : documentbodyclientWidth + "px"

});

对应class附加样式：

[css] view plaincopy

wrapperIndexActivity scrollerActivity ul li {-webkit-box-sizing:border-box; display:block; height:100%; float:left;}

最后刷新iscroll

[javascript] view plaincopy

// 刷新数据

omeScrollrefresh();

配置 up 的 isBounce 为 false, 禁止 ios 的回d效果导致的

注意: 配置 up 的 isBounce 为 false 之后，会禁止 window 的 touchmove 事件，从而阻止 iOS 的回d效果

此时除了 mescroll 的 div 可以滑动，其他的区域匀无法滑动；

如果你希望 mescroll 之外的某个 div 可以滑动，则可为这个 div 加入 mescroll-touch 的样式即可；

比如你希望顶部导航菜单 class="nav-top" 的 div 可接收 touchmove 事件，则 class="nav-top mescroll-touch"

如果添加 mescroll-touch-x 则可水平滑动；如果添加 mescroll-touch-y 则可上下滑动

参考： mescrolljs 下拉刷新使用时应该注意的问题（卡顿情况，有时候会拉不动）

移动端上拉加载和下拉刷新的vue插件

做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescrolljs插件好一点

1npm安装

2导入(在哪个页面使用,则在哪个页面导入)：

注册组件：

3template使用

4data里进行相关配置

5style样式

具体的配置可以参考： mescroll配置

6scroll属性在ios手机上回出现卡顿问题

在进行滚动的这个容器样式中添加这个属性：

填加了这个兼容会导致定位为position：fixed的失去效果，使用position：absolute可以解决

以上就是关于如何用iscroll制作水平滚动的list布局全部的内容，包括:如何用iscroll制作水平滚动的list布局、mescroll 导致子元素横向滚动卡顿、vue中好用的下拉刷新、上拉加载插件mescroll.js等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！