2018-07-25

1、使用移動組件庫mint-ui

Mint UI是基于Vue.js的移動組件庫,有很多可以使用,參考這里

使用時首先install悲靴,npm i mint-ui --save

之后需要先引入組件,在main.js中

import MintUI from 'mint-ui';
import 'mint-ui/lib/style.css';

Vue.use(MintUI);

使用了date time picker莫其,用來選擇日期癞尚,Indicator用來顯示正在加載,Toast用來彈出提示信息乱陡,loadmore的pull-down實現(xiàn)上拉加載更多浇揩。

具體使用方法參見文檔

注意:pull-down使用時,在進(jìn)入界面時直接觸發(fā)繼續(xù)加載的事件蛋褥,在滾動的外面需要加一個div并指定其高度临燃,里面的內(nèi)容超過這個高度才會滾動。

<div ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :auto-fill='false'>
</mt-loadmore>
</div>

在script里需要引入這個組件烙心,而且需要在mounted鉤子里加入

import { Loadmore } from 'mint-ui'mounted: function () {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top
},

對應(yīng)的繼續(xù)加載的函數(shù)如下

loadBottom: function () {
this.currPage ++
HTTP.get('你的url' + '?page=' + this.currPage + '&size=' + this.pageSize)
.then(function (response) {
if (response.data.results.length === 0) {
this.allLoaded = true // 當(dāng)所有數(shù)據(jù) 全部讀取完成的時候 停止下拉讀取數(shù)據(jù)
}
this.items = this.items.concat(response.data.results)
}.bind(this))
.catch(function (error) {
console.log(error)
})
this.$refs.loadmore.onBottomLoaded()
}

在下拉到一定位置之后進(jìn)入到下級頁面膜廊,需要紀(jì)錄用戶的位置,在router的定義的文件里淫茵,加入

mode: 'history',

scrollBehavior (to, from, savedPosition) {
if(savedPosition) {
setTimeout(() => {
window.scrollTo(savedPosition.x, savedPosition.y)
}, 200)
}
}

同時爪瓜,需要紀(jì)錄用戶當(dāng)前加載到那個頁面要出,目前的解決方案是在beforeRouterLeave中存儲當(dāng)前頁數(shù)朗兵,在返回到這個頁面的時候澈缺,從localStorage中讀取一下頁數(shù)验游,加載出來

beforeRouteLeave (to, from, next) {
this.$localStorage.set('backlogPage', this.currPage)
next()
}, HTTP.get('你的URL?page=1&size=' + size)

2、一些細(xì)枝末節(jié)

  1. js的數(shù)組遍歷

Arr.forEach(function(obj){
console.log(obj)
})2) JavaScript中有 6 個值為“假”: false, null, undefined, 0, ''(空字符串), NaN. 其中 NaN 是 JavaScript 中唯一不等于自身的值, 即 NaN == NaN 為 false.3) JavaScript splice() 方法瞒大,刪除數(shù)組的特定元素

  1. ===是精確等于缤至,==是各種類型的都可以判斷等于

嚴(yán)格”的”===”短曾,它在求值時不會這么寬容碍论,不會進(jìn)行類型轉(zhuǎn)換谅猾。所以表達(dá)式strA === strB的值為false,雖然兩個變量持有的值相同。
使用”==”操作符時税娜,JavaScript會嘗試各種求值坐搔,以檢測兩者是否會在某種情況下相等。所以下面的表達(dá)式結(jié)果為true: strA == strB敬矩。

5) js彈出選擇框概行、提示框等

//彈出一個詢問框,有確定和取消按鈕
function firm() {
//利用對話框返回的值 (true 或者 false)
if (confirm("你確定提交嗎弧岳?")) {
alert("點擊了確定");
}
else {
alert("點擊了取消");
}
}

  1. date格式的設(shè)置

采用JS的date對象的方法date.toLocaleDateString()可以將date對象轉(zhuǎn)換成字符串的形式

  1. 頁面刷新

window.location.reload()

  1. 輸入框的禁用

disabled屬性凳忙,true時不能寫

  1. 文本溢出的處理

一行字?jǐn)?shù)太多,不能完全顯示的禽炬,可以采用溢出的部分用...表示的方式

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

  1. 導(dǎo)航欄(抽屜)消略,右滑彈出,左滑消失瞎抛,滾動禁用(就是導(dǎo)航欄未出現(xiàn)時頁面可以滾動,導(dǎo)航欄出現(xiàn)后導(dǎo)航欄這一層的下面就不能滾動(但導(dǎo)航欄里的內(nèi)容能滾動)

使用vue-directive-touch插件却紧,首先install,在main.js中引入并use

import touch from 'vue-directive-touch'

Vue.use(touch)

之后使用的時候,如下實現(xiàn)左滑右滑的事件控制桐臊,

<div v-touch:left="menuDisappear" v-touch:right="showMenu"></div>

web端禁止鼠標(biāo)滾輪,可以采用

onmousewheel="return false;"

移動端晓殊,禁止用戶滑動屏幕断凶,touch事件,touchstar,touchmove,touchend

ontouchmove="return false;"

同時巫俺,可以采用移動端的fixed布局认烁,實現(xiàn)固定的標(biāo)簽等布局

之后,在移動端出現(xiàn)介汹,首頁滑動到底部時却嗡,抽屜自動彈出,以及移動端滾動穿透問題

解決方案嘹承,首先在css里添加

.modal-show {
position: fixed;
width: 100%;
}

之后窗价,添加方法

disable_scroll: function () {
this.scrollTop = document.getElementById('yourId').scrollTop
document.getElementById('yourId').classList.add('modal-show')
document.getElementById('yourId').style.top = -this.scrollTop + 'px'
},
enable_scroll: function () {
document.getElementById('yourId').classList.remove('modal-show')
document.getElementById('yourId').scrollTop = this.scrollTop

}

最后,在watch里添加監(jiān)聽

watch: {
isShow: function () {
if (this.isShow) {
this.disable_scroll()
} else {
this.enable_scroll()
}
}

}

問題得以解決

3叹卷、使用webview將vue開發(fā)的app安裝到手機(jī)

1) IOS的UIWebView使用方法

