mint-ui，mint-ui里的badge怎么用

亲爱的读者们，你是否对mint-ui和mint-ui里的badge怎么用的相关问题感到困惑？别担心，今天我将为你解答这些问题，让你对此有更清晰的认识。

mintui轮播——图片设置100%,高度自适应

方法一、

css实现：（此例中图片宽高比例为1:1）

<mt-swipe :auto="4000" style='height: 0;padding-bottom: 100%;width: 100%;'>

        <mt-swipe-item style="height: 0;padding-bottom: 100%;width: 100%;" v-for="item in list" :key="item.id">

            <img :src="item.img" class="swipepic">

        </mt-swipe-item>

      </mt-swipe>   

就是通过padding-top或者padding-bottom实现，高度设置为0。这个属性当它的值为百分比的时候，是按该元素的宽度来计算的。也就是说当设为100%的时候，其高度就等于自身的宽度，形成一个正方形。也就是说可以通过这个来设置已知尺寸比例的图片宽度100%高度自适应。

方法二、

使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度，具体实现请打开百度，另外请注意：用js实现的时候需要监控页面缩放变化以达到自适应。

mint-ui filed怎么自动获得焦点

先帮你整理一下对焦的相关内容，看懂了就好解决:第一层:切换AF/M拨杆(你已经找到了)，那地方的M表示手动对焦模式，你自己根据需要对焦，没什么好说的。AF就是相机自动对焦模式。第二层:AF自动对焦模式又分三种小模式:AF-A，AF-C，AF-S，你选择了哪个小项，肩屏上就有显示。(你也已经找到了那个按钮，同时还要转动主指令拨盘)第三层:自动对焦时AF区域模式选择:就是说无论你选择了AF-A，AF-C，AF-S哪种自动对焦模式，你还必须根据需要设置相机对焦点选择模式，D7000有四种选择:单点AF区域，动态AF区域，3D跟踪，自动区域。具体看看说明书95页。如下操作可以满足你的要求:先是选AF，再选AF-A或者AF-S，然后选单点AF区域，如果对焦点不在中央的话，按一下多重选择器中间的OK按钮。也可以根据构图需要在39个对焦点中通过多重选择器方向键选择任意对焦点。操作方便起见，建议不要锁定对焦点，根据需要随时调整。

Mint UI popup 的使用

一安装

1.  npm安装

   npm i mint-ui@1-S 

2 使用 

importVuefrom'vue'

importMintUIfrom'mint-ui'

import'mint-ui/lib/style.css'

importAppfrom'./App.vue'

Vue.use(MintUI)

newVue({

el:'#app',

components:{ App}

})

安装 babel-plugin-component：

  npm install babel-plugin-component-D

然后，将.babelrc修改为：

3使用 Popup组件

（1）在你的vue文件里面引入这个组件  

  import { MessageBox, Popup, Button } from "mint-ui"; 

  其他两个是其他的组件，需要的话直接在后面加入就可以了

（2）复制粘贴组件

          <mt-popup v-model="popupVisible"

                  position="center"

                  class="dddddd"

                  modal=false> 

  <div> 内容</div>

            <mt-button type="primary"

                       @click="btnPop"

                       class="btnPop">我知道了</mt-button>

        </mt-popup>

1如果弹窗需要设置  border-radius这个属性但是组件里面的div设置不生效的话，可以试试给组件起个class名字然后再去设置，因为的我的不管用。

2.组件里面的div可以正常写你所需要的样式和需求

3，mt-button也是mint-ui的组件 可以用按钮的方法关闭弹窗

4，需要在data里面设置初始值为false然后 methods里面正常写弹窗打开关闭的方法就可以了 

第一天

mint-ui里的badge怎么用

首先放上mint-ui中文文档

近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档

刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

Mint UI包含丰富的 CSS和 JS组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。

真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。

考虑到移动端的性能门槛，Mint UI采用 CSS3处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。

依托 Vue.js高效的组件化方案，Mint UI做到了轻量化。即使全部引入，压缩后的文件体积也仅有~30kb(JS+ CSS) gzip。

这个组件库，适合于基于vue的手机页面开发。

1.cell的使用

先丢个图↓

在做switch的时候，想做成文字和switch在列表的两侧。效果出不来，发现有很多人跟我一样死命的钻switch的文档，以及找switch的相关资料。然后实际上，应该用cell才对。

?

利用cell的布局，和switch相结合。产生下面的结果。

2.Infinite scroll和 Navbar结合使用

Navbar是这样的↓

Infinite scroll是这样的↓

两个结合起来，就是把Infinite scroll嵌套在<mt-tab-container-item id="1"></mt-tab-container-item>里面，然后效果就出来了。

简单的就是酱紫的。

?

这样基本页面就出来了。

好了，文章到此结束，希望可以帮助到大家。