html css javascript 在手机ui中,Vuejs 配合 mint-ui 开发移动端web__Vue.js__前端__CSS__JavaScript...
初衷
这是一个比较着急的事情(两天时间,写一个带视频播放、图片浏览、图文混排列表、上拉刷新、滚动刷新等等的单页),一开始同事使用传统H5+JS+CSS的方式,我担心进度,就硬着头皮上vuejs,为什么说硬着头皮上,原因是这是第二次在项目中使用vuejs,第一次使用的经历并不太好,主要是vuejs在低版本android端的适配确实让人头疼。
UI组件选型
还是说回到第一次使用vuejs的事情,当时选择了元素较为丰富的element-ui,因为确实元素上和产品设计上比较吻合,就没去寻找其他组件,无奈最后因为element-ui主打pcweb,导致移动端上UI适配问题突出,趟了很多坑。这次更加理智些,选择了饿了么团队的主打移动端的mint-ui,目前来说体验很好。
mint-ui使用过程
Mint-ui维护的很不错,使用起来也足够方便,我的基本的使用流程是这样的:
首先在手机上体验其demo,扫描链接:
Mint UI 挨个体验其中的提供的组件demo,评估是否满足自己需求,也对其支持的内容心里有个数。
demo内特性不够支持自己需求的时候,继续参考文档,因为文档中会把各种属性值列全。 mint-ui documentation
实在支持不了,自定义。
记录开发过程中几个坑
移动端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.cssSourceMap
module.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.clientWidth
const htmlDom = document.getElementsByTagName('html')[0]
htmlDom.style.fontSize = htmlWidth / 10 + 'px'
}
setHtmlFontSize()
图片列表的横向滚动需求
需求中需要的横向滚动就是类似:
这个需求的实现过程不太重要,需要的是要理解在WEB滚动的原理: * 纵向可滚动的原理是,当浏览器(webview)的可视高度小于承载的内容高度时,即可滚动,也即会出现滚动条,比如平时的无限纵向列表。 * 横向可滚动的原理类似,当某个容器的横向可视宽度小于承载内容的宽度时,即可横向滚动。
这里的实现方式是使用了一个较好的vue滚动组件,better-scroll。
模板的层级有要求: itemContainer -> imageWrapper -> imageItem,其中itemContainer需要固定宽度和隐藏滚动条。
.itemImage {
overflow: hidden;
width: 750px;
}
方法中使用到了vue的
nextTick可以指定下一次DOM更新之后再执行的方法。
mounted () {
this.$nextTick(() => {
this.initImageScroll()
})
},
methods: {
initImageScroll: function () {
let width = 0
for (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()
}
})
},
}
路由跳转返回后的自动滚动复位问题
这个问题在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 }
}
}
})
子元素浮层滚动时阻止父元素随动问题
这个需求其实很常见,出现浮层后,在浮层上展示内容,当在浮层上有滚动操作是,需要防止底部元素同时滚动。我这里的解决方法是用position=fixed的方式来固定。 * 当浮层出现时,动态将底部元素的根元素设置为fixed,并记录当前的scrollY值 * 当浮层消失后,动态将底部元素的根元素设置回原始值,并滚回到scrollY位置(由于重新设置position后会位置复位)
实现方法如下:
/**
* 防止浮层唤起时底部滑动跟随问题
* @param isFixed
*/
stopBodyScroll: function (isFixed) {
let bodyEl = document.getElementById('main')
if (isFixed) {
this.saveMainTop = window.scrollY
bodyEl.style.position = 'fixed'
bodyEl.style.top = -this.saveMainTop + 'px'
} else {
bodyEl.style.position = ''
bodyEl.style.top = ''
window.scrollTo(0, this.saveMainTop)
}
}
使用mt-loadmore时loading不消失问题
这个问题是文档没看清楚导致的,没有在正确的时机调用其内部子组件的onTopLoaded 方法导致,这里记录下mt-loadmore做下拉刷新的的方式:代码只保留了片段,在loadtop方法里有两个loadmore的ref原因是,在我的应用里分两个tab,同时都有下拉刷新功能,这里扔出来的原因是,大家需要注意,在同一个组件内,如果使用了多个mt-loadmore组件,那需要标识不同的ref值,比如我这里的loadmore1和loadmore2,要不然当调用onTopLoaded方法是会有各种异常出现,包括不能停止当前loading
:top-method="loadTop"
:top-loading-text="null"
:top-drop-text="null"
:top-pull-text="null"
ref="loadmore1"
@top-status-change="handleTopChange">
export default {
methods: {
/**
* 下拉刷新
*/
loadTop: function () {
if (this.selected === '1') {
this.getYourData01(() => {
this.$refs.loadmore1.onTopLoaded()
})
} else {
this.getYourData02(() => {
this.$refs.loadmore2.onTopLoaded()
})
}
},
}
}
结尾
Mint-ui很好用,真的强烈推荐。睡觉,哔哔哔。
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
作者: 萝卜日志
原文链接:https://juejin.im/post/6844903670652338183
html css javascript 在手机ui中,Vuejs 配合 mint-ui 开发移动端web__Vue.js__前端__CSS__JavaScript...相关推荐
- HTML5响应式手机模板:【超炫购物模板】——仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板
HTML5响应式手机模板:电商网站设计--仿拍鞋网商城手机网站模板( HTML+CSS+JavaScript) 企业手机网站模板 手机网站模板 电商网站手机模板 响应式手机网站 html5手机网站模板 ...
- 浩辰CAD看图王手机版中添加的图片批注在电脑端如何查看?
在使用CAD看图软件浩辰CAD看图王APP中批注功能的过程中,有时候为了CAD图纸能更清晰的展示,会需要在批注的时候插入图片说明,所以说特定场合下需要用电脑端打开,应该如何查看在手机中添加的图片批注呢 ...
- html在线商城购物网站制作——基于HTML+CSS+JavaScript(oppo手机商城 6页)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 在线商城购物 | 水果商城 | 商城系统建设 | 多平台移动商 ...
- pyqt 获取 UI 中组件_初级UI需注意10个移动端的关键原则
如果你是初级UI设计师,那么请注意了.今天AAA教育胡老师给大家总结了初级UI需注意10个移动端的关键原则.学会了你就离中级UI设计师更近一步.话不多说赶快来学习吧! 1.用户 我们所做的一切都围绕我 ...
- pyqt 获取 UI 中组件_安卓ui设计智能输入法如何开发,这里有介绍
安卓是目前国内使用人数最多的一种操作系统.很多人都在使用安卓的输入法.其实小编要告诉大家,学会了ui设计,你也可以设计输入法.今天就让小编为大家介绍安卓ui设计智能输入法如何开发. 安卓ui设计智能输 ...
- mint ui tab html,Vue Mint UI tabbar切换
1.引入mint-ui 1).使用 vue-cli npm install -g vue-cli vue init webpack projectname 2). 部分引入 在main.js中写入: ...
- HTML5七夕情人节表白网页(粉色的情人节爱心飞出ui特效) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤粉色的情人节爱心飞出ui特效❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这 ...
- HTML5期末大作业:动漫网站设计——html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:动漫网站设计--html5响应式手机滑动海贼王漫画网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作 ...
- HTML5期末大作业:商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
最新文章
- 增强现实系统的三大关键技术是什么?
- C++文件流操作备忘录
- 类的本质 Objective-C基础
- [UIKit学习]08.关于自定义控件
- leetcode 714. 买卖股票的最佳时机含手续费(dp)
- 还记得吗?可我摸了摸的太空堡垒
- 最全的BAT Google等团队技术博客集合
- CoordinatorLayout 使用综述系列(二)与AppBarLayout结合上下联动效果
- 如何评估一个产品的投资回报?
- 教你把gps服务器修改为中国加速搜星,Android的GPS加速搜星的原理和方法
- python的发展生态_简说Python生态系统的14年演变
- 谁说80后的人不负责任!
- 关于树叶的活动设计_悦趣课堂、教学相长 ——济南市天桥区金色悦城幼儿园公开课活动纪实...
- Ubuntu搜狗输入法, 输入中文时只显示拼音,不显示中文选择框
- 三星5G商用关键设备开发完成;施耐德布局物联网│IoT黑板报
- pc端移动端布局有什么区别
- 阿里校招应届生面试经验
- r语言dmy()函数转化出现na_R语言入门系列之二
- 3.22 以太坊:以太猫源码分析2
- MySQL学习博客第一篇
热门文章
- 帆软报表获取服务器信息,帆软报表中数据查询取数的介绍
- 我的世界服务器死亡不显示,我的世界 服务器怎么开启死亡不掉落 需要 – 手机爱问...
- C语言中关于复合语句的一些问题
- 50行Python代码玩转微信小游戏颜色王者
- 【Rust日报】2021-02-16 “火旋风”代码分析器
- aspose,word转pdf,及破解思路
- 消息称苹果iMac Pro将于2022年现身,而不是今年年底
- 【分享】PowerPoint如何设置保护和加密?
- 全国计算机应用技术证书文字处理,全国计算机用技术证书考试.doc
- 海康相机SDK二次开发的一些报错和解决办法