亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

記 vue 移動端開發(fā) 中的經(jīng)驗(2)

Flands / 2162人閱讀

摘要：官網(wǎng)還不斷的訪問不了。在此推薦一個移動端庫按需引入二次封裝組件列表的下拉刷新和上拉加載更多是移動端必須的組件。不用寫死高度了，并且兼容對外提供了更加簡明易用的刷新，回到頂部，獲得和設(shè)置滾動條位置的方法統(tǒng)一的提示，免去重復(fù)代碼。

按需引入mint-ui

本項目用了 mint-ui 作為基礎(chǔ)ui框架，在使用中遇到不少問題。官網(wǎng)doc 還不斷的訪問不了。不過還是很感謝 mint-ui 團隊。
在此推薦一個 vue移動端ui庫 vant

按需引入

* mint-ui
import "mint-ui/lib/style.css"
import {
  Navbar,
  TabItem,
  TabContainer,
  TabContainerItem,
  Radio, Actionsheet,
  Switch,
  Popup,
  Button,
  DatetimePicker,
  Toast,
  Picker,
  MessageBox,
  loadmore,
  Range,
  Progress,
  Indicator,
} from "mint-ui"

Vue.component(Navbar.name, Navbar)
Vue.component(TabItem.name, TabItem)
Vue.component(TabContainer.name, TabContainer)
Vue.component(TabContainerItem.name, TabContainerItem)
Vue.component(Radio.name, Radio)
Vue.component(Actionsheet.name, Actionsheet)
Vue.component(Popup.name, Popup)
Vue.component(Button.name, Button)
Vue.component(DatetimePicker.name, DatetimePicker)
Vue.component(Picker.name, Picker);
Vue.component(loadmore.name, loadmore);
Vue.component(Range.name, Range);
Vue.component(Progress.name, Progress);
Vue.component(Switch.name, Switch);
二次封裝 mt-loadmore 組件

列表的下拉刷新和上拉加載更多是移動端必須的組件。但是 mt的 loadmore組件有點問題，因此 我自己包了一層，讓它變得更加
明了好用了

二次封裝特點

模擬iphone 點擊頂部 滾動列表到頂部。

不用寫死高度了，并且兼容 iphoneX

對外提供了更加簡明易用的 刷新，回到頂部，獲得和設(shè)置滾動條位置的方法

統(tǒng)一的UI提示，免去重復(fù)css代碼。

代碼
使用 

  
  • 
    
    {{item.time}}
    
  
    • 
    

//列表出來函數(shù)
itemProcess(rows) {
        rows.forEach(item => {
          item.time= new Date().getTime();
        }) 
        return rows
      },
    mySelect 組件

    移動端 select 組件 實際 等于 popup.bottom + picker 兩個組件組合出來的；

    代碼
    使用 
    


//設(shè)置選中
 this.$refs["mySelect"].setTime(index);
    封裝 popup 組件

    popup 組件一般都是通過配置position 達到滑動進入或者底部出來或者中間彈窗的目的。唯一的害處是，如果你的頁面有很多彈窗，你要設(shè)置很多變量 true/false 來控制彈窗隱現(xiàn)。所以在此我封裝了一下。

    減少css代碼，組件配置

    減少聲明控制隱藏顯示的變量

    實現(xiàn)
    使用 
    
      xxxx


//打開 
this.$refs["exceptionFlow"].open();

//關(guān)閉
this.$refs["exceptionFlow"].close();

    positon的值跟mint原來是一樣的

    時間控件封裝

    mint 的時間控件使用起來也比較麻煩，也做了二次封裝，主要有以下特點

    直接得到時間值字符串

    自動綁定了open 和 close 方法

    添加了取消，保存功能

    支持初始化時間，動態(tài)設(shè)置時間值

    代碼
    使用
    封裝上傳圖片組件

    上傳圖片也是常用組件，在這里自己實現(xiàn)了一下。

    代碼 
    





*  adjunct.vue
    使用
    效果

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/102455.html

    相關(guān)文章

    • 2018.11.19秋招末第二波前端實習(xí)/校招小結(jié)

      摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習(xí)前端方向，自學(xué)，技術(shù)棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個入職的是好未來的前端實習(xí)崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時間背景 大概是在11月9日準備...

      suxier 評論0 收藏0

    • 2018.11.19秋招末第二波前端實習(xí)/校招小結(jié)

      摘要：背景個人背景就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習(xí)前端方向，自學(xué)，技術(shù)棧時間背景大概是在月日準備好簡歷開始投遞秋招差不多已經(jīng)結(jié)束招聘崗位不多，投遞對象為大一些的互聯(lián)網(wǎng)公司事件背景第一個入職的是好未來的前端實習(xí)崗，待遇工 背景 個人背景 就讀于東北某普通二本院校計算機軟件工程專業(yè)，現(xiàn)大四，北京實習(xí) 前端方向，自學(xué)，vue技術(shù)棧 時間背景 大概是在11月9日準備...

      canger 評論0 收藏0

    • 記 vue 移動端開發(fā) 中的經(jīng)驗

      摘要：中中我的草稿這樣，定義了為的頁面就會被緩存。但是移動端開發(fā)不能用樹，通常就是像百度網(wǎng)盤那樣，類型文件夾的方式交互。 項目背景 手上的 vue移動端 項目已經(jīng)開發(fā)了大幾個月了，遇到了一些很有意思的坑，也讓自己學(xué)習(xí)了很多；寫此文主要目的是記下一些我遇到的坑，以及自己的解決方案，分享的同時也方便以后復(fù)習(xí)。 項目的底層是上司通過 Cordova 等常用的 hybird app工具打包出來的。...

      shuibo 評論0 收藏0

    發(fā)表評論

    0條評論

    Flands

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <