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实现上拉加载更多。

具体使用方法参见文档

注意:pull-down使用时,在进入界面时直接触发继续加载的事件,在滚动的外面需要加一个div并指定其高度,里面的内容超过这个高度才会滚动。




在script里需要引入这个组件,而且需要在mounted钩子里加入

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

对应的继续加载的函数如下

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 // 当所有数据 全部读取完成的时候 停止下拉读取数据
}
this.items = this.items.concat(response.data.results)
}.bind(this))
.catch(function (error) {
console.log(error)
})
this.$refs.loadmore.onBottomLoaded()
}

在下拉到一定位置之后进入到下级页面,需要纪录用户的位置,在router的定义的文件里,加入

mode: 'history',

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

同时,需要纪录用户当前加载到那个页面,目前的解决方案是在beforeRouterLeave中存储当前页数,在返回到这个页面的时候,从localStorage中读取一下页数,加载出来

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

2、一些细枝末节

  1. js的数组遍历

Arr.forEach(function(obj){
console.log(obj)
})2) JavaScript中有 6 个值为“假”: false, null, undefined, 0, ''(空字符串), NaN. 其中 NaN 是 JavaScript 中唯一不等于自身的值, 即 NaN == NaN 为 false.3) JavaScript splice() 方法,删除数组的特定元素

  1. ===是精确等于,==是各种类型的都可以判断等于

严格”的”===”,它在求值时不会这么宽容,不会进行类型转换。所以表达式strA === strB的值为false,虽然两个变量持有的值相同。
使用”==”操作符时,JavaScript会尝试各种求值,以检测两者是否会在某种情况下相等。所以下面的表达式结果为true: strA == strB。

5) js弹出选择框、提示框等

//弹出一个询问框,有确定和取消按钮
function firm() {
//利用对话框返回的值 (true 或者 false)
if (confirm("你确定提交吗?")) {
alert("点击了确定");
}
else {
alert("点击了取消");
}
}

  1. date格式的设置

采用JS的date对象的方法date.toLocaleDateString()可以将date对象转换成字符串的形式

  1. 页面刷新

window.location.reload()

  1. 输入框的禁用

disabled属性,true时不能写

  1. 文本溢出的处理

一行字数太多,不能完全显示的,可以采用溢出的部分用...表示的方式

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

-webkit-box-orient: vertical;

  1. 导航栏(抽屉),右滑弹出,左滑消失,滚动禁用(就是导航栏未出现时页面可以滚动,导航栏出现后导航栏这一层的下面就不能滚动(但导航栏里的内容能滚动)

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

import touch from 'vue-directive-touch'

Vue.use(touch)

之后使用的时候,如下实现左滑右滑的事件控制,

web端禁止鼠标滚轮,可以采用

onmousewheel="return false;"

移动端,禁止用户滑动屏幕,touch事件,touchstar,touchmove,touchend

ontouchmove="return false;"

同时,可以采用移动端的fixed布局,实现固定的标签等布局

之后,在移动端出现,首页滑动到底部时,抽屉自动弹出,以及移动端滚动穿透问题

解决方案,首先在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里添加监听

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

}

问题得以解决

3、使用webview将vue开发的app安装到手机

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,配置环境变量

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同级加上

在layout的activity_main文件里加上

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); //不设置的话不能load页面
webview.loadUrl("http://www.baidu.com/");
webview.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
}}

你可能感兴趣的:(2018-07-25)