Mint UI

项目中用到了Infinite scroll 这个组件，但是初始化的时候，getList总会请求两次， 网上查了部分资料，如 <ul class="mui-table-view " v-infinite-scroll="getList" infinite-scroll-disabled="loading" infinite-scroll-distance="0"> 中的v-infinite-scroll等指令要放在ul标签上，ul 的父标签必须加固定高度，ajax获取成功后加上setTime渲染，经测试，均为生效，后来看到官方api，还有一个infinite-scroll-immediate-check的属性，默认为true,再次更改为false，初始化就不会请求两次接口了； 但是此方法在和mint-ui 中的tab-container结合使用时，getList会出现一直调用，直到所有的数据都加载完毕，想着应该是窗体切换时，公用同一个窗体高度造成的； 因为在tab-container中的mt-tab-container-item 增加v-if 即可；经验证此方式可行。 <mt-tab-container v-model="active"> <mt-tab-container-item id="tab-container1" v- if =“active == ‘tab

原文链接: vue mint tabbar 组件 使用 网址 http://mint-ui.github.io/docs/#/zh-cn2/tabbar 底部选项卡，点击 tab 会切换显示的页面。依赖 tab-item 组件。 实现底部选项卡切换页面功能 是真滴方便。。。只需要设置图标和文字就行了，激活样式默认文字是蓝色，刚好和我的图标一样。。。 <template> <div class="container"> <router-view class="router-view"></router-view> <mt-tabbar v-model="selected"> <mt-tab-item v-for="i in tabs" :id="i.name" :key="i.name" @click.native="change(i)"> <img slot="icon" :src="selected==i.name ? i.active : i.base"> {{i.name}} </mt-tab-item> </mt-tabbar> </div> </template> <script> export default { name: "tab-mint", data() { return { selected: '订单', tabs: [ { active: "/static

一、配置config/index.js 本人没有配置index.js文件，就开始进行了打包，结果最终效果是页面空白，解决了空白，接着底部图标（我是用的阿里巴巴图片）资源找不到。所以配置这步比较重要。 （1）页面空白的解决： 打开config/index.js，将build模块的assetsPublicPath值改为’./’ assetsPublicPath: './', 发布路径 （2）css引用图片资源找不到问题： 因为打包后路径发生变化，导致这个图片就找不到。 stackflow上有一个解决办法，很简单打开“build/utils.js”，增加一行代码即可 publicPath:'../../' 　　 二、通过webpack打包 执行这样命令后，可以看到根目录的dist文件夹下是打包好的静态资源 这样就打包好了，里面有index.html 以及 static文件夹（包含fonts、img、js、css文件夹）两个 三、使用hbuilder打开 将dist文件下拖动到huilder软件中即可 dist文件夹，就是拖动进去的，A 标记是app的意思，W是web的意思。我这里是已经转为app了，所以dist文件夹以 A 标识 ，没有转换之前是 W 标识 四、转换为移动APP 由于我已经转为APP，我用helloHBuilder做示范 右键需要转为app的文件夹，弹出的快捷菜单中——

一、基本配置 　　https://github.com/modood/Administrative-divisions-of-China 　　三级联动数据地址 二、vue基本配置 　　1、cnpm install mint-ui --save-dev 　　2、引入 　　　　import MintUI from 'mint-ui' 　　　　import 'mint-ui/lib/style.css'; 　　　　Vue.use(MintUI); < template > < div > < mt-picker :slots ="myAddressSlots" @change ="onMyAddressChange" ></ mt-picker > < p > 地址3级联动：{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}} </ p > </ div > </ template > < style > </ style > < script > import Vue from " vue " ; import { Picker } from " mint-ui " ; import myaddress from " ../../data.json " ; Vue.component(Picker.name,

mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案 参考文章： （1）mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案 （2）https://www.cnblogs.com/yinn/p/10608564.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/3797416/blog/4748686

