better-scroll基本應用

原創 小胡同志0526 2020-06-23 01:21

better-scroll是最接近與原生的滾動插件，兼容pc和移動端，示例和文檔請移步官網地址。

一、BScroll縱向滾動

1.示例代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	    <meta name="format-detection" content="telephone=no" />
	    <title>BScroll縱向滾動</title>
	    <script type="text/javascript">
	        (function(doc, win) {
	            var docEl = doc.documentElement,
	                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	                recalc = function() {
	                    var clientWidth = docEl.clientWidth;
	                    if (!clientWidth) return;
	                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
	                };
	            if (!doc.addEventListener) return;
	            win.addEventListener(resizeEvt, recalc, false);
	            doc.addEventListener('DOMContentLoaded', recalc, false);
	        })(document, window);
	    </script>
	    <style>
	    	*{
	    		margin: 0;
	    		padding: 0;
	    	}
	    	.wrap{
	    		position: absolute;;
	    		width: 100%;
	    		top: 50px;
	    		left: 0px;
	    		bottom: 50px;
	    		overflow: hidden;
	    	}
	    	.top{
	    		position: fixed;
	    		top: 0;
	    		height: 50px;
	    		width: 100%;
	    		left: 0;
	    		background-color: #000000;
	    	}
	    	.bottom{
	    		position: fixed;
	    		bottom: 0;
	    		height: 50px;
	    		width: 100%;
	    		left: 0;
	    		background-color: #000000;
	    	}
	    	.content li{
	    		margin: 0 0.2rem;
	    		height: .8rem;
	    		line-height: .8rem;
	    		padding: 0 .4rem;
	    		border-bottom: 1px solid #ccc;
	    		font-size: 0.30rem;
	    	}
	    	/* 下拉、上拉提示信息 */
		    .top-tip{
		        position: absolute;  
		        top: -40px;  
		        left: 0;
		        z-index: 1;  
		        width: 100%;  
		        height:40px;  
		        line-height:40px;  
		        text-align:center;
		        color: #555;
		        font-size: 0.30rem;
		    } 
		      
		    .bottom-tip{
		        width: 100%;
		        height: 35px;
		        line-height: 35px;
		        text-align: center;
		        color: #777;
		        background: #f2f2f2;
		        position: absolute;
		        bottom: -35px;
		        left: 0;
		        font-size: 0.30rem;
		    }
	    </style>
	</head>
	<body>
		<div class="top"></div>
		<div class="wrap">
			<div class="content">
				<!-- 刷新提示信息 -->
                <div class="top-tip">
                    <span class="refresh-hook">下拉刷新</span>
                </div>
				<ul class="list">
					<li onclick="clickli(event)">列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
				</ul>
				<!-- 底部提示信息 -->
                <div class="bottom-tip">
                    <span class="loading-hook">加載更多</span>
                </div>
			</div>
		</div>
		<div class="bottom"></div>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bscroll.min.js"></script>
		<script>
			$(function(){
				var wrapper = document.querySelector('.wrap') 
				var myScroll = new BScroll(wrapper, {
					scrollY: true,
					probeType:3,  
			      	pullDownRefresh: {
				        threshold: 50,
				        probeType: 3
				    },
				    pullUpLoad: {
				        threshold: 50
				    },
				    click:true
				});
				//下拉刷新動作觸發事件
				myScroll.on('pullingDown', (e)=>{
				  console.log('pullingDown')
//				  myScroll.refresh()
				  myScroll.finishPullDown() // 下拉刷新動作完成後調用此方法告訴BScroll完成一次下拉動作
				});
				//上拉加載
				myScroll.on('pullingUp', (e)=>{
				  console.log('pullingUp')
				  //myScroll.refresh() // DOM 結構發生變化後，重新初始化BScroll
				  myScroll.finishPullUp() // 上拉加載動作完成後調用此方法告訴BScroll完成一次上拉動作
				});
				// 滑動過程中事件
                myScroll.on('scroll',(pos)=>{
                	console.log(-pos.y,myScroll.maxScrollY)
                    if(pos.y > 40){
                        $(".refresh-hook").html('釋放立即刷新');
                    }else{
                    	$(".refresh-hook").html('下拉刷新');
                    }
                    if(pos.y<myScroll.maxScrollY-40){
                    	$(".loading-hook").html('加載中...');
                    }else{
                    	$(".loading-hook").html('加載更多');
                    }
                });
			});
			function clickli(e){
				console.log(e,e._constructed)//我們會給派發的 event 參數加一個私有屬性 _constructed，值爲 true
			}
		</script>
	</body>
