用mui寫的原生tab以及選項卡頁面的拖動效果
廢話少說上程式碼！
1、首先我們建立原生的tab選項，目前這個很容易實現，在hbuilder中新建專案選中移動app模板選擇
tab的配置項很簡單官網有教程http://ask.dcloud.net.cn/article/12602
注意配置tags 時每個tags的id 要具有唯一性，配置圖示的時候圖示的程式碼要是Unicode 這個在官方文件裡也有介紹就不多說了，有問題留言給我，下面是我的配置項。我配了五個按鈕，把中間的凸起去掉了，每個寬度都是20%；去中間凸起要到你的入口介面中配置。
"launchwebview": {
"bottom": "0px",
"background" 新建五個頁面，我是直接把我專案刪減了一下所以我的頁面是有資料夾層次的
這個是入口頁面的程式碼main.html
(function() {
//初始化的時候建立了五個頁面，他們都顯示，只是left位置不一樣，你可以想象成五個頁面並排排列
mui.init({
swipeBack: true, //啟用右滑關閉功能
subpages: [{
url: "main_index/main_index.html",
id: "main_index.html",
styles: {
left: '0px',
top: '45px',
bottom: '51px'
}
}, {
url: "main_team/main_team.html",
id: "main_team.html",
styles: {
left: '100%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_chat/main_chat.html",
id: "main_chat.html",
styles: {
left: '200%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_account/main_account.html",
id: "main_account.html",
styles: {
left: '300%',
top: '45px',
bottom: '51px'
}
},
{
url: "main_more/main_more.html",
id: "main_more.html",
styles: {
left: '400%',
top: '45px',
bottom: '51px'
}
}
]
});
var as = "pop-in";
mui.plusReady(function() {
var self = plus.webview.currentWebview(); // 當前頁面
var aniShow = {};
util.initSubpage(aniShow);
var nview = plus.nativeObj.View.getViewById('tabBar'),
activePage = plus.webview.currentWebview(),
targetPage,
subpages = util.options.subpages,
pageW = window.innerWidth,
currIndex = 0;
/**
* 根據判斷view控制元件點選位置判斷切換的tab
*/
//根據點選位置判斷點選的是哪個按鈕
nview.addEventListener('click', function(e) {
var clientX = e.clientX;
if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
currIndex = 1;
} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
currIndex = 2;
} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
currIndex = 3;
} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
currIndex = 4;
} else {
currIndex = 5;
}
// 匹配對應tab視窗
changeSub(currIndex)
//底部選項卡切換，這個是呼叫的util.js的方法
util.toggleNview(currIndex - 1);
//更新當前活躍的頁面
activePage = targetPage;
});
function changeSub(index) {
var sub1 = plus.webview.getWebviewById("main_index.html");
var sub2 = plus.webview.getWebviewById("main_team.html");
var sub3 = plus.webview.getWebviewById("main_chat.html");
var sub4 = plus.webview.getWebviewById("main_account.html");
var sub5 = plus.webview.getWebviewById("main_more.html");
console.log(JSON.stringify(sub1.getStyle()));
//這裡獲取每個頁面的當前位置
var sub1From = sub1.getStyle().left;
var sub2From = sub2.getStyle().left;
var sub3From = sub3.getStyle().left;
var sub4From = sub4.getStyle().left;
var sub5From = sub5.getStyle().left;
//這裡根據點選時傳入的值判斷各個頁面新的位置
var sub1To = (1 - index) * 100 + "%";
var sub2To = (2 - index) * 100 + "%";
var sub3To = (3 - index) * 100 + "%";
var sub4To = (4 - index) * 100 + "%";
var sub5To = (5 - index) * 100 + "%";
console.log("從" + sub1From + "去" + sub1To);
console.log("從" + sub2From + "去" + sub2To);
console.log("從" + sub3From + "去" + sub3To);
console.log("從" + sub4From + "去" + sub4To);
console.log("從" + sub5From + "去" + sub5To);
//plus.webview.startAnimation 這個方法只能關聯兩個或一個視窗，所以我用了三個，每個方法中的第一個'view'都是主介面，必須填; ‘fromLeft’:value,'toLeft':value;
//這樣配置完以後就可以實現點選切換選項卡介面的動畫效果了
plus.webview.startAnimation({
'view': sub1,
'styles': {
'fromLeft': sub1From,
'toLeft': sub1To
},
'action': 'show'
}, {
'view': sub2,
'styles': {
'fromLeft': sub2From,
'toLeft': sub2To
},
'action': 'show'
},
function(e) {
}.bind(this)
)
plus.webview.startAnimation({
'view': sub3,
'styles': {
'fromLeft': sub3From,
'toLeft': sub3To
},
'action': 'show'
}, {
'view': sub4,
'styles': {
'fromLeft': sub4From,
'toLeft': sub4To
},
'action': 'show'
},
function(e) {
}.bind(this)
)
plus.webview.startAnimation({
'view': sub5,
'styles': {
'fromLeft': sub5From,
'toLeft': sub5To
},
'action': 'show'
},
function(e) {
}.bind(this)
)
}
});
})();下面我們來看拖動頁面切換選項卡介面
mui.init()
//這裡我只寫一個頁面的拖動方法
//_self 自身頁面
//_next 當前頁面的下一個頁面
//_prev 當前頁面的上一個頁面
//nowLeft 頁面拖動前的位置
//e0ndLeft 頁面拖動結束後的位置
var _self, _next, _prev, nowLeft, endLeft;
mui.plusReady(function() {
_self = plus.webview.currentWebview();
_next = plus.webview.getWebviewById("main_account.html");
_prev = plus.webview.getWebviewById("main_team.html");
_index = plus.webview.getLaunchWebview();
_self.drag({
direction: "left",
moveMode: "followFinger"
}, {
view: _next,
moveMode: 'follow'
}, function(e) {
//注意這個回撥函式會隨著你拖動的變化而變化，一共有三個事件，開始，拖動，結束
if(e.type == "start") {
nowLeft = _self.getStyle().left;
//這裡當拖動開始時獲取此頁面當前的位置
}
if(e.type == "end") {
//拖動結束後獲取此頁面的位置
endLeft = _self.getStyle().left;
if(nowLeft != endLeft) {//如果兩個位置不一樣則說明拖動成功了，我們向主頁面也就是tab選項卡所在的頁面傳送一條命令_index.evalJS("util.toggleNview(3)");這個傳的 3 是相對應的第幾個選項按鈕這個函式在util.js裡是改變選項按鈕狀態的
_index.evalJS("util.toggleNview(3)");
}
}
});
_self.drag({
direction: "right",
moveMode: "followFinger"
}, {
view: _prev,
moveMode: 'follow'
}, function(e) {
if(e.type == "start") {
nowLeft = _self.getStyle().left;
}
if(e.type == "end") {
endLeft = _self.getStyle().left;
if(nowLeft != endLeft) {
_index.evalJS("util.toggleNview(1)");
}
}
});
})至此拖動頁面切換選項卡介面就實現了，有問題歡迎留言
相關推薦
用mui寫的原生tab以及選項卡頁面的拖動效果
廢話少說上程式碼！ 1、首先我們建立原生的tab選項，目前這個很容易實現，在hbuilder中新建專案選中移動app模板選擇 tab的配置項很簡單官網有教程http://ask.dcloud.net.cn/article/12602 注意配置tags
tab切換選項卡 （原生/jQ/vue） 實現方式
<!DOCTYPE > <html> <meta http-equiv="Content-Type" content="text/html; charset=utf
JavaScript原生程式碼編寫選項卡Tab頁跳轉功能
本文主要介紹使用 JavaScript 原生程式碼編寫選項卡Tab頁的跳轉功能。 一、先來看看效果圖 二、準備文字素材 文字素材選擇詩經裡面的三首古詩，分別是關雎、蒹葭和采薇 《關雎》 關關雎鳩， 在河之洲
原生js實現選項卡
index 定義 mar 事件綁定 click right get elements ext html代碼： <div class="tab"> <ul> <li class="selected">圖片</li&
小程序之 tab切換(選項卡)
swipe -i per func col cti XML align 簡單 好久沒有寫東西了 今天寫一個簡單的東西 小程序tab切換 （選項卡功能） .wxml <view class="swiper-tab"> <view class="
Android開發 漂亮底部Tab 標籤 選項卡製作教程
開發環境搭建 http://blog.csdn.net/juyangjia/article/details/9471561 HelloWorld http://blog.csdn.net/juyangjia/article/details/9
原生JS實現選項卡效果
var oBox = document.getElementById('box'); var aBtn = oBox.getElementsByTagName('button'); var aDiv = oBox.getElementsByTagName('d
HTML+Css寫一個簡單的選項卡
下面是程式碼實現之後的效果： 程式碼如下： <!DOCTYPE html> <html> <head> <title>選項卡製作</title> <style type="text/css">
原生JS實現選項卡效果例項
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;
微信小程序：選項卡頁面切換
程序 tex oat info === 分享 ndt item dataset 一、功能描述 在同一個頁面內實現不同展示頁面的切換功能，如下圖所示 二、代碼實現 1. index.js Page({ /** * 頁面的初始數據 */ data:
選項卡切換後 重新整理頁面停留在當前選項卡頁面
– HTML <div class="scroll_title" id="myTab1"> <span class="ord" id="mytab_01" onclick="nTabs('mytab_01');location.href='#mytab_01'"
微信小程式選項卡頁面切換
選項卡效果切換如下：滑動即可對應切換 wxml程式碼 <view class='TabSwiper'> <view class='tab {{currentData
FragmentTabHost+Fragment實現選項卡頁面
選項卡介面相信大家在很多APP裡面都有看到，主要有三種實現方式： 1、Tabhost+Activity 2、RadioButton+Fragment 3、FragmentTabHost+Fragment 第一種方式是最早的，基本上已經被Google棄用、第二種方式實現相對來
ubuntu滑鼠卡在拖動模式無法操縱
ubuntu滑鼠卡在拖動模式無法操縱 這是我在使用Ubuntu時碰到的問題，具體症狀是，Ubuntu開機使用時間很長後（大約一到兩個小時），滑鼠會毫無徵兆的，卡入拖動模式，無法點選，可以移動，顯示是一直在拖動什麼東西，但實際沒有。只能重啟。 後來找到的解決辦法是，進入Tweaks->
laya用panel實現拖動效果（拉地圖效果）
layabox最常見的拖動效果是用list實現的，但是也可以用panel實現，並且，panel元件的功能之一就是用來實現拖動的，不存在說panel比list實現拖動更好。 用panel實現拖動時，需要給panel新增子容器，例如box，然後再往子容器box中新增想要滑動的內容，在box尺寸內
c# 實現用滑鼠拖動沒有標題欄的視窗(窗體的任何部分都可實現拖動效果)
上面形式的窗體，實現窗體的任何部分都可實現拖動 首先需要引入非託管程式碼，直接呼叫windows api public const int WM_NCLBUTTONDOWN = 0xA1; public const int HT_CAPT
用OnMouseMove（）訊息可以實現滑鼠的拖動功能
afx_msg void OnMouseMove( UINT nFlags point ); 當滑鼠移動時呼叫此函式 。 引數： nFlags 指示各種虛擬按鍵是否按下 ，此引數可以是任何下列值的組合： MK_CONTROL 當CT
詳解MUI頂部選項卡(tab-top-webview-main)的用法
utf-8 nth ted bar tro chang pan 設置 asc 最近用MUI做手機app的時候，遇到了一點問題。然後就對這個tab-top-webview-main的源碼做了點研究，接下來我將和大家詳解一下 tab-top-webview-main的用法和
用angular中的ng-repeat和ng-show來實現tab選項卡
new angular lis content padding col ora ack 顯示 雖然我們可以用angular中的路由來做tab選項卡，但是那會讓我們建立很多的頁面來引入，或者建立 <script type="text/ng-template" id="n
原生JS畫的tab選項卡
記錄 bsp back height 原生js .class lis get function 記錄一下原生js寫的tab選項卡 鼠標滑入可以切換圖片 離開之後自動切換 <!DOCTYPE html> <html lang="en"> &l