better scroll 饿了吗

2024-11-08

原生js 实现better-scroll效果,饿了么菜单内容联动，即粘即用

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <style> /*菜单容器样式,设置水平垂直居中,方便点击*/ .menu { position: fixed; width: 200px; height: 200px; top: 50

【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（三）

前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_eleme,欢迎Star. ratings seller 一.评论组件-ratings 评论组件主要分为三块评分信息-overview 评论选择-ratingselect 评论详细信息评分信息部分左侧评分布局Dom <div class="ratings-content">

vue2.0高仿饿了么better-scroll

首先安装better-scroll npm i better-scroll -S goods页面模板 <template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="item in goods" class="menu-item">

【前端性能】高性能滚动 scroll 及页面渲染优化

最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读. 滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: var i = 0; wind

MUI开发APP，scroll组件，运用到区域滚动

最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果如下: 这里面需要注意到的地方就是,头和底是固定的,但是中间的部分呢,由于要设置24小时的内容,从图中可以看到,只显示了03:00~13:00的内容,剩下的内容没显示出来.这里面,我们就需要用到区域滚动了,就是保持头和底不动,中间滚动,所以,我们就要用到MUI的scorll组件,根据MUI官网的介绍

完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天我就来说说我的思路 div 中惯性滚动问题我们在开发 web 如果在,非 body 元素中使用 scroll 就会碰到一个问题,没有惯性滚动,所以以前我们要么使用 iScroll 这类框架,要么就是自己使用触摸事件配合定时器来写一个惯性,自己写的当然体验不好,使用框架又感觉太不值得,因为一个小功能

解析ListView联动的实现--仿饿了么点餐界面

一.博客的由来大神王丰蛋哥之前一篇博客仿饿了点餐界面2个ListView联动(http://www.cnblogs.com/wangfengdange/p/5886064.html) 主要实现了2个ListView怎样实现互相关联,正好上篇博客review了ListView控件常规使用,因此本篇博客主要对大神的那篇博客的实现进行代码层的剖析. 一方面,方便自己,在以后的代码实现上加以参考.另一方面,供刚入门的Android菜鸟们共同学习. 二.最终的效果图如上图效果图为仿饿了么点餐界面的L

offset、client、scroll开头的属性归纳总结

HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent 第二组:clientWidth,clientHeight,clientLeft,clientTop 第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop 详细定义如下: 1.1

mui scroll和上拉加载/下拉刷新

mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006}); */ 内代码去掉可以避免出现双滚动条,但是没有上拉加载/下拉刷新时,不能去掉(二者取一): (另外发现mui.scrollto(0,0,1000)和上拉加载/下拉刷新时同时存

JavaScript学习笔记5 之计时器 & scroll、offset、client系列属性 & 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"

IOS－小项目（饿了么网络部分简单实现）

在介绍小项目之前,在此说明一下此代码并非本人所写,我只是随笔的整理者. 在介绍之前先展现一下效果图. 看过效果图大家应该很熟悉了,就是饿了么的一个界面而已,值得注意的是,实现时并没有采用本地连接,而是实打实的网络连接.看一下文件架构. 这一采用的是MVC设计模式,虽然文件很少,但是也可以看. 下面开始正式介绍小项目的实现. 首先介绍Model的实现,很简单,实现模型即可, Shop.h // // Shop.h // CX-小项目(饿了么网络部分简单实现) // // Created by

JavaScript中的 offset, client,scroll

在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div.offsetLeft 指div距离左侧或上层控件的距离,单位像素 div.offsetWidth 指div 控件本身的宽度,单位像素 div.offsetHeight 指div 控件本身的高度,单位像素混淆点 clientWidth 指对象看到的宽度,不包含border scrollWidth 是

饿了么基于Vue2.0的通用组件开发之路（分享会记录）

Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网:http://element.eleme.io/#/github:https://github.com/ElemeFE/element ## 设计目的大部分项目起源都是源于业务方的需求,Element 也是一样.随着公司业务发展,内部开始衍生出很多后台系统,UED 部门也接到越来越多的设计需求,

【前端性能】高性能滚动 scroll 及页面渲染优化--转发

本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知识点,选择性跳到相应地方阅读. 滚动优化的由来滚动优化其实也不仅仅指滚动(scroll 事件),还包括了例如 resize 这类会频繁触发的事件.简单的看看: 1 2 3 4 var i = 0; window.addEventListener('scroll',function(){

用vue2 +vue-router2 + es6 +webpack 高仿饿了么app（干货满满）

#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/elem/index#/goods) ##项目下载,运行,打包 git clone https://github.com/liangxiaojuan/eleme.git (下载) cnpm install --save (淘宝镜像源) npm run dev (运行) npm run bui

java中的单例模式（懒汉式+饿汉式）

什么是单例模式: 单例模式既只能在自己本类中创建有且唯一的一个实例(姑且不考虑映射的情况)通过方法将该实例对外公开第一种:单例模式-懒汉式既调用getInstance()方法返回实例之前判断有没有该实例如果没有就创建一个实例如果有该实例则直接返回出去,代码如下: class Singleton{ //单例-懒汉模式 public static Singleton singleton = null; //构造方法私有化 private Singleton(){ } //加锁保证线程的安全 p

由overflow-x:scroll产生的收获

我们都知道float:left属性会让元素向左浮动,如果用一个div将几个左浮动的li包起来,是不是div的宽度被li撑得很长很长呢,代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul { border: 1px solid #1FC195; list-style: none; margi

UGUI 之Scroll Rect 坑

由于UGUI没有提供类似Scroll View类似的控件,但提供了ScrollRect主机.可以自定义Scroll View 同时提供了Mask组件来遮罩超出Scroll Rect对象的范围, 之所以说有一个坑,是因为如果Scroll Rect对象少了Image组件,Mask就起不来作用,添加后解决

深入理解滚动scroll

前面的话前面两篇博文分别介绍过偏移大小.客户区大小.本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分 scrollWidth scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分 [注意]IE7-浏览器返回值是不准确的 [1]没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWi

position:fixed和scroll实现div浮动【示例】

前言在自己建站的过程中,要实现一个div随滚动条浮动的效果,网上找了些示例不太好用,还是自己动手,丰衣足食,写的不好请大家谅解,毕竟我不是搞前端的,因为自己建站毕竟每一步都必须自己来,这边只是做个记录. position:fixed 实现浮动主要有个css属性:position:fixed,从单词上就知道是固定的意思,这边就用我博客的公告栏做个示例: 上面是从博客园中复制下来的代码,放到本地自己调试,当然大家可以看到好的页面或者效果,可以搞下来研究.上面的效果可以看出样式中加了个positio

仿饿了点餐界面2个ListView联动

如图是效果图是仿饿了的点餐界面 1.点击左侧的ListView,通过在在适配器中设置Item来改变颜色,再通过notifyDataSetInvalidated来刷新并用lv_home.setSelection(showTitle.get(arg2));来关联右侧的 2.右侧的主要是重写下onScroll的方法:来改变左侧ListView的颜色及背景不过程序中还有个问题,望大神解答就是我右侧的ListView下拉时,上面的TextView能改变:但是上拉时,TextView的不能及时改变应为滑

better scroll 饿了吗

热门专题