</html>

2.截圖
縱向滾動預覽圖

二、BScroll橫向滾動

1.示例代碼

注意：BScroll橫向滾動必須計算要滾動容器的寬度，縱向滾動不需要計算。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	    <meta name="format-detection" content="telephone=no" />
	    <title>BScroll橫向滾動</title>
	    <script type="text/javascript">
	        (function(doc, win) {
	            var docEl = doc.documentElement,
	                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	                recalc = function() {
	                    var clientWidth = docEl.clientWidth;
	                    if (!clientWidth) return;
	                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
	                };
	            if (!doc.addEventListener) return;
	            win.addEventListener(resizeEvt, recalc, false);
	            doc.addEventListener('DOMContentLoaded', recalc, false);
	        })(document, window);
	    </script>
	    <style>
	    	*{
	    		margin: 0;
	    		padding: 0;
	    		list-style-type: none;
	    	}
	    	.wrap{
	    		position: absolute;;
	    		width: 100%;
	    		top: 50px;
	    		left: 0px;
	    		bottom: 50px;
	    		overflow: hidden;
	    	}
	    	.top{
	    		position: fixed;
	    		top: 0;
	    		height: 50px;
	    		width: 100%;
	    		left: 0;
	    		background-color: #000000;
	    	}
	    	.bottom{
	    		position: fixed;
	    		bottom: 0;
	    		height: 50px;
	    		width: 100%;
	    		left: 0;
	    		background-color: #000000;
	    	}
	    	
	    	.content{
	    		height: 1rem;
	    		overflow: hidden;
	    		white-space: nowrap;
	    	}
	    	.list{
	    		height: 1rem;
	    	}
	    	.content li{
	    		margin: 0 10px 0 0;
	    		height: .8rem;
	    		line-height: .8rem;
	    		border-bottom: 1px solid #ccc;
	    		font-size: 0.30rem;
	    		width: 50px;
	    		float: left;
	    		text-align: center;
	    	}
	    </style>
	</head>
	<body>
		<div class="top"></div>
		<div class="wrap">
			<div class="content">
				<ul class="list">
					<li onclick="clickli(event)">列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
					<li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li><li>列表</li>
				</ul>
			</div>
		</div>
		<div class="bottom"></div>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bscroll.min.js"></script>
		<script>
			$(function(){
				var wrapper = document.querySelector('.wrap');
				var liCount=$(".list").find("li").size();
				$(".content").width(liCount*50+liCount*10);
				var myScroll = new BScroll(wrapper, {
					scrollY: false,
					probeType:3,  
					scrollX:true,
				    click:true
				});
				// 滑動過程中事件
                myScroll.on('scroll',(pos)=>{
                	console.log(pos,myScroll.maxScrollX)
                });
			});
			function clickli(e){
				console.log(e,e._constructed)//我們會給派發的 event 參數加一個私有屬性 _constructed，值爲 true
			}
		</script>
	</body>
</html>

2.截圖
橫向滾動預覽圖

三、BScroll滾動聯動

