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

news2024/11/13 11:59:10

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.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()
  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 = 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()
        }
      })
    },
}
  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.scrollY
        bodyEl.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.coloradmin.cn/o/714545.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

双层玻璃门碎了一面怎么更换

更换双层玻璃门的碎片需要按照以下步骤进行&#xff1a; 1. 备齐工具和材料&#xff1a;你需要准备以下工具和材料&#xff1a;安全手套、安全护目镜、扁头螺丝刀、绳子、玻璃胶和新的玻璃门。 2. 移除残存玻璃&#xff1a;首先&#xff0c;将门上的残留玻璃及其框架小心地取下…

12给图片加水印(matlab程序)

代码 clear;clc size512; block8; blocknosize/block; LENGTHsize*size/64; Alpha10.02; Alpha20.02; T1100; Izeros(size,size); Dzeros(size,size); BWzeros(size,size); block_dct1zeros(block,block); iimread(watermark64by64.png); %水印原图 markreshape(i…

springboot 2.6.6接入prometheus

springboot是2.6.6版本&#xff0c;刚开始用的是simpleclient客户端 <dependency><groupId>io.prometheus</groupId><artifactId>simpleclient</artifactId><version>0.16.0</version> </dependency>接入后一直报AbstractEnd…

Linux:CentOS安装Git

报错如下&#xff1a;git: 未找到命令... 这是因为没有安装git。 解决方案 使用yum安装git yum -y install git 查看是否安装git,若出现版本号&#xff0c;则代表已经安装了git git --version

ubuntu18实现QT与ROS通信

背景介绍&#xff1a;老板需求&#xff1a;qt开发ui界面&#xff0c;实现与ros通讯。同伴A已经使用qt开发了部分功能&#xff0c;但是没有弄与ros通讯相关&#xff0c;与A沟通了解项目细节。当前主要任务&#xff1a;先实现ros与qt通讯&#xff0c;实现ros话题发布、接收 经验…

Vue开发记录

文章目录 1、解决表格el-table多出一条横线1.1、现象1.2、解决方案 2、el-row高度问题2.1、现象2.2、解决方案 1、解决表格el-table多出一条横线 1.1、现象 <el-table:data"tableData"style"width: 100%"><el-table-columnprop"date"…

Nginx【Nginx场景实践(什么是限流、限流算法、限流实战 )】(十一)-全面详解(学习总结---从入门到深化)

目录 Nginx场景实践_什么是限流 Nginx场景实践_限流算法 Nginx场景实践_限流实战 Nginx场景实践_什么是限流 生活中的限流 春运&#xff0c;一项全人类历史上最大规模的迁移活动&#xff0c;抢火车票一直是每年跨年以后的热点话题。 为什么需要限流 系统设计时一般会预估…

快速排序的三路划分方法和归并排序的递归和非递归实现

目录 快速排序的三路划分方法 归并排序的递归实现 归并排序的非递归实现 快速排序的三路划分方法 首先快排的时间复杂度为O(N*logN)&#xff0c;空间复杂度O(logN),不稳定。 三路划分&#xff1a;将数据分为三份&#xff1b;可以提高当数据中出现多个重复数字时的效率。 …

青岛大学_王卓老师【数据结构与算法】Week04_03_双向链表_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c;另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础–…

2022(特等奖)C2592儿童安全监护与救援指挥系统

作品介绍 1 需求分析 现如今人口拐卖犯罪已成为世界上增长最快、最有利可图的犯罪之一&#xff0c;年利润仅次于毒品和军火&#xff0c;其中儿童拐卖犯罪最为引人注目&#xff0c;且被拐数量惊人&#xff0c;已成为国际社会共同关注的问题。2021年4月&#xff0c;国务院发布了…

Kafka入门, 消费者工作流程

kafka消费方式 pull(拉)模式&#xff1a; consumer采用从broker中主动拉取数据。 Kafka采用这种方式。 push(推)模式&#xff1a; Kafka没有采用这种方式&#xff0c;因为由broker决定消息发送速率&#xff0c;很难适应所有消费者的速率。例如推送速度是50m/s&#xff0c;consu…

云原生时代,如何通过 KubeSphere x 极狐GitLab 构建安全应用?

本文整理自云原生 Meetup 杭州站上&#xff0c;极狐(GitLab) DevOps 技术布道师马景贺的演讲。 当听到云原生的时候&#xff0c;你会想起什么&#xff1f; 可能很多人很自然地就会想到 Kubernetes、容器、微服务、开源等等&#xff0c;这些关键词是我们接触云原生绕不开的话题。…

CleanMyMac X4.13中文版mac电脑优化加速工具

CleanMyMac X 可以卸掉系统的额外负担 让您的电脑明显提速 不要再因为运行缓慢的 Mac 而拖慢您的效率。CleanMyMac X已经正式发布&#xff0c;作为最新的系统清理和应用管理软件&#xff0c;可以让用户一键智能化清理Mac电脑&#xff0c;自动扫描Mac上的所有文件&#xff0c;包…

Day44

思维导图 练习 全局变量&#xff0c;int monster 10000;定义英雄类hero&#xff0c;受保护的属性string name&#xff0c;int hp,int attck&#xff1b;公有的无参构造&#xff0c;有参构造&#xff0c;虚成员函数 void Atk(){blood-0;}&#xff0c;法师类继承自英雄类&#…

【操作系统】一些重要的概念

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

敏捷开发SCRUM工具

目录 1 Scurm开发工具1.1 白板1.2 PingCode1.3 VersionOne1.4 Atlassian Jira 2 PingCode进行Scurm开发2.1 角色管理2.2 创建敏捷项目2.3 需求管理2.4 迭代2.5 版本管理 1 Scurm开发工具 1.1 白板 上面我们说了Scurm框架的操作流程&#xff0c;下面我们看下支持Scurm开发框架的…

SpringBoot3【③ 数据访问】

整合SSM场景 SpringBoot 整合 Spring、SpringMVC、MyBatis 进行数据访问场景开发 1. 创建SSM整合项目 勾选的情况下会导入这些包 <!-- https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter --> <dependency><groupId>…

JMeter进行websocket测试

在做websocket性能测试的时候找了几个测试工具都暂时没有对websocket的支持&#xff0c;发现jmeter好像对websockect支持。但是使用jmeter时需要安装插件&#xff0c;下面一起看一下。 jmeter下载安装&#xff1a; 官网下载 https://jmeter.apache.org/download_jmeter.cgi 也…

【Java用法】Java在Linux下获取当前程序路径以及在Windows下获取当前路径对比

Java在Linux下获取当前程序路径以及在Windows下获取当前路径对比 log.info("分隔符&#xff1a;File.separator[{}]", File.separator); log.info("用户主目录&#xff1a;user.home[{}]", System.getProperties().getProperty("user.home")); l…

(模拟) 31. 下一个排列——【Leetcode每日一题】

❓ 31. 下一个排列 难度&#xff1a;中等 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如&#xff0c;arr [1,2,3] &#xff0c;以下这些都可以视作 arr 的排列&#xff1a;[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的…