使用示例:在Xcode中新建Single View Application撼港,在ViewController.m中的viewDidLoad中加入

UIWebView * view = [[UIWebView alloc]initWithFrame:self.view.frame];

[view loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];

[self.view addSubview:view];

之后新建項目,報錯骤竹,

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.

解決方案是:

在info.plist 中輸入App Transport Security Settings ====>Allow Arbitrary Loads

  1. Android的WebView

首先帝牡,下載android studio,新建一個空的project,配置環(huán)境變量

open .bash_profile

export ANDROID_HOME=SDK地址

export PATH=ANDROID_HOME/platform-tools:ANDROID_HOME/tools:$PATH

報錯,null

java.lang.NullPointerException at com.jetbrains.cidr.lang.workspace.OCWorkspaceManager.getWorkspace(OCWorkspaceManager.java:12) at

解決方案:禁用插件NDK 即可

使用webview的方法

在manifest.xml中與application同級加上

<uses-permission android:name="android.permission.INTERNET"/>

在layout的activity_main文件里加上

<WebView
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

在項目的main activity里加上

import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
private WebView webview;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setUseWideViewPort(true);
webSettings.setLoadWithOverviewMode(true);
webSettings.setSupportZoom(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setDomStorageEnabled(true); //不設(shè)置的話不能load頁面
webview.loadUrl("http://www.baidu.com/");
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}}

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蒙揣,一起剝皮案震驚了整個濱河市靶溜,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鸣奔,老刑警劉巖墨技,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惩阶,死亡現(xiàn)場離奇詭異,居然都是意外死亡扣汪,警方通過查閱死者的電腦和手機(jī)断楷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來崭别,“玉大人冬筒,你說我怎么就攤上這事∶┲鳎” “怎么了舞痰?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵,是天一觀的道長诀姚。 經(jīng)常有香客問我响牛,道長,這世上最難降的妖魔是什么赫段? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任呀打,我火速辦了婚禮,結(jié)果婚禮上糯笙,老公的妹妹穿的比我還像新娘贬丛。我一直安慰自己,他們只是感情好给涕,可當(dāng)我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布豺憔。 她就那樣靜靜地躺著,像睡著了一般够庙。 火紅的嫁衣襯著肌膚如雪恭应。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天首启,我揣著相機(jī)與錄音暮屡,去河邊找鬼。 笑死毅桃,一個胖子當(dāng)著我的面吹牛褒纲,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钥飞,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼莺掠,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了读宙?” 一聲冷哼從身側(cè)響起彻秆,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后唇兑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酒朵,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年扎附,在試婚紗的時候發(fā)現(xiàn)自己被綠了蔫耽。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡留夜,死狀恐怖匙铡,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情碍粥,我是刑警寧澤鳖眼,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站嚼摩,受9級特大地震影響钦讳,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枕面,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一蜂厅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧膊畴,春花似錦、人聲如沸病游。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽衬衬。三九已至买猖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滋尉,已是汗流浹背玉控。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留狮惜,地道東北人高诺。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像碾篡,于是被迫代替她去往敵國和親虱而。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,343評論 25 707
  • 一开泽、訪問元素的屬性 A.核心Dom B.HTML Dom C.自定義屬性: 案例 div屬性 去百度 自定義...
    wlki閱讀 231評論 0 0
  • 生活把我逼進(jìn)了角落牡拇, 我的背與角落兩片墻緊貼著, 幸慶角落有兩片墻,我雙手各貼一片墻惠呼, 雙手觸感細(xì)胞慢慢擴(kuò)散延伸导俘,...
  • 迎著英姿颯爽的秋風(fēng)滩租,由深圳地鐵集團(tuán)工會組織香梅站區(qū)和上梅林站區(qū)的2017團(tuán)隊拓展活動來到了東莞的觀音山赋秀,此行在于加...
    風(fēng)起南龥閱讀 490評論 0 2
  • 你有沒有過 一無所有的樣子 當(dāng)然猎莲,像昏迷不醒送進(jìn)ICU搶救幾天幾夜的那種,一絲不掛的技即,就蓋一床被子著洼。然后隨時掀起來...
    愛嬌閱讀 571評論 0 1