1.示例代碼

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<meta name="format-detection" content="telephone=no" />
		<title>BScroll滾動聯動</title>
		<script type="text/javascript">
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if(!clientWidth) return;
						docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
					};
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			.top {
				position: fixed;
				top: 0;
				height: 1rem;
				line-height: 1rem;
				width: 100%;
				left: 0;
				background-color: #000000;
				color: #fff;
				font-weight: bold;
				font-size: 0.32rem;
				text-align: center;
			}
			
			.bottom {
				position: fixed;
				bottom: 0;
				height: 1rem;
				line-height: 1rem;
				width: 100%;
				left: 0;
				background-color: #000000;
				color: #fff;
				font-weight: bold;
				font-size: 0.32rem;
				text-align: center;
			}
			/*Y軸*/
			
			.wrapY {
				position: absolute;
				;
				width: 100%;
				top: 1.8rem;
				left: 0px;
				bottom: 50px;
				overflow: hidden;
			}
			
			.wrapY .content li {
				margin: 0 0.2rem;
				height: .8rem;
				line-height: .8rem;
				padding: 0 .4rem;
				border-bottom: 1px solid #ccc;
				font-size: 0.30rem;
			}
			/* 下拉、上拉提示信息 */
			
			.top-tip {
				position: absolute;
				top: -40px;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #555;
				font-size: 0.30rem;
			}
			
			.bottom-tip {
				width: 100%;
				height: 35px;
				line-height: 35px;
				text-align: center;
				color: #777;
				position: absolute;
				bottom: -35px;
				left: 0;
				font-size: 0.30rem;
			}
			/*X軸*/
			
			.wrapX {
				position: absolute;
				;
				width: 100%;
				top: 1rem;
				left: 0px;
				height: 0.8rem;
				overflow: hidden;
				background-color: #009eff;
			}
			
			.wrapX .content {
				height: 0.8rem;
			}
			
			.wrapX .list {
				height: 0.8rem;
			}
			
			.wrapX .content li {
				height: .8rem;
				line-height: .8rem;
				font-size: 0.30rem;
				width: 1.2rem;
				float: left;
				text-align: center;
				color: #fff;
			}
			
			.navActive {
				color: rgb(255, 145, 4) !important;
				font-size: 0.32rem;
				font-weight: bold;
			}
		</style>
	</head>

	<body>
		<div class="top">頭部</div>
		<div class="wrapX">
			<div class="content">
				<ul class="list">
					<li onclick="clickliX(event,this)" class="navActive">導航0</li>
					<li onclick="clickliX(event,this)">導航1</li>
					<li onclick="clickliX(event,this)">導航2</li>
					<li onclick="clickliX(event,this)">導航3</li>
					<li onclick="clickliX(event,this)">導航4</li>
					<li onclick="clickliX(event,this)">導航5</li>
					<li onclick="clickliX(event,this)">導航6</li>
					<li onclick="clickliX(event,this)">導航7</li>
					<li onclick="clickliX(event,this)">導航8</li>
					<li onclick="clickliX(event,this)">導航9</li>
					<li onclick="clickliX(event,this)">導航10</li>
					<li onclick="clickliX(event,this)">導航11</li>
					<li onclick="clickliX(event,this)">導航12</li>
					<li onclick="clickliX(event,this)">導航13</li>
					<li onclick="clickliX(event,this)">導航14</li>
					<li onclick="clickliX(event,this)">導航15</li>
					<li onclick="clickliX(event,this)">導航16</li>
					<li onclick="clickliX(event,this)">導航17</li>
					<li onclick="clickliX(event,this)">導航18</li>
					<li onclick="clickliX(event,this)">導航19</li>
					<li onclick="clickliX(event,this)">導航20</li>
					<li onclick="clickliX(event,this)">導航21</li>
					<li onclick="clickliX(event,this)">導航22</li>
					<li onclick="clickliX(event,this)">導航23</li>
					<li onclick="clickliX(event,this)">導航24</li>
					<li onclick="clickliX(event,this)">導航25</li>
					<li onclick="clickliX(event,this)">導航26</li>
					<li onclick="clickliX(event,this)">導航27</li>
					<li onclick="clickliX(event,this)">導航28</li>
					<li onclick="clickliX(event,this)">導航29</li>
					<li onclick="clickliX(event,this)">導航30</li>
					<li onclick="clickliX(event,this)">導航31</li>
					<li onclick="clickliX(event,this)">導航32</li>
				</ul>
			</div>
		</div>
		<div class="wrapY">
			<div class="content">
				<!-- 刷新提示信息 -->
				<div class="top-tip">
					<span class="refresh-hook">下拉刷新</span>
				</div>
				<ul class="list">
					<li onclick="clickliY(event,this)">列表0</li>
					<li onclick="clickliY(event,this)">列表1</li>
					<li onclick="clickliY(event,this)">列表2</li>
					<li onclick="clickliY(event,this)">列表3</li>
					<li onclick="clickliY(event,this)">列表4</li>
					<li onclick="clickliY(event,this)">列表5</li>
					<li onclick="clickliY(event,this)">列表6</li>
					<li onclick="clickliY(event,this)">列表7</li>
					<li onclick="clickliY(event,this)">列表8</li>
					<li onclick="clickliY(event,this)">列表9</li>
					<li onclick="clickliY(event,this)">列表10</li>
					<li onclick="clickliY(event,this)">列表11</li>
					<li onclick="clickliY(event,this)">列表12</li>
					<li onclick="clickliY(event,this)">列表13</li>
					<li onclick="clickliY(event,this)">列表14</li>
					<li onclick="clickliY(event,this)">列表15</li>
					<li onclick="clickliY(event,this)">列表16</li>
					<li onclick="clickliY(event,this)">列表17</li>
					<li onclick="clickliY(event,this)">列表18</li>
					<li onclick="clickliY(event,this)">列表19</li>
					<li onclick="clickliY(event,this)">列表20</li>
					<li onclick="clickliY(event,this)">列表21</li>
					<li onclick="clickliY(event,this)">列表22</li>
					<li onclick="clickliY(event,this)">列表23</li>
					<li onclick="clickliY(event,this)">列表24</li>
					<li onclick="clickliY(event,this)">列表25</li>
					<li onclick="clickliY(event,this)">列表26</li>
					<li onclick="clickliY(event,this)">列表27</li>
					<li onclick="clickliY(event,this)">列表28</li>
					<li onclick="clickliY(event,this)">列表29</li>
					<li onclick="clickliY(event,this)">列表30</li>
					<li onclick="clickliY(event,this)">列表31</li>
					<li onclick="clickliY(event,this)">列表32</li>
				</ul>
				<!-- 底部提示信息 -->
				<div class="bottom-tip">
					<span class="loading-hook">加載更多</span>
				</div>
			</div>
		</div>
		<div class="bottom">底部</div>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bscroll.min.js"></script>
		<script>
			var myScrollY = null;
			var myScrollX = null;
			$(function() {
				var wrapperY = document.querySelector('.wrapY')
				myScrollY = new BScroll(wrapperY, {
					scrollY: true,
					probeType: 3,
					click: true
				});
				var wrapperX = document.querySelector('.wrapX');
				var htmlFontSize = parseFloat($("html").css("font-size"));
				var liCount = $(".wrapX .list").find("li").size();
				$(".wrapX .content").width(liCount * htmlFontSize * 1.2);
				myScrollX = new BScroll(wrapperX, {
					scrollY: false,
					probeType: 3,
					scrollX: true,
					click: true
				});

				
			});

			function clickliY(e,t) {
				var _index=$(t).index();
				console.log(e, e._constructed) //我們會給派發的 event 參數加一個私有屬性 _constructed，值爲 true
				if(e._constructed) {
					$(".wrapX li").removeClass("navActive");
					$(".wrapX li").eq(_index).addClass("navActive");
					// 滾動到指定的目標元素
					myScrollX.scrollToElement($(".wrapX li").eq(_index).get(0), 200, true);
					myScrollY.scrollToElement($(".wrapY li").eq(_index).get(0),200);
				}
			}

			function clickliX(e, t) {
				console.log(e, e._constructed) //我們會給派發的 event 參數加一個私有屬性 _constructed，值爲 true
				if(e._constructed) {
					$(".wrapX li").removeClass("navActive");
					$(t).addClass("navActive");
					var _index=$(t).index();
					// 滾動到指定的目標元素
					myScrollX.scrollToElement($(t).get(0), 200, true);
					myScrollY.scrollToElement($(".wrapY li").eq(_index).get(0),200);
				}
			}
		</script>
	</body>

