前端 移动端 Mint UI 体验

下载

npm i mint-ui -S

官网

引用

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

如使用过程报错，未能找的组件。可使用一下方式：

import { Button, Cell } from 'mint-ui'
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)

下拉 上拉例子

引用：

import { Loadmore ,CellSwipe   } from 'mint-ui';
Vue.component(Loadmore.name, Loadmore);
Vue.component(CellSwipe.name, CellSwipe);

页面：

<template>
     <div id="root" class="main-container">
              <div class="content">
                <mt-loadmore  :bottom-method="loadBottom"  @bottom-status-change='handleBottomChange'  :top-method="loadTop" @top-status-change="handleTopChange" > 
                
                   <template v-for="item in list">
                          <mt-cell-swipe
                            :right="item.hendelBtns">
                            <div slot="title">
                                  <img src="../aseets/img/addorder.png">
                                   {{item.value}}
                            </div>
                            </mt-cell-swipe>
                   </template>
                </mt-loadmore>
              </div>
  </div>
</template>

js

<script>
    export default {
        data(){
          return {
            topStatus: '',
            allLoaded:false,
            loading: false,
            list:[],
          }
        },
        created(){
          for (let i = 1; i <= 30; i++) {
                 let item = {
                  value:  i,
                  hendelBtns:[]
                }
                item['hendelBtns'].push( {
                    content: 'Delete',
                    style: { background: 'red', color: '#fff' },
                    handler: ()=> this.onDel()
                  })
                  item['hendelBtns'].push( {
                    content: 'downloadExl',
                    style: { background: 'blue', color: '#fff' },
                    handler: ()=> this.downloadExl()
                  })
                   this.list.push(item);
          }
          
        },
        methods:{
          handleBottomChange(val){
            console.log('handleBottomChange: ',val)
          },
          handleTopChange(val) {
             console.log('handleTopChange: ', val)
         },
          loadTop(){
            console.log('loadTop')
          },
          loadBottom(){
            console.log('loadBottom')
            this.loadMore()
          },
          ulLoadMore(){
            console.log('ulLoadMore')
          },
          loadMore() {
            this.allLoaded = false;
            setTimeout(() => {
              let last = this.list[this.list.length - 1];
              for (let i = 1; i <= 10; i++) {
                let item = {
                  value: last + i,
                  hendelBtns:[]
                }
                item['hendelBtns'].push( {
                    content: 'Delete',
                    style: { background: 'red', color: '#fff' },
                    handler: ()=> this.onDel()
                  })
                  item['hendelBtns'].push( {
                    content: 'downloadExl',
                    style: { background: 'blue', color: '#fff' },
                    handler: ()=> this.downloadExl()
                  })
                
                this.list.push(item);
              }
              this.topStatus = 'drop'
              // this.allLoaded = false;
              
              $('.is-dropped').css('transform','translate3d(0px, 0px, 0px)')
              console.log() 
            }, 2500);
          },
          onDel(){
            console.log('onDel')
          },
          downloadExl () {
            console.log('onDedownloadExll')
          }
        }
    }
</script>