vue复选框使用方法 　　 选中的值会存入v-model绑定的数组中 全选反选 1、当全选按钮选上时，将arrList所有的value值放入 checkedList 2、当所有选项都选中时，全选按钮也自动被选中，有一个没被选中时，全选按钮自动取消选中 以下为小demo的完整代码 　　　　< div class ="pdt25" > < div > < div class ="item" v-for ="item in arrList" :key ='item.orderNo' > < label class ="mint-checklist-label" > < span class ="mint-checkbox" > < input type ="checkbox" class ="mint-checkbox-input" :value ='item.orderNo' v-model ='checkedList' @change ="selected(item)" > < span class ="mint-checkbox-core" ></ span > </ span > </ label > < div class ="info" > < div class ="title" > {{item.title}} </ div > < div class ="price"

一、前言 项目接近尾声，就想着做一个总结，期间遇到了很多问题，网上的帖子也是五花八门，有些东西根本没有说到点上，导致走了很多弯路，介于本人也只是一个萌新，总结仅供参考。 二、mintUI组件的使用 1、 Tabbar 用到mintUI，肯定是移动端的项目了，不论是app还是h5都少不了这个底部导航，关于底部导航的，我在前面已经有所总结（ https://www.cnblogs.com/yuxiaoge/p/11773524.html ） 2、 Cell 说到cell的使用我还真的是哭笑不得，也是折腾了一下，后来才发现问题的，我在使用vue脚手架搭建项目的时候发现左侧的问题并非居左，而是居中，为了这个问题，我还特意强制去设置它的样式，后来无意中注意到是在 App.vue 中的默认样式导致的，样式中有一个 text-align:center 把这个样式去掉就好了。 3、 Action sheet 这个前面也有提到（ https://www.cnblogs.com/yuxiaoge/p/11776802.html ） 4、 Message box MessageBox( '提示', '操作成功') ; 关于这个组件官网是这样介绍的，可是对于新使用mintUI的码农来说，直接是使用不了的，下面就直接拿出我的代码吧。 messageBox(){ this .$messagebox('提示',

v-for key v-for循环需要添加key属性，唯一标识，这样重新渲染的速度比较快；key的作用==》虚拟DOM的Diff算法 主要作用是快速更新虚拟dom树 lodash javascript使用工具库 中央bus实现平行组件之间的传值 $emit与$on进行组件之间的传值；注意$emit和$on的事件必须在一个公共的实例上，才能够触发 demo: 平行组件 A B C 中央bus；实现 A向C传递数据 B向C传递数据；$emit触发 $on接收 必须绑定在同一个实例上 新建一个Vue实例Event 在A B组件中传递数据 Event.$emit('sendMsg',msg) 触发事件, 在c组件的mounted中绑定事件： Event.$on('sendMsg',msg=>{ }) vue-router导航守卫 beforeEach afterEach beforeReslove beforeRouterEnter(to,from,next) 在next的回调函数中可以访问this实例 beforeRouterUpdate(to,from,next) 在路由切换时，路径改变，但是组件复用的情况下，生命周期钩子不会触发，就可以在这里获取路由参数 beforeRouterLeave(to,from,next) 清除定时器 在离开当前页面时，给用户提示信息，是否确认要离开

原生JS封装： moreSelect: function (url,elements) { function GetArea(url) { this .url = url this .init(elements) } GetArea.prototype = { num: 0 , selections: null , list: [], createOptions(data, parent) { if (!parent) return if (parent.children) { var leng = parent.children.length for ( var j = 0; j < leng; j++ ) { parent.lastElementChild.textContent = '' parent.lastElementChild.remove() } } for ( var i = 0; i < data.length; i++ ) { var option = document.createElement('option' ); option.textContent = data[i].name || data[i] parent.appendChild(option) } parent.addEventListener( 'change', this

1.无限滚动的运用场景： 一般运用在列表展示，有分页、下拉加载更多的需求中。 2.代码分析 代码很简单，实现了列表分页，数据加载完之后显示数据状态 < template > < div class ="list-data" v-infinite-scroll ="loadMore" infinite-scroll-disabled ="loading" infinite-scroll-distance ="10" > < equipment-list :list ="list" ></ equipment-list > < div class ="loading" v-if ="loading" > < span id ="load-text" > {{loadText}} </ span > </ div > </ div > </ template > < script > import { findPage } from ' @/api/api ' import EquipmentList from ' common/list/EquipmentList.vue ' export default { data(){ return { loading: false , loadText: ' 正在加载... ' , list: [], param: { pageIndex: 0