(0021) H5-Vuejs配合 mint-ui 开发移动端web

news/2024/4/19 2:00:57

mint-ui

初衷

element-ui主打pcweb,导致移动端上UI适配问题突出,趟了很多坑。这次更加理智些,选择了饿了么团队的主打移动端的mint-ui,目前来说体验很好。

认识Mint-ui

首先在手机上体验其demo,扫描链接:
在这里插入图片描述
在这里插入图片描述

  • 使用时,参考指定demo代码。由于官方的文档稍微有点欠缺,但是结合demo代码,已经完全足够了

mint-ui/example/pages at master · ElemeFE/mint-ui · GitHub

  • demo内特性不够支持自己需求的时候,继续参考文档,因为文档中会把各种属性值列全。Mint UI 使用文档
npm i mint-ui -S

Mint UI 使用文档
mint-ui documentation

  • 实在支持不了,自定义。

记录开发过程中几个坑

  1. 移动端rem适配(含mint-ui的情况下)

这是在搭建框架的时候遇到的第一个问题,按照原先的经验,我先尝试使用了px2rem-loader来统一将px转换为rem,但是问题是,使用px2rem会将项目内所有css文件的px都转为rem,而mint-ui内的css是不能被转换的,因为其本身已经做了一些适配,但是并不基于rem的方式,所以如果强制将其内部的css文件做了转换,一般会导致所有其内部元素的尺寸变小。

所以目的应该是将自己写的样式内容做rem转换,所以使用了postcss,原因是postcss带有px2rem的插件。

贴下vue-loader.conf.js:

