Vant

主角是谁 在今天这篇文章中，我并不会在这里讲一些移动端视口的概念，包括物理像素和逻辑像素，理想视口，dpr等等等等，我只介绍这样一种非常不错的移动端适配方案： post-css-to-viewport ，如果我说这种方案能解决98%以上的移动端布局痛点，我想整个掘金，应该没有人会反驳。 痛点在哪里 在之前有一种流行已久的移动端适配方案，那就是 rem ，我想下面这两句代码，有不少老移动端都不会陌生： const deviceWidth = document .documentElement.clientWidth || document .body.clientWidth; document .querySelector( 'html' ).style.fontSize = deviceWidth / 7.5 + 'px' ; 没错，在那个移动端UI稿尺寸为 750*1334 满天飞的时代，这两句代码确实给开发者带来了很大的方便，这样设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为 120px*40px ，那么开发者对应的写成 1.2rem*0.4rem 就可以了 这种换算已经是颇为方便，但是并非所有的项目都能这样去设置一个方便换算的比例系数，当比例系数为100时，小数点往前面挪两位就行了，然而有的项目设置的换算系数千奇百怪，有50的

一、问题 前天，在使用vant的checkbox复选框的时候，注意到新增加一个全选功能，通过 ref 可以获取到 CheckboxGroup 实例并调用实例方法。于是我就想用这个，但是按照上面的示例写了以后，一直提示我 toggleAll is not a function ，让我很纳闷。 后来发现我自己的vant的版本还是1.x的，而这个功能是在2.2.6才新增加的，于是我就升级呗。 问题来了，安装了最新版以后，在我运行程序的时候 ，就一直报错， These dependencies were not found: * vant/es/goods-action-big-btn in ./src/config/vant.config.js * vant/es/goods-action-big-btn/style in ./src/config/vant.config.js * vant/es/goods-action-mini-btn in ./src/config/vant.config.js * vant/es/goods-action-mini-btn/style in ./src/config/vant.config.js To install them, you can run: npm install --save vant/es/goods-action-big

