国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

記 vue 移動端開發 中的經驗(2)

Flands / 2090人閱讀

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

按需引入mint-ui

本項目用了 mint-ui 作為基礎ui框架，在使用中遇到不少問題。官網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

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

統一的UI提示，免去重復css代碼。

代碼
使用 

  
  • 
    
    {{item.time}}
    
  
    • 
    

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

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

    代碼
    使用 
    


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

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

    減少css代碼，組件配置

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

    實現
    使用 
    
      xxxx


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

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

    positon的值跟mint原來是一樣的

    時間控件封裝

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

    直接得到時間值字符串

    自動綁定了open 和 close 方法

    添加了取消，保存功能

    支持初始化時間，動態設置時間值

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

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

    代碼 
    





*  adjunct.vue
    使用
    效果

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102455.html

    相關文章

    • 2018.11.19秋招末第二波前端實習/校招小結

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

      suxier 評論0 收藏0

    • 2018.11.19秋招末第二波前端實習/校招小結

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

      canger 評論0 收藏0

    • 記 vue 移動端開發 中的經驗

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

      shuibo 評論0 收藏0

    發表評論

    0條評論

    Flands

    男|高級講師

    TA的文章

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