成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

記 vue 移動(dòng)端開發(fā) 中的經(jīng)驗(yàn)(2)

Flands / 2102人閱讀

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

按需引入mint-ui

本項(xiàng)目用了 mint-ui 作為基礎(chǔ)ui框架，在使用中遇到不少問題。官網(wǎng)doc 還不斷的訪問不了。不過還是很感謝 mint-ui 團(tuán)隊(duì)。
在此推薦一個(gè) vue移動(dòng)端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 組件

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

二次封裝特點(diǎn)

模擬iphone 點(diǎn)擊頂部 滾動(dòng)列表到頂部。

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

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

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

代碼
使用 

  
  • 
    
    {{item.time}}
    
  
    • 
    

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

    移動(dòng)端 select 組件 實(shí)際 等于 popup.bottom + picker 兩個(gè)組件組合出來的；

    代碼
    使用 
    


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

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

    減少css代碼，組件配置

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

    實(shí)現(xiàn)
    使用 
    
      xxxx


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

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

    positon的值跟mint原來是一樣的

    時(shí)間控件封裝

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

    直接得到時(shí)間值字符串

    自動(dòng)綁定了open 和 close 方法

    添加了取消，保存功能

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

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

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

    代碼 
    





*  adjunct.vue
    使用
    效果

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

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

    相關(guān)文章

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

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

      suxier 評論0 收藏0

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

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

      canger 評論0 收藏0

    • 記 vue 移動(dòng)端開發(fā) 中的經(jīng)驗(yàn)

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

      shuibo 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動(dòng)
    閱讀需要支付1元查看
    <