引入Vant组件库 　　在工作中，有很多自己的组件库，但是在开发这些前都会选择一套稳定的开源的作为轮子作为基础（大公司是有能力造自己轮子的）。因为我们要作电商系统，所以选择有赞的Vant作为Vue的基本组件和样式组件。 　 安装Vant npm i vant -S 　　安装好后，看一下我们的package.json文件，并确认一下版本。 　引入Vant的第一种方法（不推荐） 　　安装好vant后，可以使用以前常用的方法进行引入-这是一种全局引入的方式。 　　直接在src/main.js进行全局引入。 import Vant from 'vant' import 'vant/lib/vant-css/index.css' Vue.use(vant) 　　简单的三行代码已经可以把Vant引入进来了，但是这并不够优雅，也使得最后打包发布时会增加包的大小，Vue的SPA首屏打开时本来就有些慢，所以不建议使用这种方法进行引入。 　优雅的引入Vant 　　vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。 　　安装babel-plugin-import npm i babel-plugin-import -D 　　在.babelrc中配置plugins（插件） "plugins" : [

一 定义 轻量、可靠的移动端 Vue 组件库 二 特性 60+ 高质量组件 90% 单元测试覆盖率 完善的中英文文档和示例 支持按需引入 支持主题定制 支持国际化 支持 TS 支持 SSR 三 官网 https://youzan.github.io/vant/#/zh-CN/ 四 入门参考 https://www.imooc.com/video/19786 来源： oschina 链接： https://my.oschina.net/u/4265623/blog/4268865

调用vant的Dialog组件觉得用起来很爽，于是乎想自己也实现一个~ 由于考虑到项目兼容性，所以没用ES6写法 （一）效果图如下： （二）可配置参数：图标，内容，是否自动消失，是否显示底部按钮区域，还有按钮回调函数 （三）组件代码 var pconfirm = Vue.extend({ template: '\ <transition name="fade">\ <div v-show="isShowFlag">\ <div class="com-comfirm">\ <div class="com-comfirm-content">\ <div class="com-comfirm-icon-wrap">\ <img :src="icon" alt="">\ </div>\ <div class="com-comfirm-desc">\ {{desc}}\ </div>\ </div>\ <div class="com-comfirm-foot" v-show="!autoDisappear">\ <div class="com-comfirm-cancel" v-show="cancelShow" @click="handleCancel">取消</div>\ <div @click="handleSure">确定</div>\ </div>\ </div>\ <div

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。 vant地址： https://youzan.github.io/vant/#/zh-CN/intro 本章目标 在vue-cli的项目中使用vant的相关组件 项目构建 如果您还没有搭建vue-cli项目，那么请参考 https://www.cnblogs.com/jjgw/p/11334797.html 这篇博客,搭建好的vue-cli项目结构如下： 1.接下来我们在控制台输入安装vant的命令 　　 npm i vant -S ：这是简写形式。 　　npm install vant --save :这是完整写法。 2.安装完成之后的结果 3.如果您不确定是否安装成功，那么我们可以去node_modules中查看 4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入 npm i babel - plugin - import - D 或者 npm install babel - plugin - import -- save - dev 5.接下来我们去

一、思路分析和效果图 　　用vue来实现一个瀑布流效果，加载网络图片，同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现，捋下思路： 根据加载数据的顺序，依次追加标签展示效果； 选择哪种方式实现瀑布流，这里选择绝对定位方式； 关键问题 ：由于每张图片的宽高不一样，而瀑布流中要求所有图片的宽度一致，高度随宽度等比缩放。而且由于图片的加载是异步延迟。在不知道图片高度的情况下，每个图片所在的item盒子不好绝对定位。因此在渲染页面前先获取所有图片的高度，是解决问题的关键点！这里选择用JS中的Image类，通过预加载图片的方式提前获取图片宽高，另外通过一个临时变量来计算是否所有图片的高度已经得到。当所有的图片高度获取后，开始渲染页面。 页面渲染后，获取所有图片所在的盒子，循环计算盒子的高度，开始设置每个盒子item的绝对定位。 页面渲染时，会出现闪烁的现象。如何解决这个问题呢？这里用了一个动画样式。不过在第一次加载的时候，还是会有一点闪烁的感觉。 然后就是下拉刷新和上拉加载更多的效果，这里用了有赞的vant组件PullRefresh和List这套组合组件来实现。 先看个效果动图： 静态截图： 二、具体实现步骤 2.1、页面结构设计，测试数据准备。 　　本地准备一个json文件数据，放在项目public文件夹下。注意，本地测试数据必须放在public文件夹下

vant地址： https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true 。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。 <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" > <van-cell v-for="item in list" :key="item" :title="item" /> </van-list> export default { data() { return { list: [], loading: false, finished: false, 　　　 loadTag:1 //标记是否触发onLoad函数 }; }, methods: { onLoad() { 　　　　 if(loadTag==1){ 　　　　　　//请求接口得到数据给list数组 　　　　　　this.list=数据； 　　　　　　app

最近我们公司用vue搞事情，我们就用了Node和Vue写了个博客园的移动端WebApp，想拿出来与大家分享下，也谈谈我遇到的坑。由于时间问题，目前还剩“闪存”，“博问”这两块还没做完。先分享下截图吧。 我呢，就从技术，部署，以及遇到的坑来讲吧，当然啦,首先要感谢博客园官方提供接口，以及客服人员对于我的“邮箱轰炸”，还回复我的问题。致以大大的感谢。 说说我使用的技术吧 开发工具：vs code 前端：vue，vue-cli3.0 vant(ui框架)，webpack，less 后端：博客园官方api 部署：nginx，云服务器 技术就是这么简单，开发工具就不讲了，前端采用脚手架构建而成，就不用自己累死累活去配置，这个时代真好。然后再使用vant的UI框架构建样式界面，webpack打包嘛，less专注样式咯，后端就完全是博客园的api了，拿来即用，不过接口要申请下权限。前后端的请求，我采用的是“axios”,使用它的拦截器做了不少事。然后部署的话，我呢，就生成静态了，然后用nginx部署在阿里云服务器上了。 技术想讲的就这些，vue是基础，若是vue不懂，可以去我之前的文章看看，不过呢，我更建议去官方文档上去学习，其他的也是，我只是比较喜欢写写文章。由这些技术，我就构建了一个webapp。 我遇到的大坑 token问题 博客园的接口采用的是OAuth2的形式

❝ 最近帮别人在做一个小程序,因为官方的支持不够好,组件库也不够多,所以就没有使用官方的操作。网上查找了一番，觉得mpvue还不错（之前也没玩过），索性拿来用吧！ ❞ 01 前言 小程序的做法也是比较简单的，假如你是老手的话基本上开箱即用，但是奈何自己技术不够，那就手把手教你踩坑吧。 之前也做过几个小程序，我用过 官方的 、 uni-app 开发，效果还行。然后现在是想尝试一下 mpvue ，生态还可以，组件库也多。拿到设计图的时候觉得还可以，但是一看好像还是有点东西的。 02 自定义tabbar 我看到了页面是有一个自定义tabbar的，自己之前没有做做过这种，都是直接在app.json文件里面配置的，简单高效不带坑。虽然说官方支持 自定义tabbar 的功能，但是我和官方的意思就不是同一个频道的。这是我拿到的 原型图 ： 原型图 一开始好像是有点蒙，但是谷歌了一下其实还有救。思想就是把原生的tabbar隐藏，然后把你自定义的tabbar放上去即可。 在app.json配置tabbar，因为后面要跳转（不配置报错） 新建一个mytabbar.vue文件，写自己的tabbar 在app.vue的onShow的时候隐藏原生的tabbar, wx.hideTabBar(); 这样其实就好了，但是需要tabbar的页面都要引入自己的组件，talk is cheap