</html>

2.截圖
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

2017_11_22 Json數據與Java對象互轉的兩種方式(二)

package test;import java.util.HashMap;import java.util.Map;import net.sf.json.JSONArray;import net.sf.json.JSONObject;i

liujiaxin_lei 2020-07-07 21:44:35

2017_12_05 echarts動態賦值問題，tab切換時，圖表顯示錯亂

當一張echarts圖表中有多個選項切換時，在向option中setOption中的時候，要保證，這時候的option中並沒有任何數據，否則，會將兩次數據合併，就會導致數據錯亂問題，官網上有個解決方法，是setOption時，可以設置三個

liujiaxin_lei 2020-07-07 21:44:35

2018_02_27 全文檢索技術----Lucene

數據庫中保存的數據，磁盤中保存的數據都可以算做數據，常用的數據分爲兩種，一種是結構化數據，數據格式固定，長度有限，例如數據庫中存儲的數據，另一種是非結構化數據，數據格式不固定，長度不固定，例如磁盤中存儲的文檔數據。 結構化數據的查詢可以

liujiaxin_lei 2020-07-07 21:44:35

2017_11_29 ajax請求的get，post方式

get請求用於顯示瀏覽器上的信息，從指定的資源請求數據，瀏覽器會將get請求的執行結果緩衝，如果發送同樣的get請求，瀏覽器顯示會是緩衝的結果，而不是重新運行整個請求。post請求用於需要更新服務器信息的地方，向指定的資源提交要處理的數據

