- 2024-07-12纯CSS检测滚动
纯CSS实现检测页面滚动位置并展示/*注册自定义属性*/@property--scroll-position{syntax:"<number>";inherits:false;initial-value:0;}/*属性值过渡动画*/@keyframesscroll-variation{to{--scroll-position:1;}}body::a
- 2024-07-06玩转微信小程序（第四天）
玩转微信小程序第四天今日需要完成内容一，完成轮播图效果二，实现滑动效果2.1这里建议把scroll-view套用在view里使用2.2把图片进行横向排列并且不换行三，实现文字显示在图片上的效果3.1先实现简单的布局3.2样式的实现四，自定义组件设置跳转和文字4.1wxml效果4.2js效果4.3如
- 2024-07-01[CSS] Scroll animation: scroll-snap
Video:https://www.youtube.com/watch?v=zqjKE_zcWzE&list=WL&index=68&t=14scode:https://github.com/Alliemack77/scroll-animations-with-css-only/*Customprops*/:root{--transition-250-ease-in:250msease-in;}/*Reset*/*::after,*:
- 2024-06-17微信小程序中对custom-tab-bar高度的处理
现在有个页面中由一个scroll-view组成<!--index.wxml--><scroll-viewscroll-ystyle="height:100vh"><viewstyle="height:100%;display:flex;align-items:center;justify-content:center;">scroll-view</view></scroll-vi
- 2024-06-10better-scroll滚动不了
问题今天折腾了半天，使用better-scroll依然无法实现滚动，大概是不服气，一直较真。他有几个坑点，1.默认不能点击，默认不能滑动；2.初始化时就计算高度以至于判断容器内子元素高度不大于父容器，因此判断为不能滚动。下面这个属性据说就是判断高度后设置的，如果为false就滚动不了网络
- 2024-06-096.7总结
第三版，差不多是最后一个版本了<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="render
- 2024-06-07讲清楚 Elasticsearch scroll 的底层原理
Elasticsearch的Scroll主要用于高效地分批检索大量数据记录，适用于那些数据量过大而不能一次性通过标准搜索请求获取所有结果的场景。Scroll机制的工作原理类似于数据库中的游标（cursor），它允许用户发起一次搜索请求后，通过维护一个持续的上下文（context）来分批次获取所有匹配的文档，
- 2024-06-066.6每日总结
可视化第二版本代码留存<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="renderer&q
- 2024-06-056.5每日总结
可视化第一版本<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="renderer"co
- 2024-06-01css30 CSS Layout - Overflow
https://www.w3schools.com/css/css_overflow.aspCSSLayout-Overflow TheCSSoverflowpropertycontrolswhathappenstocontentthatistoobigtofitintoanarea. <!DOCTYPEhtml><html><head><style>#overflowTest{b
- 2024-05-29css13 CSS Backgrounds
https://www.w3schools.com/css/css_background.aspTheCSSbackgroundpropertiesareusedtoaddbackgroundeffectsforelements.Inthesechapters,youwilllearnaboutthefollowingCSSbackgroundproperties:background-colorbackground-imagebackgroun
- 2024-05-28再次学习History.scrollRestoration
之前在react.dev的源代码中了解到了这个HIstory的属性，当时写了一篇笔记来记录我对它的理解，现在看来还是一知半解。所以今天打算重新学习一下这个属性，主要从属性以及所属对象的介绍、使用方法，是否开启标准这几个方面来简单展开。什么是scrollRestorationscrollRestoration是一个
- 2024-05-22如何实现上拉加载，下拉刷新？
一、前言下拉刷新和上拉加载这两种交互方式通常出现在移动端中本质上等同于PC网页中的分页，只是交互形式不同开源社区也有很多优秀的解决方案，如iscroll、better-scroll、pulltorefresh.js库等等这些第三方库使用起来非常便捷我们通过原生的方式实现一次上拉加载，下拉刷新，有助
- 2024-05-14drawcall优化 - 无限滚动容器
这是一个前端项目常见的一个问题dc优化。比如一个复杂的背包容器500个元素，如果使用粗暴的实例化500个元素进去，最终的dc无疑会是灾难的。在内存管理和性能角度上讲也是铺张浪费的。看见效果如下dc1091 但实际上500个元素itemCell，在一个屏幕视界内能看到和交互的也就6~8个。
- 2024-05-01纵向控制的横向滚动
<template><divclass="scroll-container"id="scroll-container"><divclass="v-scroll"><divclass="content"><slot></slot></div></div>
- 2024-04-26Elasticsearch - scoll分批查询
场景：下载某一个索引中的一亿条数据scoll搜索会在第一次搜索的时候，保存一个当时的视图快照，之后只会基于该旧的视图快照提供数据搜索，如果这个期间数据变更，是不会让用户看到的。每次发送scroll请求，我们还需要指定一个scoll参数，指定一个时间窗口，每次搜索请求只要在这个时间窗口内能
- 2024-04-23HarmonyOS NEXT应用开发实战—组件堆叠
介绍本示例介绍运用Stack组件以构建多层次堆叠的视觉效果。通过绑定Scroll组件的onScroll滚动事件回调函数，精准捕获滚动动作的发生。当滚动时，实时地调节组件的透明度、高度等属性，从而成功实现了嵌套滚动效果、透明度动态变化以及平滑的组件切换。效果图预览使用说明加载完成
- 2024-04-23HarmonyOS NEXT应用开发案例—状态栏显隐变化
介绍本示例介绍使用Scroll组件的滚动事件 onScroll 实现状态栏显隐变化。该场景多用于各种软件的首页、我的等页面中。效果预览图使用说明加载完成后显示状态栏显隐变化页面，上下拖动屏幕，顶端状态栏出现显隐变化。实现思路在置顶位置使用stack组件添加两层状态栏。源
- 2024-04-19HarmonyOS NEXT应用开发之深色跑马灯案例
介绍本示例介绍了文本宽度过宽时，如何实现文本首尾相接循环滚动并显示在可视区，以及每循环滚动一次之后会停滞一段时间后再滚动。效果图预览使用说明：1.进入页面，检票口文本处，实现文本首尾相接循环滚动，且在同一可视区，滚动完成之后，停滞一段时间后继续滚动。实现思路由于ArkUI中
- 2024-04-18CSS 滚动驱动动画终于正式支持了
在最新的Chrome115中，令人无比期待的CSS滚动驱动动画(CSSscroll-drivenanimations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯CSS实现了，就是这么强大，一起了解一下吧温馨提示：文章略长，建议收藏后反复查阅一、快速入门CSS滚动驱动动画直接介绍 API
- 2024-04-08css 实现排行榜向上滚动
使用动画实现无线向上滚动复制一层dom，使用动画向上滚动，鼠标hover的时候暂停动画<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">
- 2024-04-08Elasticsearch,使用scroll实现遍历(分页)查询
为什么要使用scroll查询在使用es中，当某个index存贮的数据超过10000时，只能查询到10000的数据。因为index.max_result_window默认值是10000。并且使用游标查询可以在一次查询中获取大量文档，并且保持查询快照状态，允许用户多次检索数据而不影响其他并发请求。scroll查
- 2024-03-23解决 scroll-view 组件 [Intervention] 报错
[Intervention]Ignoredattempttocancelatouchmoveeventwithcancelable=false,forexamplebecausescrollingisinprogressandcannotbeinterrupted解决报错如下图,因为事件冒泡,scroll-view组件的touchmove事件可以传递到模态框。于是我给scroll-view取
- 2024-03-22uniapp开发ios，scroll-view横向滚动失效，动态获取scroll-view内部子容器总宽度，然后添加个宽度为1，高度跟子元素总宽度相等的view即可
这是老bug了，官方一直没有解决掉。已经摸索到完美解决方案，遇到这个问题的可以看下。本文以三级导航页面中的二级横向滚动导航为例，说明如何做到不同宽度子元素的横向滚动。bug定位：本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的，但是IOSApp开发中子元素高度必须
- 2024-03-20第四章总结（页面组件）
4.1组件的定义及属性 组件是页面视图层(WXML)的基本组成单元,组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个)基础组件。 每一个组件都由一对标签组成,有开