2. 程式人生 > >vue 外掛tab選項卡

vue 外掛tab選項卡

阿新 • • 發佈：2019-01-22
var VueTouch = require ('vue-touch'); Vue.use (VueTouch); import requestAnimFrame from "utils/requestAnimFrame" const sign = (num)=> { return num >= 0 ? 1 : -1 } export default { props: ["options", "state"], data(){ return { tabsWrapID: undefined
,//外容器ID wrapWidth: "", //外容器寬度 tWidth: 0, //每一個選項卡應該有多寬 width: 0, //寬度。 startTransX: 0, transX: 0, //元素樣式偏移。 cssX: 0 //動作中css實際完成的偏移。 } }, methods: { init(){ this.wrapWidth = document.getElementById (this
.tabsWrapID).offsetWidth; this.tWidth = this.wrapWidth / this.options.count; this.width = this.tWidth * this.options.htmls.length; setTimeout(function(){ this.$el.style["height"]= this.$el.children[0].clientHeight+"px"; }.bind(this
),0) if (this.options.pin) { var elemRect = this.$el.getBoundingClientRect (); var windowOffset = this.getWindowOffset (); var winOffsetY = windowOffset.offsetY; this.elemOffsetY = elemRect.top + winOffsetY; document.addEventListener ('scroll', this.isTop); } }, onPan(event){ if (this.options.disPan) return; this.transX = event.deltaX + this.startTransX; this.cssX = this.transX; if (event.eventType == 4) { this.transX = -Math.round (-this.transX / this.tWidth) * this.tWidth; //整格滑動 var start = null; if (this.transX > 0) { // 頭部回彈 this.transX = 0; var speed = 24; requestAnimFrame (step.bind (this)); function step (timestamp) { this.cssX -= speed; if (this.cssX > this.transX) requestAnimFrame (step.bind (this)); else this.startTransX = this.cssX = this.transX; }; } else if (this.transX < this.wrapWidth - this.width) { // 尾部回彈 this.transX = this.wrapWidth - this.width; var speed = 24; requestAnimFrame (step.bind (this)); function step (timestamp) { this.cssX += speed; if (this.cssX < this.transX) requestAnimFrame (step.bind (this)); else this.startTransX = this.cssX = this.transX; }; } else { //整格落位 let speed = 6; let _sign = sign (this.cssX - this.transX); if (_sign * (this.cssX - this.transX) > 1) requestAnimFrame (step.bind (this)); else this.cssX = this.transX; function step (timestamp) { if (start === null) start = timestamp; let progress = timestamp - start; if (progress < 3000) speed *= 1 - progress / 3000; this.cssX -= _sign * speed; if (_sign * (this.cssX - this.transX) > 1) requestAnimFrame (step.bind (this)); else this.cssX = this.transX; }; } this.startTransX = this.transX; //滑動結束設定下次滑動起始值。 } }, slideTo(dex){ this.state = dex; let speed = 10; // 開頭幾個 if (dex + 1 <= this.options.count) { this.transX = 0; // 設定應到位置。 if (this.startTransX < this.transX) { let _sign = sign (this.transX - this.startTransX); this.cssX = this.transX - _sign * this.tWidth; requestAnimFrame (step.bind (this)); function step () { this.cssX += _sign * speed; if (_sign * (this.cssX - this.transX) < 0) requestAnimFrame (step.bind (this)); else { this.cssX = this.startTransX = this.transX; if (this.options.slideCallback) this.options.slideCallback (dex); } ; }; } //無需動畫 else { this.cssX = this.startTransX = this.transX; if (this.options.slideCallback) this.options.slideCallback (dex); } } // 結尾幾個 else if (this.options.htmls.length - dex <= this.options.count) { this.transX = this.wrapWidth - this.width;// 設定應到位置。 if (this.startTransX > this.transX) { let _sign = sign (this.transX - this.startTransX); this.cssX = this.transX - _sign * this.tWidth; requestAnimFrame (step.bind (this)); function step () { this.cssX += _sign * speed; if (_sign * (this.cssX - this.transX) < 0) requestAnimFrame (step.bind (this)); else { this.cssX = this.startTransX = this.transX; if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex); } }; } else { this.cssX = this.startTransX = this.transX; //無需動畫 if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex); } } //中 else { this.transX = -this.tWidth * dex;// 設定應到位置。 let _sign = sign (this.transX - this.startTransX); if (this.tWidth * (dex + 0.5 * (1 - _sign)) + this.startTransX >= 0 && this.tWidth * (dex + 0.5 * (1 - _sign)) + this.startTransX <= this.wrapWidth) { //無需動畫 this.cssX = this.transX = this.startTransX; if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex); } else { //需要動畫 this.cssX = this.transX - _sign * this.tWidth; requestAnimFrame (step.bind (this)); function step () { this.cssX += _sign * speed; if (_sign * (this.cssX - this.transX) < 0) requestAnimFrame (step.bind (this)); else { this.cssX = this.startTransX = this.transX; if (typeof this.options.slideCallback == "function") this.options.slideCallback (dex); } }; } } }, isTop(){ var windowOffset = this.getWindowOffset (), winOffsetY = windowOffset.offsetY, isTop; isTop = this.elemOffsetY <= winOffsetY; if (isTop) { this.$el.children[0].style['position'] = 'fixed'; this.$el.children[0].style['top'] = '0'; this.$el.children[0].style['left'] = '0'; } else { this.$el.children[0].style['position']='relative'; } return isTop; }, getWindowOffset(){ var t; var win = window; var pageXOffset = (typeof win.pageXOffset == 'number') ? win.pageXOffset : (((t = doc.documentElement) || (t = body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : body).ScrollLeft; var pageYOffset = (typeof win.pageYOffset == 'number') ? win.pageYOffset : (((t = doc.documentElement) || (t = body.parentNode)) && typeof t.ScrollTop == 'number' ? t : body).ScrollTop; return { offsetX: pageXOffset, offsetY: pageYOffset }; }, }, watch: { options(){ this.tabsWrapID = parseInt (Math.random () * 1e10); setTimeout (this.init.bind (this), 10); }, state(val){ this.slideTo(val) } }, computed: { wrapStyle(){ var _str = ""; if (this.width) _str += `width:${this.width}px;`;//寬度 _str += `-webkit-transform:translateX(${this.cssX}px);` //位移。 _str += `transform:translateX(${this.cssX}px);` //位移。 return _str } } }

相關推薦

vue 外掛tab選項卡

var VueTouch = require ('vue-touch'); Vue.use (VueTouch); import requestAnimFrame from "utils/requestAnimFrame" const sign = (num)=> {

微信小程式的wx-charts外掛-tab選項卡

微信小程式的wx-charts外掛-tab選項卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const app = getApp(); var ringChart = null; Page(

vue tab選項卡

border ear cti cdn none box line use port <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

tab選項卡外掛

<style> *{margin:0;padding:0;} ul,li{list-style-type: none;} .cj-tab { background: #f3f3f3; width:400px; } .tab {

jQuery外掛開發-----tab選項卡

經過實踐，發現我不是一個能夠堅持的人，所以一有計劃馬上執行，為了每天保持學習，敲程式碼，所以不斷看視訊教程，看書，當年成為學渣就是因為不能重複看一本書。為了分擔家裡負擔，好書重複翻看，好的視訊教程重複看，忍忍也就過去了，我需要提升！ 關於外掛，之前文章講過，this指向要

vue+better-scroll實現多tab選項卡上拉載入更多的實踐例子

 閒話少說，先上效果 專案中會經常遇到類似這樣的多tab切換的需求，tab可以點選，可以滑動。每個tab的內容還需要上拉載入重新整理。 沒有辦法，好好研究一下，做個記錄。以防來日不時之需。 專案中上拉載入用到了很好用的工具better-scroll,各位可能都知

用angular中的ng-repeat和ng-show來實現tab選項卡

new angular lis content padding col ora ack 顯示 雖然我們可以用angular中的路由來做tab選項卡，但是那會讓我們建立很多的頁面來引入，或者建立 <script type="text/ng-template" id="n

自創簡易CSS Tab 選項卡

選中 dem top ive load fun .cn click 綜合 前段時間我註冊了 w3c.run域名，打算做一個W3C相關技術在線試驗工具。沒錯，就是在線編寫html、css、js代碼然後在線運行，查看效果。 在設計首頁時，我打算首頁提供三個代碼編輯器，介於界面大

原生JS畫的tab選項卡

記錄 bsp back height 原生js .class lis get function 記錄一下原生js寫的tab選項卡 鼠標滑入可以切換圖片 離開之後自動切換 <!DOCTYPE html> <html lang="en"> &l

Tab選項卡 自動切換效果js實現

one asc hidden abs 公告 turn get 實現 pla try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

Tab選項卡 延遲切換效果js實現

ext 0ms 分享 規則 .get 內容 char out try try.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t

一個頁面多個tab選項卡效果

結果 菜鳥 提升 ref -a 搜索引擎 flow .cn www. 新整理同一個頁面多個tab選項卡，由於不會自己些代碼，只能從網上找現成的來改。留著備用。 共3部分，HTML、CSS、JS 暫時沒有演示地址和下載地址，以後會補上。 HTML部分 <!DOCTY

使用jq實現tab選項卡

選項卡 mov 選項 function spa color fun () dex jq代碼 $(‘#fenlei_title span‘).click(function() { $("#fenlei_title span").eq($(this).

tab選項卡動態滑動效果

ref nav css引入 選項 important script 滑動效果 tab選項卡 port css引入:style.css 樣式可自己更改 html 結果和class： <div class="navBar"> <ul

layui 的Tab選項卡

申請 www. yui TE http bbr -s pre clas http://www.layui.com/doc/element/tab.html <#--start--> <div class="layui-tab layui-tab-

AxureRP分頁簽 / Tab選項卡切換功能~

info 雙擊 加背景 編輯 alt idt 拖動 選項卡切換 調整 最終結果圖如下： 實現過程： 1、從元件庫中拖一個動態面板，調整所需大小，接下來的步驟都通過雙擊動態面板來完成。 2、雙擊動態面板，彈出框“面板狀態管理”，新建狀態並命名。此處新建了TAB1、TAB2、T

Tab選項卡

message mes 分享 present data tab選項卡 選項 ria tin <div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation"

DOM操作相關案例 模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例

order 選擇器 點擊 ttr 選擇 this 鼠標懸停 pos 清空 1.模態框案例 需求： 打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框 代碼如下： <!DOCTYPE html> &l

layui從子iframe打開父iframe的tab選項卡

link script frame manage ++ name 父iframe jquer con 數據表格字段： {field: ‘novelId‘, title: ‘小說ID‘,width:100,templet: ‘<div><a href="ja

JavaScript插件制作-tab選項卡

++ doctype 500px clear win remove 制作 getattr hover JavaScript插件制作練習-鼠標劃過選項卡切換圖片 <!DOCTYPE html> <html> <head>