'use strict'
const utils = require('./utils')
const config = require('../config')
const precss = require('precss')
const pxtorem = require('postcss-px2rem')
const autoprefixer = require('autoprefixer')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction? config.build.productionSourceMap: config.dev.cssSourceMapmodule.exports = {loaders: utils.cssLoaders({sourceMap: sourceMapEnabled,extract: isProduction}),postcss:[precss(),autoprefixer({browsers: ['last 10 Chrome versions','last 5 Firefox versions','Safari >= 6','ie > 8']}),pxtorem({remUnit: 75 //设计尺寸的1/10})],cssSourceMap: sourceMapEnabled,cacheBusting: config.dev.cacheBusting,transformToRequire: {video: ['src', 'poster'],source: 'src',img: 'src',image: 'xlink:href'}
}

Main.js中动态设置root节点的fontsize,配合rem适配响应式:

// px2rem
window.onresize = setHtmlFontSize
function setHtmlFontSize () {const htmlWidth = document.documentElement.clientWidth || document.body.clientWidthconst htmlDom = document.getElementsByTagName('html')[0]htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
setHtmlFontSize()
  1. 图片列表的横向滚动需求:
    这里的实现方式是使用了一个较好的vue滚动组件,better-scroll是什么。

BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll (opens new window) 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

BetterScroll 是使用纯 JavaScript 实现的,这意味着它是无依赖的。

模板的层级有要求: itemContainer -> imageWrapper -> imageItem,其中itemContainer需要固定宽度和隐藏滚动条。

<div class="itemImage" ref="itemContainer"><!--需要支持横向滚动--><ul ref="imageWrapper"><li class="image_item" :key="image.id" v-for="(image, index) in item.images" ref="imageItem"><img class="image" :src="image.big"/></li></ul></div>
.itemImage {overflow: hidden;width: 750px;
}

方法中使用到了vue的nextTick可以指定下一次DOM更新之后再执行的方法。

mounted () {this.$nextTick(() => {this.initImageScroll()})},
methods: {initImageScroll: function () {let width = 0for (let i = 0; i < this.item.images.length; i++) {width += this.$refs.imageItem[0].getBoundingClientRect().width}this.$refs.imageWrapper.style.width = width + 'px'this.$nextTick(() => {if (!this.scroll) {this.scroll = new BScroll(this.$refs.itemContainer, {startX: 0,click: true,scrollX: true,scrollY: false,eventPassthrough: 'vertical'})} else {this.scroll.refresh()}})},
}
  1. 路由跳转返回后的自动滚动复位问题

这个问题在vue-router的官方问题中有说明:滚动行为 | Vue Router 这里只贴下在vue-router实例化时加入实现的样子:

export default new Router({routes: [{path: '/',name: 'Main',component: Main,meta: {keepAlive: true}},{path: '/ImagePlayer',name: 'ImagePlayer',component: ImagePlayer,meta: {}}],scrollBehavior (to, from, savedPosition) {if (savedPosition) {return savedPosition} else {if (from.meta.keepAlive) {from.meta.savedPosition = document.body.scrollTop}return { x: 0, y: to.meta.savedPosition || 0 }}}
})
  1. 子元素浮层滚动时阻止父元素随动问题

这个需求其实很常见,出现浮层后,在浮层上展示内容,当在浮层上有滚动操作是,需要防止底部元素同时滚动。我这里的解决方法是用position=fixed的方式来固定。

  • 当浮层出现时,动态将底部元素的根元素设置为fixed,并记录当前的scrollY值
  • 当浮层消失后,动态将底部元素的根元素设置回原始值,并滚回到scrollY位置(由于重新设置position后会位置复位)

实现方法如下:

 /*** 防止浮层唤起时底部滑动跟随问题* @param isFixed*/stopBodyScroll: function (isFixed) {let bodyEl = document.getElementById('main')if (isFixed) {this.saveMainTop = window.scrollYbodyEl.style.position = 'fixed'bodyEl.style.top = -this.saveMainTop + 'px'} else {bodyEl.style.position = ''bodyEl.style.top = ''window.scrollTo(0, this.saveMainTop)}}
  1. 使用mt-loadmore时loading不消失问题

这个问题是文档没看清楚导致的,没有在正确的时机调用其内部子组件的onTopLoaded
方法导致,这里记录下mt-loadmore做下拉刷新的的方式:代码只保留了片段,在loadtop方法里有两个loadmore的ref原因是,在我的应用里分两个tab,同时都有下拉刷新功能,这里扔出来的原因是,大家需要注意,在同一个组件内,如果使用了多个mt-loadmore组件,那需要标识不同的ref值,比如我这里的loadmore1和loadmore2,要不然当调用onTopLoaded方法是会有各种异常出现,包括不能停止当前loading

 <!--下拉刷新列表-->
<template>
<div><mt-loadmore :top-method="loadTop" :top-loading-text="null" :top-drop-text="null":top-pull-text="null"ref="loadmore1" @top-status-change="handleTopChange">
</div>
</template>
<script>
export default {methods: {/***  下拉刷新*/loadTop: function () {if (this.selected === '1') {this.getYourData01(() => {this.$refs.loadmore1.onTopLoaded()})} else {this.getYourData02(() => {this.$refs.loadmore2.onTopLoaded()})}},}
}
</script>

作者:萝卜日志
链接:https://www.jianshu.com/p/1bb9792ec289


http://www.ppmy.cn/news/710105.html

相关文章

桌面小萝莉时钟

思路&#xff1a; 1.把官方时钟demo改了&#xff0c;加了秒针&#xff0c;加了壁纸&#xff0c;加了小萝莉 2.QWindow窗口嵌入到桌面 改版 去掉秒针&#xff0c;把小萝莉正过来&#xff0c;沿着表盘走 源代码

如何用cocos2d-x来开发简单的Uphone游戏:(一) 下载安装和HelloWorld

WARNING: 此文已经过时&#xff0c;引擎升级到更高的版本&#xff0c;方法也有些变化。请移步到 http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Tutorials 阅读最新的Cocos2dxSimpleGame系列教程&#xff08;网站上的tutorial教程会保持与cocos2d-x最新版本同步&#xff…

JS+CSS图片新闻效果

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.0 Transitional//EN " > < HTML lang zh - CN xmlns " http://www.w3.org/1999/xhtml " > < HEAD >< TITLE > 图片新闻效果 </ TITLE > < META http - equiv Content -…

图片新闻切换效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML langzh-CN xmlns"http://www.w3.org/1999/xhtml"><HEAD><TITLE>图片新闻切换效果</TITLE><META http-equivContent-Type content"text/html;…

象QQ早上那样的新闻切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML langzh-CN xmlns"http://www.w3.org/1999/xhtml"><HEAD><TITLE>图片新闻切换效果</TITLE><META http-equivContent-Type content"text/html;…

008-2018-09-12 文件操作

1.今日内容大纲 一. 昨日内容回顾1. join() 可以吧列表转化成字符串split() 把字符串转化成列表2. 关于删除列表在循环的时候不能进行删除. 索引会跟着你删除而改变创建新列表. 把要删除的内容放在新列表中. 循环新列表. 删除老列表字典在循环中不能删除.字典在循环的时候不能…

新闻图片切换播放和自动切换播放以及链接功能【js+css设计】

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > < HTML lang zh-CN xmlns "http://www.w3.org/1999/xhtml" > < HEAD >< TITLE > 图片新闻效果 </ TITLE > < META http-equiv Content-Type cont…

软妹音程序员鼓励师24小时在线,只需一个VSCode插件,还能帮忙吐槽产品经理

一个神奇的 VSCode 插件 最近在 GitHub 发现了一个有趣的 VSCode 插件程序员彩虹屁插件&#xff0c;名叫 VSCode Rainbow Fart。在你写代码的时候&#xff0c;可根据关键字播放接近代码含义的小萝莉语音。 有了它&#xff0c;你们公司连“程序员鼓励师”的预算都省了。 &…

2020-09-13

2020年新的学期生活开始了&#xff0c;给大家分享几个软件工具&#xff0c;原来软件不仅有用&#xff0c;而且很有趣。先关注我&#xff0c;要不等你再回来&#xff0c;就迷路了。 1.安卓护眼助手软件 蓝光过滤可以避免眼睛疲劳&#xff0c;蓝色的光从智能手机或平板电脑导致眼…

error 系统错误 错误码10007_手把手教你用Python打造一个语音合成系统

击上方“ Python爬虫与数据挖掘 ”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 大弦嘈嘈如急雨&#xff0c;小弦切切如私语。 /前言/ 平时我们聊天的时候&#xff0c;也许会想着录制一些自己的声音&#xff0c;而且还想有点特色&…

用Python打造一个语音合成系统

击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 大弦嘈嘈如急雨&#xff0c;小弦切切如私语。 /前言/ 平时我们聊天的时候&#xff0c;也许会想着录制一些自己的声音&#xff0c;而且还想有点特色&#…

Android程序员必备精品资源

2019独角兽企业重金招聘Python工程师标准>>> 平时写程序中不断收集到的一些比较常用的东西&#xff0c;分享给大家。 实用工具集锦 Android Lifecycle https://github.com/xxv/android-lifecycleTinyPNG https://tinypng.com/Android Layout Finder Android Layout …

手把手教你用Python打造一个语音合成系统

击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 大弦嘈嘈如急雨&#xff0c;小弦切切如私语。 /前言/ 平时我们聊天的时候&#xff0c;也许会想着录制一些自己的声音&#xff0c;而且还想有点特色&#…

java文件夹上传,保留文件夹结构

需求: 产品要求可以上传文件夹,文件夹下包含其他文件夹 前端上传文件夹,可以把文件以及所在文件所在文件夹信息传到后端 1.前端设置 需要设置 webkitdirectory enctype multipart/form-data <!DOCTYPE html> <html> <head><meta charset"UTF-8&…

Spring Boot 中的 CD 工具

Spring Boot 中的 CD 工具 在现代软件开发中&#xff0c;持续交付&#xff08;Continuous Delivery&#xff0c;简称 CD&#xff09;已经成为了一个非常重要的开发模式。CD 工具可以帮助我们自动化构建、测试、部署和发布软件&#xff0c;提高软件交付的速度和质量。在 Spring…

大数据分析案例-基于LightGBM算法构建公司破产预测模型

🤵‍♂️ 个人主页:@艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 喜欢大数据分析项目的小伙伴,希望可以多多支持该系列的其他文章 大数据分析案例合集…

v67.03 鸿蒙内核源码分析(字符设备) | 绝大多数设备都是这类 | 百篇博客分析OpenHarmony源码

曾子曰:“君子以文会友,以友辅仁。” 《论语》:颜渊篇 百篇博客系列篇.本篇为: v67.xx 鸿蒙内核源码分析(字符设备篇) | 绝大多数设备都是这类 文件系统相关篇为: v62.02 鸿蒙内核源码分析(文件概念) | 为什么说一切皆是文件v63.04 鸿蒙内核源码分析(文件系统) | 用图书管…

计算机和美术之间有什么联系,你和绘画大师之间,或许就差这样一款给力的平板电脑...

以往对于很多人来说&#xff0c;平板电脑只算作一个玩具&#xff0c;日常更多被用来刷剧和玩游戏。而近几年&#xff0c;重量级绘画App和压感画笔的技术突破&#xff0c;使平板电脑在绘画方面的生产力属性逐年递增。身边做设计的朋友和微博里关注的绘画大触纷纷开始用平板来进行…

Linux系列镜像下载_wentfar·tsao

Linux镜像下载 方法一&#xff1a; Linux系统下载网站&#xff08;只有CentOS和Ubuntu&#xff09; https://man.linuxde.net/download/ 使用迅雷或者其他磁力下载工具即可下载 推荐使用闪电下载软件&#xff0c;速度比无会员的迅雷快。 详情见https://blog.csdn.net/weixin…

这款 Github 全能下载工具,很强!

点击“开发者技术前线”&#xff0c;选择“星标????” 在看|星标|留言, 真爱 来自&#xff1a;iGithub中文社区 大家好&#xff0c;我是hub哥 大家下载资源是不是还在用某度&#xff0c;或者X雷呢&#xff0c;对于一个技术人&#xff0c;当然得逼格更高一点&#xff0c;更…