liujiaxin_lei 2020-07-07 21:44:35

2018_01_17 URI和URL的理解

url實現uri，屬於特殊的uri，uri可以分爲絕對路徑和相對路徑，url獲取到的是網絡資源存儲的一個路徑位置，而uri是唯一資源的標識符，url的整個路徑不僅可以算作資源的唯一標識符，還指出了，資源所在的路徑。

liujiaxin_lei 2020-07-07 21:44:35

2018_02_26 sso原理解析

sso單點登錄適用於多系統共享登錄信息時，需要一個特定的sso認證中心來處理用戶的登錄，註銷請求，傳統的登錄操作中，用戶通過瀏覽器發送登錄請求到服務器

liujiaxin_lei 2020-07-07 21:44:35

long型時間數據轉換成YYYY-MM-DD HH：MM：SS格式(js)

/** * long型時間處理 * @param longTypeDate long型時間 * @returns String時間 */ longTimeToString (longTypeDate){ if(long

伪成年_young 2020-07-07 10:02:57

使用VboxManage批量創建虛擬機

VirtualBox的安裝使用         當下主流的虛擬軟件主要有兩種：VirtualBox和VMware，本人開始使用虛擬化時選擇的是VMware，在window系統中的使用效果很好，但是當轉移到Linux系統時便於到了問題，如果

Monkey^_^ 2020-07-04 05:10:18

oracle 函數和觸發器

CREATE OR REPLACE FUNCTION EDUBIS.getpxfx(V_pxfx in varchar2) RETURN VARCHAR2 IS pxfx varchar2(1000); begin SEL

晴天.... 2020-07-04 03:57:35

vue中使用jsplumb基本教程

jsplumb中文教程地址： https://wdd.js.org/jsplumb-chinese-tutorial/#/ 需求效果展示： 說明：在展示普通流程圖的基礎上，實現以下功能：在流程圖中展示當前所在節點，並體現出其流轉過程。上

温九月 2020-07-03 14:58:45

asp生成年月日十分秒編號

<% '獲取當前的時間，並生成相應的編號,月日時分秒數不足10時，前加0補足 j_year=year(now()) if month(now)>=10 then j_month=month(now()) else j_month=0

zhangbo1116 2020-07-02 11:32:47

實現圖片大小的自動控制（ 圖片大小控制CSS代碼）

 圖片大小控制CSS代碼 將以下代碼放到你的樣式表文件中即可實現圖片大小的自動控制. /*圖片大小控制CSS By Tekin */img,a img{ border:0;  margin:0;  padding:0; max-width

zhangbo1116 2020-07-02 11:32:47

配置INFORMIX ODBC數據源

Technorati 標籤: INFORMIX ODBC 驅動 需要配置ODBC數據源，需要先下載一個Informix cli的Informix客戶端，其實就是Informix的ODBC驅動和一些實用工具的集合，下載地址如下： ftp:/

sailei 2020-07-01 03:42:09

TOS/DSCP

在IP網絡中，IPv4報文中有三種承載QoS優先級標籤的方式，分別爲基於二層的CoS字段（IEEE802.1p）的優先級、基於IP層的IP優先級字段ToS優先級和基於IP層的DSCP（Differentiated Services Co

zjqlovell 2020-06-27 18:59:44

工作常用易忘指令彙總（持續更新中）

vim添加多行註釋 在linux中，文本每一行的起始標誌是^，結束標誌爲$，因此使用vim搜索並替換爲#即可。 例如：把1-10行註釋掉(g表示替換，將起始標誌^替換爲#) 1,10s/^/#/g 取消註釋 1,10s/^#/

dingjianfeng2014 2020-06-27 05:47:43