移动端
文章平均质量分 59
前端对象
一棵树,站成永恒
展开
-
移动端封装一个滚动加载的组件实现分页功能
在移动端项目中,用户通过向上滑动,加载列表数据,实现分页的功能。当总页数为1页或者是最后一页时候,底部显示“没有更多数据”字样,否则显示“滑动加载更多”的字样。一、组件的封装1、html2、jsexport default {props: {parentPullUpState: {default: 0},onInfiniteLoad: {type: Function,require: false}},components: {// “van-loading”: Loading原创 2021-04-25 17:55:43 · 677 阅读 · 0 评论 -
移动端使用better-scroll插件水平滑动
移动端项目开发中,处理滚动列表是再常见不过的需求。1、better-scroll 常见的 html 结构:2、安装better-scroll插件 npm i better-scroll -D页面引入import BScroll from “better-scroll”;2、初始化better-scrollbetter-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已原创 2021-04-25 17:05:35 · 504 阅读 · 0 评论 -
移动端添加调试器
有时候我们开发的移动端项目在PC端浏览器显示的很正常,但是到了手机上就有问题了,这可就让人很纠结,只能盲改,如何能在手机上面查看log,查看接口请求等等,你需要使用vConsole方法一、安装vcosole1、yarn add vConsole -S 或者 npm i vConsole -S2、main.js 引用// 开发环境下面使用vConsole进行调试if (process.env.NODE_ENV === ‘development’) {const VConsole = requir原创 2021-02-26 14:57:57 · 169 阅读 · 0 评论 -
移动端适配
之前有一种流行已久的移动端适配方案,那就是rem。const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;设置根font-size后,px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px40px,那么开发者对应的写成1.2原创 2021-02-26 14:51:23 · 621 阅读 · 1 评论 -
根据手机屏幕直接调整尺寸的rem的js代码
直接引入下面的代码:// 屏幕适配!function(win) {function resize() {var domWidth = domEle.getBoundingClientRect().width;if(domWidth / v > 540){domWidth = 540 * v;}win.rem = domWidth / 37.5; // 2倍屏domEle.s...原创 2019-08-25 14:57:58 · 319 阅读 · 1 评论 -
rem 布局
rem是什么?rem是CSS3新增的一个相对单位。rem与em有着区别,区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写...原创 2019-08-25 15:08:19 · 108 阅读 · 0 评论