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é)
- 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ù)組的特定元素
嚴(yán)格”的”===”短曾，它在求值時不會這么寬容碍论，不會進(jìn)行類型轉(zhuǎn)換谅猾。所以表達(dá)式strA === strB的值為false，雖然兩個變量持有的值相同。
使用”==”操作符時税娜，JavaScript會嘗試各種求值坐搔，以檢測兩者是否會在某種情況下相等。所以下面的表達(dá)式結(jié)果為true： strA == strB敬矩。
//彈出一個詢問框，有確定和取消按鈕
function firm() {
//利用對話框返回的值 （true 或者 false）
if (confirm("你確定提交嗎弧岳？")) {
alert("點擊了確定");
}
else {
alert("點擊了取消");
}
}
- date格式的設(shè)置
采用JS的date對象的方法date.toLocaleDateString()可以將date對象轉(zhuǎn)換成字符串的形式
- 頁面刷新
window.location.reload()
- 輸入框的禁用
disabled屬性凳忙，true時不能寫
一行字?jǐn)?shù)太多，不能完全顯示的禽炬，可以采用溢出的部分用...表示的方式
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- 導(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ī)
使用示例：在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
- 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;
}
});
}}
