vue移动端子滚动条与父滚动条

一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

介绍我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚动完成后,不触发父元素的滚动,比如 modal.侧边栏等等. 深入研究-webkit-overflow-scrolling:touch及ios滚动详细文档 & 例子 Document & Demo vue-scroll-lock 一个 VUE 组件:子元素 scroll 父元素容器不跟随滚

vue移动端地址三级联动组件(一)

vue移动端地区三级联动省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数据是后端请求的.我只简单写了三个mock数据.(二)中简单写一下展示以及父级组件. city.vue 子组件: html: <template> <div id="city" v-if="showModel"> <div class=&qu

了解css中px、em、rem的区别并使用Flexible实现vue移动端的适配

本人java菜鸟一名,若有错误,还请见谅. 1.px和em和rem的定义和区别 px:px像素,是相对单位,相对于屏幕的分辨率而言,也就是说,当屏幕的分辨率不同那么px相同,实际看到的大小也会不同. 例如:当一台手机的分辨率为1024*768来说,也就是说,这屏幕由纵向的1024个像素点和横向的768个像素点组成,所以当一个组件的width为200px的时候在这台手机上会占据200个横向的像素点:那么当同样大小的手机只有800*600的分辨率,那么该组件在同样的大小手机中也占据了200个横向像素

vue服务端渲染之nuxtjs

前言本篇主要针对nuxtjs中的一些重要概念整理和代码实现! 在学习vue服务端渲染之前,先搞清楚几个概念: 什么是客户端渲染(CSR) 什么是服务端渲染(SSR) CSR和SSR有什么异同客户端渲染(CSR):当用户在浏览器中输入网址,打开网页,此时的页面只有样式和一些html代码构成的空壳页面,并没有数据.这就需要我们通过执行js代码,请求相关数据,请求到数据之后,通过模板(vue),将这些数据渲染到页面,最终呈现给用户完整的页面. 服务端渲染(SSR):当用户在浏览器中输入网址,打开网

uniapp以及微信小程序中scroll-view隐藏滚动条自定义滚动条

隐藏滚动条 1.全局隐藏滚动条,在app.vue中 ::-webkit-scrollbar{ display: none; } 2.局部隐藏藏滚动条样式没有使用scoped属性时, 否则无效. .uni-scroll-view::-webkit-scrollbar { display: none } 使用scoped属性时, 就要使用/deep/穿透. /deep/.uni-scroll-view::-webkit-scrollbar { display: none } 自定义滚动条 /*定义

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w

Egg + Vue 服务端渲染工程化实现

在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue 构建的解决方案 easywebpack-vue. easywebpack-vue 支持纯前端模式和Node层构建,这为 Vue 服务端渲染提供了支持,我们只需要简单的配置关键的 entry 和 alias 就可以完成 Vue 前端渲染构建和 Node 层构建, 极大的简化了 Vue 服务端渲染构建的

Vue移动端项目模板

一个集成移动端开发插件的Vue移动端模板包含1.css: 使用stylus开发css 集成reset样式文件修改UI组件文件统一样式处理(如主题色等)2.UI组件使用热门的vant与mint-ui插件3.移动端适配集成rem插件移动端适配META标签4.组件集成标题栏组件.无数据组件5.请求集成axios封装请求接口6.babel ES6转ES5 7.vue全家桶 vue+vuex+vue-router 满足日常应用开发此模板保存下来,以备以后快速开发新项目,搭建环境 githu

vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图

vue移动端金融UI组件库滴滴MandMobile面向金融场景设计附功能思维导图 Mand Mobile是面向金融场景设计的移动端组件库,基于Vue.js实现.目前已实际应用于滴滴四大金融业务板块的10余款产品中. didi/mand-mobile:

vue移动端h5页面根据屏幕适配的四种方案

最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

layer子窗口与父窗口传值

layer作为优秀的jquery框架,可以用作弹出组件.日历.分页等,而且实现简单,只有几十k的大小. 此处给出弹出窗口时子窗口与父窗口的传值.js和css这里不展示引入(以下给出目录结构的图片),仅仅给出我测试的代码: 1 . index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&

vue服务端渲染axios预取数据

首先是要参考vue服务端渲染教程:https://ssr.vuejs.org/zh/data.html. 本文主要代码均参考教程得来.基本原理如下,拷贝的原文教程. 为了解决这个问题,获取的数据需要位于视图组件之外,即放置在专门的数据预取存储容器(data store)或"状态容器(state container))"中.首先,在服务器端,我们可以在渲染之前预取数据,并将数据填充到 store 中.此外,我们将在 HTML 中序列化(serialize)和内联预置(inline)状态.

vue服务端渲染简单入门实例

想到要学习vue-ssr的同学,自不必多说,一定是熟悉了vue,并且多多少少做过几个项目.然后学习vue服务端渲染无非解决首屏渲染的白屏问题以及SEO友好. 话不多说,笔者也是研究多日才搞明白这个服务端渲染到底是杂么回事!!! 一,首先实现下官网的基本案例随便建一个目录,然后执行npm init初始化项目,生成工程文件package.json:创建server.js:然后按照vue-ssr官方链接:https://ssr.vuejs.org/zh/basic.html教程里面介绍的server

vue服务端渲染提取css

vue服务端渲染,提取css单独打包的好处就不说了,在这里主要说的是抽取css的方法要从 *.vue 文件中提取 CSS,可以使用 vue-loader 的 extractCSS 选项(需要 vue-loader12.0.0+) // webpack.config.js const ExtractTextPlugin = require('extract-text-webpack-plugin') // CSS 提取应该只用于生产环境 // 这样我们在开发过程中仍然可以热重载 const is

Vue PC端框架

Vue PC端框架 1. Element 中文文档:http://element-cn.eleme.io/#/zh-CN github地址:https://github.com/ElemeFE/element 2. iView 中文文档:https://www.iviewui.com/ github地址:https://github.com/iview/iview 3. vue-element-admin 中文文档:https://panjiachen.github.io/vue-element

[vue] vue服务端渲染nuxt.js

初始化使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择在集成的服务器端框架之间进行选择: 选择您喜欢的 UI 框架: 选择您喜欢的测试框架: 选择你想要的 Nuxt 模式 (Universal or SPA) 添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中. 添加 EsLint 以在保存时代码规范和错误检查您的代码. 添加 Prettier 以在

winform子窗口与父窗口的交互-使用委托与事件

实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口新建工程,创建两个窗体显示子窗体的代码: 子窗体定义事件,父窗体订阅事件(通过子窗体修改父窗体) 2.通过子窗体控制父窗体父窗体定义事件,子窗体订阅事件(通过父窗体修改子窗体) 3.最终结果 4.完整代码 form1.cs form2.cs

Vue父子，子父，非父子组件之间传值

Vue组件基础纯属随笔记录,具体详细教程,请查阅vue.js网站子组件给父组件传值: <body> <div id="app"> <my-app></my-app> </div> </body> <template id="appTem"> <div>我是---{{ msg }} <my-banner @lalala='getData'></my-b

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

vue移动端transition兼容

vue移动端transition兼容 .face-recognition .wrapper(:style="{height: viewHeight+'px'}") .face-recognition{ height: 100%; display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #ffffff; .wrapp

JS中iframe子页面与父页面之间通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head> <script type="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.w

vue移动端 子滚动条与父滚动条

热门专题

vue移动端子滚动条与父滚动条