乾貨分享：vue2.0作移動端開發用到的相關插件和經驗總結(更新)
最近在用vue2.0作微信公衆號相關的前端開發，通過此次開發實踐，現將項目中用到的相關比較實用的插件及遇到的相關問題進行整理，但願和你們共同交流......
- cssrem：一個CSS值轉REM的VSCode插件；
- lib-flexible：移動端彈性佈局適配解決方案；
- vue-touch：移動端相關點擊，滑動，拖動，多點觸控等事件封裝；
- vee-validate：適用於vue項目中表單驗證插件；
- better-scroll ：多是目前最好用的移動端滾動插件;
- fastclick：解決移動端click 300ms延遲
- vConsole：手機前端開發調試利器
- webpack之proxyTable設置跨域
- vue組件之間通訊（父向子通訊，子向父通訊，非父子通訊）方法示例；
- ref特性的使用；
- vue中setTimeout,setInterval的使用;
- 監聽鼠標滾動事件,實現頭部懸浮效果(this.$nextTick);
- new FormData()上傳圖像；
- vue,@click="event()"，添加()與不添加()的區別；
-
H5，設置textarea高度隨文字輸入增高；
-
vue,監聽滾動條滾動到最底部，加載下一頁數據；
cssrem
介紹：一個CSS值轉REM的VSCode插件。咱們在作移動端開發時，爲了網頁適配，通常會將像素單位px轉換爲rem.在用vscode開發時，咱們能夠安裝cssrem這個插件。
插件效果以下：
默認配置：
「cssrem.rootFontSize」： root font-size (unit: px), 默認爲: 16；
「cssrem.fixedDigits」： px轉rem小數點最大長度，默認：6；
「cssrem.autoRemovePrefixZero」：自動移除0開頭的前綴，默認：true；複製代碼
項目中配置：
css
"cssrem.fixedDigits": 2,//px轉化爲rem保留2位小數
"cssrem.rootFontSize":75//px轉化爲rem基準複製代碼
"cssrem.rootFontSize"：75， //px轉化爲rem基準75px
因爲我在項目中使用了淘寶彈性佈局方案lib-flexible,UI同事是按照iphone6尺寸（750px）進行設計的。項目在iphone6屏幕時，root,html的font-size:75px,因此項目中配置rem基準爲75px;
"cssrem.fixedDigits:2", // 即設置px轉rem最大小數點爲2位數；
使用方法：
這裏是vsCode的配置方法：
文件-->首選項--設置-->「搜索cssrem」,將本身的設置放入右邊覆蓋「默認設置」，重啓編輯器便可；如圖：
lib-flexible
- lib-flexible介紹：
lib-flexible爲移動端彈性佈局適配解決方案。不少的大公司，如網易，淘寶等，都在用它做爲移動端佈局。html
- 使用方法：
安裝lib-flexible：
npm install lib-flexible --save複製代碼
在項目入口文件main.js 中引入lib-flexible
import 'lib-flexible'複製代碼
去掉目標文件的index.html頭裏的meta標籤。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //不要寫上邊這行meta，flexible會爲根據屏幕自動給我加上，若是你本身加了， 那麼flexible會根據你加的值來計算，也就會出現固定的值，安卓和蘋果都會同樣了。data-dpr有多是固定的了
知識延伸：
在作像素單位適配的時，你也能夠不用安裝cssrem，直接用px，咱們能夠經過安裝插件：px2rem-loader並進行相應的配置，經過編譯以後，自動將px轉換爲rem；
使用方法，可
參考官網；可是其有必定的侷限性，即只能將.vue文件style標籤中的px轉成rem，對外部引入css，px2rem能不能轉換rem問題；
對於引入了第三方框架，他們的樣式是另外一套寫法，樣式會被flexible轉換，就會破壞框架的樣式。
若是在.vue文件style中的某一行代碼不但願被轉成rem，只要在後面寫上註釋 /* no*/就能夠了。
vue-touch
- vue-touch介紹：
vue-touch其實封裝了 hammer.js的方法，針對觸屏的6大事件進行監聽。官網。前端
- 使用方法：
安裝vue-touch:
npm install vue-touch@next複製代碼
嵌入vue-touch:
在vue入口文件main.js中將其註冊爲全局組件：
var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})複製代碼
使用實例：
//左劃 默認渲染爲div data爲參數
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//點擊 渲染爲一個a標籤
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//點擊 渲染爲p標籤
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>經常使用的事件有：swiper(滑動事件)、tap(短期內的點擊事件)、press(事件大於tap的按壓事件)複製代碼
- api及相關的事件：
事件說明：
一、pan,觸屏中的拖動事件，在指定的dom區域內，一個手指放下並移動事件
事件類型有：pan, panstart, panmove, panend, pancancel,
panleft, panright, panup, pandown;
使用方法爲：v-on:panstart="callback";
panleft, panright, panup, pandown;
使用方法爲：v-on:panstart="callback";
二、Swipe：滑動事件，在指定的dom區域內，一個手指快速的在觸屏上滑動。
事件類型有：swipe, swipeleft, swiperight,
swipeup, swipedown
使用方法爲：v-on:swipeleft="callback";
三、Tap:在指定的dom區域內，一個手指輕拍或點擊時觸發該事件(相似PC端的click)。該事件最大點擊時間爲250毫秒，若是超過250毫秒則按Press事件進行處理。
事件類型：tap
使用方法：v-on:tap="callback"
四、Press:在指定的dom區域內觸屏版本的點擊事件，這個事件至關於PC端的Click事件，該不能包含任何的移動，最小按壓時間爲500毫秒，經常使用於咱們在手機上用的「複製、粘貼」等功能。該事件分別對如下事件進行監聽並處理：
事件類型：press, pressup
使用方法：v-on:press = "callback"
五、Rotate事件：在指定的dom區域內，當兩個手指或更多手指成圓型旋轉時觸發（就像兩個手指擰螺絲同樣）。該事件分別對如下事件進行監聽並處理
事件類型：rotate, rotatestart, rotatemove,
rotateend, rotatecancel,
使用方法：v-on:rotate = "callback"
六、Pinch：在指定的dom區域內，兩個手指（默認爲兩個手指，多指觸控須要單獨設置）或多個手指相對（愈來愈近）移動或相向（愈來愈遠）移動時事件。該事件事以分別對如下事件進行監聽並處理：
Pinchstart：多點觸控開始、Pinchmove：多點觸控過程、Pinchend：多點觸控結束、Pinchcancel：多點觸控取消、Pinchin：多點觸控時兩手指距離愈來愈近、Pinchout：多點觸控時兩手指距離愈來愈遠
注意事項:
一、注意:vue-touch 使用的是2.0.0版本 須要與vue2.0.0兼容；
應用實例：
經過手勢滑動，進行頁面的切換，如：
swiperleft: function () {
this.$router.push({'path':'/queuehistory'});
}複製代碼
vee-validate
- vee-validate介紹：
vee-validate爲適用於vue項目中表單驗證插件.引入vee-validate,會更加方便咱們進行表單驗證。 官方網址.vue
- 安裝vee-validate
npm install vee-validate@next --save
複製代碼
注意：@next,否則是Vue1.0版本
安裝時要注意安裝的版本，不一樣的版本使用的方式不同。
若是在安裝完成後，且在mian.js中進行了正確的引用，若是在控制檯，出現以下報錯信息：
IMPORTED_MODULE_5_vee_validate__.a.addLocale is not a func
則說明，你安裝的版本太高，請從新卸載，安裝較低版本便可；個人項目中安裝的版本爲：2.0.0-rc.25。
- main.js裏引用vee-validate插件
import Vue from 'vue'
import VeeValidate,{ Validator } from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN' //引入中文包，提示信息能夠以中文形式顯示
Validator.addLocale(CN) // 設置提示信息中文方式顯示
Vue.use(VeeValidate, { locale: 'zh_CN'})
複製代碼
- 擴展自定義驗證規則
Validator.extend('phone',
{ messages：{
zh_CN: field => '請輸入正確手機號'
},
validate: value => {
return /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(value)
}
});
Validator.extend('isCard', {
messages: {
zh_CN: field => '請輸入正確身份證號'
},
validate: value => {
return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
}
})複製代碼
- 自帶規則的中文設置
const dictionary = {
zh_CN: {
messages: {
required: (val) => {
let msg = ''
switch (val) {
case 'ownerPhone':
msg = '手機號'
break
}
msg = msg + '不能爲空哦'
return msg
},
numeric: (val) => {
let msg = ''
switch (val) {
case 'houseShi':
msg = '居室'
break
}
msg = msg + '只能爲數字'
return msg
}
}
}}
Validator.updateDictionary(dictionary)複製代碼
- 組件中使用
插件自帶規則和自定義規則，寫法：v-validate="'required|ownerPhone'"，設置name屬性，經過v-show="errors.has()"來進行name屬性的監聽，顯示和隱藏相關的提示信息；
<form class="form" autocomplete="off" @submit.prevent="validateBeforeSubmit">
<div class="form-item">
<input type="number" placeholder="請輸入你的手機號" v-model="params.ownerPhone" v-validate="'required|ownerPhone'" name="ownerPhone">
<span v-show="errors.has('ownerPhone')" class="help is-danger">
{{ errors.first('ownerPhone') }}
</span>
</div>
<button class="form-btn bg-blue" type="submit">登陸</button>
</form>複製代碼
更詳細的語法學習，請參見
vee-validate官網；
better-scroll
- better-scroll介紹：
better-scroll，
官方網址，better-scroll 是一款重點解決移動端（現已支持 PC 端）各類滾動場景需求的插件。它的核心是借鑑的
iscroll 的實現，它的 API 設計基本兼容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及作了一些性能優化。
better-scroll 是基於原生 JS 實現的，不依賴任何框架。它編譯後的代碼大小是 63kb，壓縮後是 35kb，gzip 後僅有 9kb，是一款很是輕量的 JS lib。
- 使用方法
安裝方法java
npm install --save better-scroll;
複製代碼
起步
better-scroll 最多見的應用場景是列表滾動，咱們來看一下它的 html 結構：
<div class="wrapper">
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
<!-- 這裏能夠放一些其它的 DOM，但不會影響滾動 -->
</div>複製代碼
上面的代碼中 better-scroll 是做用在外層 wrapper 容器上的，滾動的部分是 content 元素。這裏要注意的是，better-scroll 只處理容器（wrapper）的第一個子元素（content）的滾動，其它的元素都會被忽略。
最簡單的初始化代碼以下：
import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)複製代碼
結合接口下拉刷新加載更多數據
export default {
methods:{
async getMyBillList() {
const res = await getMyBillList(reqData);
if (res.status.code == "200") {
this._houseScroll(); // 結合接口初始化scroll數據
}else{
console.log("接口調用失敗~");
}
},
_houseScroll(){
this.$nextTick(() => {
if (!this.houseScroll) {
let wrapper = document.querySelector('.wrapper'); // scroll容器
// new Bscroll(),初始化容器；
this.houseScroll = new Bscroll(wrapper,{
scrollY: true,
probeType: 3,
click: true,
pullUpLoad: {
threshold: -100 // 在上拉到超過底部 20px 時，觸發 pullingUp 事件
}
}
);
// 初始化上拉刷新加載更多方法
this.houseScroll.on("pullingUp", () => {
this.pageNo++;
if (this.totalPage >= this.pageNo) {
this.pageNo++; // 經過pageNo增長，加載第二頁的數據
this.getMyBillList();
this.loading = true;
} else {
this.loading = false;
this.loadingOver = true;
}
});
} else {
this.houseScroll.finishPullUp();
this.houseScroll.refresh();
}
});
}
}
}
複製代碼
fastclick插件：解決移動端click 300ms延遲
移動端項目中，在某些機型某些瀏覽器下，存在click事件300ms延遲的問題，影響用戶滿意度。緣由是：從點擊屏幕上的元素到觸發元素的 click 事件，移動瀏覽器會有大約 300 毫秒的等待時間，由於它想看看你是否是要進行雙擊（double tap）操做。webpack
vue項目中，能夠經過引入fastclick第三方依賴包來解決。
ios
安裝方法：git
npm install --save fastclick
複製代碼
使用方法：es6
在main.js中
github
import fastclick from 'fastclick'
fastclick.attach(document.body)
複製代碼
也能夠直接下載fastclick.js，在相應頁面直接引用。
手機前端開發調試利器 – vConsole
vConsole介紹：一個輕量、可拓展、針對手機網頁的前端開發者調試面板。
移動端項目，因爲在移動端沒法打開控制檯，因此沒法像pc端chrome控制檯那樣直觀查看console信息；不過咱們可使用vConsole插件進行調試。
使用方法以下：
安裝vConsole:
npm install vconsole --save-dev
複製代碼
在main.js中引用並實例化：
import VConsole from 'vconsole';const vConsole = new VConsole(); // 不使用的時候，能夠將這句屏蔽掉；複製代碼
此時可使用console.log
原理：改寫了console.log,重寫了實現，用vConsole代理
結果就會出現如圖 浮動的按鈕，點開以後，就能夠看到裏面的console信息了；
webpack之proxyTable設置跨域
在平時項目的開發環境中，常常會遇到跨域的問題，尤爲是使用vue-cli這種腳手架工具開發時，因爲項目自己啓動本地服務是須要佔用一個端口的，因此必然會產生跨域的問題。在使用webpack作構建工具的項目中,使用proxyTable代理實現跨域是一種比較方便的選擇。
proxyTable相關配置及使用說明：
當咱們用vue-cli構建項目時，須要在config/index.js文件中，找到dev對象下proxyTable對象進行跨域設置，配置以下：
dev: {
env: require('./dev.env'),
port: 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
cssSourceMap: false,
proxyTable: {
'/api': {
target: 'http://www.abc.com', //目標接口域名
changeOrigin: true, //是否跨域
secure: false, // 容許https請求 pathRewrite: {
'^/api': '/api' //重寫接口
}
}
}複製代碼
proxyTable配置的意思爲：使用字符串"/api"來代替目標接口域名；若是接口地址爲"user/getUserInfo",咱們能夠在全部的接口地址前面加上"/api/"用於設置代理；如:
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'複製代碼
若是你不想每次請求地址中都帶有"/api/",則能夠設置
pathRewrite: {
'^/api': '' // 後面可使重寫的新路徑，通常不作更改
}複製代碼
表現結果爲：
'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'複製代碼
另一種狀況是，咱們不須要在每一個接口地址前添加"/api/",只須要用接口自己的地址，不須要從新路徑便可。若是接口爲："/v2/cotton/get_app_list",使用"/v2"作代理；以下：
dev: {
proxyTable: {
'/v2': {
target: 'http://www.abc.com', //目標接口域名
changeOrigin: true, //是否跨域
secure: false, // 容許https請求
// 這裏去掉了從新設置新路徑，由於接口地址自己就是以"/v2/"開頭的；
}
}複製代碼
'http://localhost:8080/v2/cotton/get_app_list' ===> 'http://www.abc.com/v2/cotton/get_app_list'
// http://localhost:8080/v2表示http://www.abc.com複製代碼
默認狀況下，不接受運行在 HTTPS 上，且使用了無效證書的後端服務器。若是你想要接受，修改配置以下：
proxy: {
"/api": {
target: "https://www.abc.com",
secure: false
}
}
複製代碼
vue組件之間通訊
- 父向子傳遞數據經過props
/**父組件代碼：**/
<template>
<header-box :title="text"></header-box>
</template>
<script>
import HeaderBox from './header'
export default {
name: 'index',
components: {
HeaderBox
},
data () {
return {
text: '首頁'
}
}
}
</script>
複製代碼
/**子組件代碼**/
<template>
<header>
{{thisTitleTxt}}
</header>
</template>
<script>
export default {
name: 'headerbox',
props: {
text: String
},
data () {
return {
thisTitleTxt: this.text
}
}
}
</script>複製代碼
- 子向父傳遞數據
子組件向父組件傳遞分爲兩種類型。
一、子組件改變父組件傳遞的props（你會發現經過props中的Object類型參數傳輸數據，能夠經過子組件改變數據內容。這種方式是可行的，可是不推薦使用，由於官方定義prop是單向綁定）；
二、經過$on和$emit；即子組件中經過$emit()來觸發事件；父組件中經過依附在組價元素上的：on方法來響應事件。
*經過$on,$emit*
**父組件代碼**
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<!--父組件中經過v-on:key="function"來觸發方法的執行-->
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
import ButtonCounter from './buttonCounter'
export default {
name: 'index',
components: {
'button-conuter': ButtonCounter
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal () {
this.total++
}
}
}
</script>複製代碼
**子組件代碼**
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
this.$emit('increment');// 子組件中經過this.$emit('key',value)觸發事件信號
this.counter++
}
}
}
</script>複製代碼
- 非父子組件傳遞數據；
經過使用一個空的Vue實例做爲中央事件總線。
**main.js**
let bus = new Vue()
Vue.prototype.bus = bus;複製代碼
相鄰組件1,經過$emit()傳遞數據
this.bus.$emit("toChangeTitle","首頁");
複製代碼
相鄰組件2，經過$on()接收數據
mounted(){
this.bus.$on('toChangeTitle', function (title) {
console.log(title)
})
}複製代碼
ref特性的使用
ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。
若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例：
<div id="app">
<input type="text" ref="input1" v-model="name"/>
<button @click="add">添加</button>
<!-- `vm.$refs.child` will be the child component instance -->
<child-component ref="child"></child-component>
</div>
<script>
export default{
data(){
return {
name:"xiaoming"
}
},
created(){
this.$nextTick(()=>{
console.log(this.$refs.input1.value);
});
},
methods:{
add(){
this.$refs.input1.value = "22"; //this.$refs.input1 減小獲取dom節點的消耗
}
}
}
</script>複製代碼
當 v-for 用於元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組。
關於 ref 註冊時間的重要說明：由於 ref 自己是做爲渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，所以你不該該試圖用它在模板中作數據綁定。
經過在引用的子組件上使用ref屬性實現父組件調用子組件的方法及屬性
在父組件中引用子組件並定義ref
<v-food ref="selectfood"></v-food>
調用定義在子組件中的方法show
this.$refs.selectfood.show();//同時也能夠調用子組件中的屬性
vue中setTimeout的使用
在vue中使用setTimeout或者setInterval，若是按照在原來js的中方法，如
setTimeout(function(){
this.isFlag = true;
},3000);
複製代碼
會發現data中定義的變量isFlag是獲取不到的；解決方法以下：
- 用setTimeout經過es6語法，setInterval也是同樣
import { setTimeout } from "timers";
<script>
export default{
data(){
return {
time:"",
isFlag:false
}
},
methods:{
add(){
clearTimeout(this.time);
this.time = setTimeout(() =>{
this.isFlag = true;
},2000)
}
}
}
</script>複製代碼
- 定義外部self來代替全局this
methods:{
add(){
let self = this;
clearTimeout(this.time);
this.time = setTimeout(function(){
self.isFlag = true;
},2000)
}
}
複製代碼
咱們會發現利用例子的第一種方法，使用this來獲取變量，會報錯。這就是老生常談的javaScript 的this 的問題。
由於用的一個function（）{} 這裏的 獨立的做用域 this指向了全局（這裏是window）並且window裏沒有myFunc這個函數，所報了錯。
使用es6的->寫法，this繼承外部對象，this指向爲vue實例，即（new Vue）；
監聽鼠標滾動事件,實現頭部懸浮效果
$nextTick 是在下次 DOM 更新循環結束以後執行延遲迴調，鼠標滾動事件須要經過window.addEventListener("scroll",'')進行監聽。
<script>
mounted(){
// 監聽滾動事件
this.$nextTick(function () {
window.addEventListener('scroll', this.needToTop); //滾動事件監聽
});
},
methods:{
needToTop(){
let curHeight = document.documentElement.scrollTop || document.body.scrollTop; // 滾動條距離頂部的距離
let bgareaHeight = this.$refs["bgarea"].offsetHeight; // 背景總高度
let opacity = curHeight/bgareaHeight;
this.$refs["title"].style.background = "rgba(255, 255, 255, "+opacity+")";
this.$refs["title"].style.boxShadow = "0 0 .27rem rgba(204, 204, 204, "+opacity+")";
}
}
</script>
複製代碼
vue上傳圖像
經過new FormData()，建立form對象，經過append向form對象添加數據。
html代碼以下：
<div class="txarea">
<input type="file" class="txfile" name="file" id="upimg" accept="image/*" @change="fileChange($event)">
<p class="tx" @click="chooseType">點擊上傳頭像</p>
</div>
<script>
export default{
methods:{
// 獲取用戶圖像
chooseType() {
document.getElementById('upimg').click();
},
fileChange(e) {
let file = e.target.files[0];
let param = new FormData(); //建立form對象
param.append('file',file,file.name);//經過append向form對象添加數據
let config = {
headers:{'Content-Type':'multipart/form-data'} //添加請求頭
};
this.axios.post(uploadUrl,param,config)
.then(response=>{
// 已經獲取到圖片地址，再調接口，保存到數據庫便可；
let reqData = {
phone: this.loginInfo.phone,
pic:response.data.url // 大圖地址
}
this.setUserInfo(reqData);
})
},
setUserInfo(){ // 保存用戶圖像
...
}
}
}
</script>
複製代碼
vue,@click="event()"，添加()與不添加()的區別
應該是 Vue 對函數調用表達式額外用了一個函數作了層包裝。
加與不加括號的區別在於事件對象參數 event 的處理。
不加括號時，函數第一個參數默認爲 event；加了括號後，須要手動傳入 $event 才能得到事件對象。
<template>
<div class="btn-item">
<button class="btn btn-success" @click="sure($event)">肯定</button>
<button class="btn btn-default" @click="quit">取消</button>
</div>
</template>
<script>
export default{
name:'test',
data(){
return {
}
},
methods:{
sure(e){
console.log(e.target);
},
quit(e){
console.log(e.target);
}
}
}
</script>複製代碼
H5，設置textarea高度隨文字輸入增高；
在發表文字相關的業務需求中，當咱們給textarea設置了固定高度，多餘的內容就會被隱藏在裏面，體驗感不是很好；以下圖，進行相關的設置，能夠實現textarea高度自增；
<template>
<textarea class="textArea" ref="textArea" placeholder="輸入正文" v-model="postList.content" @input="setPostContent"></textarea></template>
mounted(){
this.$nextTick(() => {
let textarea = document.querySelector('.textArea');
this.makeExpandingArea(textarea);
});
},
methods:{
setPostContent(){ // 設置正文內容
this.$refs.textArea.style.color = '#666666';
},
makeExpandingArea(el) {
var setStyle = function(el) {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
}
var delayedResize = function(el) {
window.setTimeout(function() {
setStyle(el)
}, 0);
}
if (el.addEventListener) {
el.addEventListener('input',function() {
setStyle(el)},false);
setStyle(el)
} else if (el.attachEvent) {
el.attachEvent('onpropertychange',function() { setStyle(el)
});
setStyle(el)
}
if (window.VBArray && window.addEventListener) { //IE9
el.attachEvent("onkeydown",function() {
var key = window.event.keyCode;
if (key == 8 || key == 46) delayedResize(el); });
el.attachEvent("oncut",function() {
delayedResize(el);
}); //處理粘貼
}
}
複製代碼
vue,監聽滾動條滾動到最底部，加載下一頁數據；
我遇到的一個需求是帖子在下拉到底部時，實現加載第二頁數據；開始用的better-scroll插件，可是這個插件會自動給頁面增長一個滑動層，致使帖子內容沒法複製；因此，就能夠用判斷滾動條距離底部的距離的方法，實現數據加載。postDetail爲帖子內容區域；_getPostCommentList()爲加載數據的接口方法；代碼以下：
mounted() { this.$nextTick(() => { document.getElementById("postDetail").onscroll = this.scrollBottom; }); }, methods:{ scrollBottom() { // 獲取 滾動高度 滾動距離 當前屏幕高度 let scrollHeight = document.getElementById("postDetail").scrollHeight, scrollTop = document.getElementById("postDetail").scrollTop, clientHeight = this.getClientHeight(); // 獲取離底部的距離 let bottomHeight = scrollHeight - scrollTop - clientHeight; // 傳送滾動到sendComments 組件 this.bottomHeight = scrollTop; // 若是距離底部小於5 請求數據 if (bottomHeight < 5) { this.pageNo++; if (this.totalPage >= this.pageNo) { // 說明還有更多的數據 this.loadings = true; this._getPostCommentList(); // 分頁獲取評論數據;回覆完評論，滾動條會自動到最底部，因此會加載第二頁的數據； } else { this.loadings = false; this.loadingOver = true; } } }} 複製代碼
項目實踐：基於vue2.0 +vuex+ element-ui後臺管理系統
後面會更新第二篇文章：
第二篇文章以下：乾貨分享：vue2.0作移動端開發用到的相關插件和經驗總結(2)
- VUX - Vue 移動端 UI 組件庫的使用；
- vue-lazyload ：一個簡單易用的 Vue 圖片延遲加載插件；
- vuex：vue狀態管理工具詳細入門；
- async/await：異步神器來封裝接口請求文件fetch.js；
- vue 項目中的迭代判斷技巧；
- vue 項目中經常使用的圖片引入方式；
- 微信api在vue項目中的使用：
- vue2實現微信分享坑點和經驗 ；
- vue2實現微信支付坑點和經驗；
-
百度地圖api在vue項目中的使用:
-
vue2.0項目中如何使用百度地圖api
-
vue2如何給地圖添加房源覆蓋物；
-
如何給地圖添加自定義定位控件並更換控件的圖標；
-
如何給地圖添加自定義當前位置定位標註
-
幾個經常使用的api(地圖縮放，拖拽，獲取當前位置)等功能的實現；
-
歡迎加入討論組，一塊兒來學習用vue,vuex,element,express,mongodb來構建後臺管理系統；
一塊兒來用項目實戰加深本身對知識的理解。
相關文章
- 1. 乾貨分享：vue2.0作移動端開發用到的相關插件和經驗總結
- 2. 乾貨分享：vue2.0作移動端開發用到的相關插件和經驗總結(2)
- 3. vue2.0作移動端開發用到的相關插件和經驗總結(2)
- 4. vue2.0作移動端開發用到的相關插件和經驗總結
- 5. vue2.0移動端開發的相關插件以及經驗總結
- 6. 移動端開發乾貨
- 7. Vue.js開發移動端經驗總結
- 8. web移動端開發經驗總結
- 9. 乾貨分享：小程序項目實踐和經驗總結
- 10. 移動端跨平臺開發乾貨分享
- 更多相關文章...
- • ionic 切換開關操作 - ionic 教程
- • 二級緩存的併發訪問策略和常用插件 - Hibernate教程
- • NewSQL-TiDB相關
- • PHP開發工具
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
歡迎關注本站公眾號,獲取更多信息
